Revdash Components
Revdotin dashboard-käyttöliittymän komponentit: tiivis tumma data-UI, neon-vihreä #00dc82, lasigradientti + inset-kiilto korteissa ja pillimuotoiset toiminnot. Previewt käyttävät suoraan revdash-components.css-tiedostoa (ekstraktoitu 1:1 UI-mockupista).
Ihmiselle
Selaa, katso preview, kopioi HTML. Lisää sivullesi revdash-components.css — tyylit ovat globaaleja (dark-only dashboard). Muista Inter-fontti.
AI:lle
Anna agentille skills/revdash-ui/ (SKILL.md + tokens.css + components.md) tai tämä sivu + revdash-components.css. Täysi demo: demo-revdash/index.html.
Colors #
Neutraali near-black-portaikko + yksi neon-vihreä aksentti. Teksti aksenttipinnalla on aina tummanvihreä #06281a — ei valkoinen. Semanttiset värit (amber/red/blue) vain statuksiin, aina soft-taustan parina. Klikkaa swatchia kopioidaksesi.
Johdetut tokenit
| Token | Arvo | Rooli |
|---|---|---|
--asoft | rgba(0,220,130,.14) | Aksentin soft-tausta (badget, ikonilaatat) |
--asoft-2 | rgba(0,220,130,.08) | Kevyin vihreä häive (valitut kortit) |
--aglow | rgba(0,220,130,.45) | Hehkuvarjo primäärinapin alla |
--bd | rgba(255,255,255,.07) | Hairline-border (strong: .14) |
--tint | #13241d / #16291f | Vihreään taittavat gradienttipinnat (nextstep) |
--amber-soft | rgba(224,161,63,.14) | Amber-tausta (line: .5) |
--red-soft | rgba(224,103,63,.13) | Red-tausta |
--blue-soft | rgba(120,160,255,.13) | Blue-tausta |
Typography #
Inter, tiivis data-asteikko: leipäteksti 13–14 px, metatieto 10.5–12 px. Numerot isoina (24–27 px / 600 / −0.03em). Eyebrow-labelit harvalla versaalilla. Monospace (SF Mono) vain raw prompt -editorissa ja diffeissä.
| Rooli | Speksi | Esimerkki |
|---|---|---|
| Näkymän otsikko (.h1) | 22px / 600 / -0.025em | Yleiskatsaus |
| KPI-numero (.kn) | 27px / 600 / -0.03em | 1 248 |
| Leipäteksti | 13–14px / 400 / lh 1.5 | Botti vastasi 94 % kysymyksistä. |
| Metatieto | 11–12px / 400–500 / var(--tf) | Päivitetty 2 min sitten |
| Label (.label) | 10.5px / 600 / +0.12em / uppercase | MERKITTY VIESTI |
| Mono (.diff, .rawta) | 11.5–12.5px / SF Mono / lh 1.6–1.7 | + Vastaa aina suomeksi |
Surfaces, Radius & Motion #
Korttiresepti: background:var(--surface) + var(--glass) + border var(--bd) + var(--inset) — hienovarainen ylävalo ilman raskasta blurria. Radius 14 px korteille, 99 px pilleille. Kaikki siirtymät 160–180 ms samalla easingilla.
| Token | Arvo | Käyttö |
|---|---|---|
--r | 14px | Kortit, paneelit (pcard, railcard) |
pill | 99px | Napit, tagit, statukset, searchbar, meterit |
12px | 12px | Litemit, stepit, segoptit |
9–10px | 9–10px | Ikonilaatat, inputit, segmentit, srcline |
--glass | linear-gradient(180deg, …) | Korttien lasikiilto ylhäältä |
--inset | inset 0 1px 0 rgba(255,255,255,.05) | Ylareunan valoviiva |
--e | cubic-bezier(.2,.8,.2,1) · 160–180ms | Kaikki mikrointeraktiot (drawer 420ms, toast 350ms) |
glow | 0 4px 16px -5px var(--aglow) | Primäärinapin/logon hehku |
Sidebar #
240 px, oma taustataso (--sidebar) + pystysuuntainen valokiilto. Rakenne: brändi → haku (⌘K) → osiolabelit + nav-rivit (badge/dot oikealla) → status-chip + käyttäjä alhaalla. Aktiivinen rivi: vaalea pinta + vihreä ikoni.
Topbar & Draft Bar #
52 px palkki: murupolku, ympäristötoggle (Luonnos/Julkaistu — amber/vihreä) ja Julkaise-pillinappi muutoslaskurilla. Alla 30 px amber draft-palkki kun luonnostilassa. Topbar on lasia: rgba(15,15,18,.55) + blur(14px).
Buttons #
Kaikki napit pillejä (99 px). Primääri: neon-vihreä + tumma teksti + hehkuvarjo, hover nostaa 1 px ja vaalentaa. Outline/ghost tekstitoiminnoille, danger vain punaisissa poistoissa.
Tags & Statuses #
Kolme perhettä: .tag (10 px, sisältöluokitus: Tietokanta-vihreä / Ohjeistus-sininen / neutraali), .status (11 px, tilat: ok/pend/proc/err) ja .aibadge (AI-ehdotus). Trendinuolet KPI-riveille.
Cards & Stats #
KPI-kortit (label + iso numero + trendi), nextstep-banneri vihreällä tint-gradientilla sekä panel-kortti mittarilla. Klikattavat kortit nousevat 2 px hoverissa ja border kirkastuu.
Seuraava askel: kouluta 5 AI-ehdotusta
Tekoäly löysi 5 toistuvaa kysymystä joihin botti ei osannut vastata.
Tietokannan kattavuus
Tabs & Segments #
Kolme tabityyliä: .seg (tumma upotettu segmentti, aktiivi saa surface-3-pinnan), .tabs (alleviivaus aksentilla) ja .rangetabs (aikavälit). Kokeile klikata.
Search & Filters #
Pillimuotoinen hakukenttä (tumma upotus, ei lasia) + dropdown-suodattimet. Aktiivinen suodatin saa vihreän soft-pinnan.
List Items #
Laajenevat listarivit: ikonilaatta + otsikko + metarivi + statukset oikealla, chevron kääntyy auki. AI-ehdotusrivi saa vihreän borderin + gradienttipään + perustelulaatikon. Klikkaa riviä avataksesi.
Inputs & Fields #
Kentät upotetaan tummaan (rgba-musta 35 %, radius 10 px). Focus: pinta syvenee, border kirkastuu ja 4 px vihreä rengas. Label eyebrow-tyylillä kentän yllä. Kokeile fokusoida.
Selectors & Toggles #
Valintachipit (amber aktiivina korjausflowssa), segopt-korttivalitsin SUOSITUS-badgella, kytkin ja leveä segmentti. Kokeile klikata.
Messages & Composer #
Testauschat: bot-avatar vihreällä laatalla, kuplat surface-pinnoilla, lähdeviite (srcline) vastauksen alla — vihreä kun tieto löytyi, amber kun aukko. Sandbox-palkki muistuttaa ettei keskustelu ole tuotantoa. Composer on pilli.
Charts & Meters #
Data piirretään aksenttivihreällä: aihepalkit gradientilla, suppilo läpikuultavilla täytöillä, SVG-rengas ja mittarit. Ei kirjastoja — kaikki on CSS + inline-SVG.
Yleisimmät aiheet
Ostosuppilo
Drawer #
Oikealta liukuva 500 px paneeli (sidebar-tausta, vahva varjo): otsikkorivi ikonilaatalla + X, scrollattava body, footer-toiminnot. Tuotannossa scrim (rgba-musta 50 % + blur 2 px) sivun päällä.
Merkitse & korjaa
Korjaus tallentuu luonnokseen — julkaise ottaaksesi käyttöön.
Toast #
Alakeskellä nouseva kuittaus: ikonilaatta + otsikko + selite + valinnainen Kumoa-linkki. Surface-3-pinta vahvalla varjolla, sisään 350 ms.
Uusi tietokanta-artikkeli luotu luonnokseen.
Steps & Checklist #
Setup-checklist numeroympyröillä (valmis = täytetty vihreä, nykyinen = vihreä border) ja onboarding-stepper erottimilla. Progress-palkit 5–7 px pillejä.
Plan Cards #
Hinnoittelukortit: valittu kortti saa aksenttiborderin + 1 px renkaan + hehkuvarjon, suosituin POPULAR-badgen. Valintanappi muuttuu vihreäksi valitussa. Klikkaa vaihtaaksesi.
- 500 keskustelua/kk
- 1 tietolähde
- 2 000 keskustelua/kk
- Rajattomat lähteet
- Liidien keräys + CRM
- Rajaton käyttö
- Oma onboarding
Timeline & AI Audit #
Aikajana pystyviivalla + pistemerkeillä (vihreä = julkaisu, amber = luonnos) sekä AI-auditrivi ikonilaatalla, perustelulla ja toiminnoilla.