Revdash components
Nuxt 4 + Nuxt UI 4 + Tailwind 4. PascalCase Rev* components, Tailwind utilities + CSS-token variables, no inline CSS.
Colors
Pinnat (tummin → vaalein), aksenttivihreä teksteineen, semanttiset tilavärit ja tekstitasot. Kaikki arvot elävät tokens.css:ssä.
--bg--sidebar--surface--surface-2--surface-3--tint--a--as--asoft--on-accent--amber--red--blue--fg--tm--tf--tffTypography
Inter 300–700. Otsikoissa negatiivinen tracking, eyebrow-labeleissa iso positiivinen. KPI-numerot tiukkoja.
H1 / View titleYleiskatsausKPI number1 248Card titleTietokannan kattavuusBodyBotti oppii jokaisesta keskustelusta.Metadata2 pv sittenLabel (eyebrow)SisältöSurfaces, Radius & Motion
Glass-gradient + inset -syvyys (ei blurria korteissa), pillit kaikkialla ja yksi easing-käyrä.
14px99px12px10px9pxbackground: var(--surface); background-image: var(--glass);
border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--inset);cubic-bezier(.2,.8,.2,1).16–.18s.25s.35s.42sSidebar
240 px, oma taustataso + pystysuuntainen valokiilto. Brändi → haku → osiolabelit + nav-rivit (badge/dot) → status-chip + käyttäjä.
Topbar & Draft Bar
52 px palkki: murupolku, ympäristötoggle (Luonnos/Julkaistu) ja Julkaise-pillinappi. Topbar on lasia: rgba(15,15,18,.55) + blur(14px).
Buttons
Kaikki napit pillejä (99 px). Primääri: neon-vihreä + tumma teksti + hehkuvarjo. Teksti primäärissä on #06281a — ei koskaan valkoinen.
Tags & Statuses
Tag (sisältöluokitus), status (tila: ok/pend/proc/err) ja AI-ehdotus-badge. Trendinuolia 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.
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), 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ä.
Selectors & Toggles
Valintachipit (amber aktiivina korjausflowssa), segopt-korttivalitsin SUOSITUS-badgella, kytkin ja leveä segmentti.
Messages & Composer
Testauschat: bot-avatar vihreällä laatalla, kuplat surface-pinnoilla, lähdeviite vastauksen alla — vihreä kun tieto löytyi, amber kun aukko. Sandbox-palkki muistuttaa ettei keskustelu ole tuotantoa.
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 liikuva 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ä.
Toast
Alakeskellä nouseva kuittaus: ikonilaatta + otsikko + selite + valinnainen Kumoa-linkki. Surface-3-pinta vahvalla varjolla, sisään 350 ms.
Steps & Checklist
Setup-checklist numeroympyröillä (valmis = täytetty vihreä, nykyinen = vihreä border) ja onboarding-stepper erottimilla. Progress-palkit 5 px pillejä.
Plan Cards
Hinnoittelukortit: valittu kortti saa aksenttiborderin + renkaan + hehkuvarjon, suosituin badgen. Valintanappi muuttuu vihreäksi valitussa. Klikkaa vaihtaaksesi.
Pienelle sivustolle
- 500 keskustelua/kk
- 1 tietolähde
Kasvavalle B2B-yritykselle
- 2 000 keskustelua/kk
- Rajattomat lähteet
- Liidien keräys + CRM
Suurelle liikenteelle
- Rajaton käyttö
- Oma onboarding
Timeline & AI Audit
Aikajana pystyviivalla + pistemerkeillä (vihreä = julkaisu, amber = luonnos) sekä AI-auditrivi ikonilaatalla, perustelulla ja toiminnoilla.
Toimitamme Pohjoismaihin 3–5 arkipäivässä.− Toimituskulut alkaen 15 €.+ Toimituskulut alkaen 12 €.