Colors

Pinnat (tummin → vaalein), aksenttivihreä teksteineen, semanttiset tilavärit ja tekstitasot. Kaikki arvot elävät tokens.css:ssä.

Canvas

--bg

Sidebar

--sidebar

Surface

--surface

Surface 2

--surface-2

Surface 3

--surface-3

Tint

--tint

Accent

--a

Accent hover

--as

Accent soft

--asoft

On accent

--on-accent

Amber

--amber

Red

--red

Blue

--blue

Foreground

--fg

Muted

--tm

Faint

--tf

Faintest

--tff

Typography

Inter 300–700. Otsikoissa negatiivinen tracking, eyebrow-labeleissa iso positiivinen. KPI-numerot tiukkoja.

H1 / View titleYleiskatsaus

KPI number1 248

Card titleTietokannan kattavuus

BodyBotti oppii jokaisesta keskustelusta.

Metadata2 pv sitten

Label (eyebrow)Sisältö

Surfaces, Radius & Motion

Glass-gradient + inset -syvyys (ei blurria korteissa), pillit kaikkialla ja yksi easing-käyrä.

Card

14px

Pill

99px

Row

12px

Input

10px

Tile

9px

Card recipe

background: var(--surface); background-image: var(--glass);
border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--inset);

Standard easing

cubic-bezier(.2,.8,.2,1)

Micro

.16–.18s

Expand / fade

.25s

Toast

.35s

Drawer

.42s

Sidebar

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).

Muokkaat luonnosta — muutokset eivät näy oikeille kävijöille ennen julkaisua.

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.

→ Tietokanta→ OhjeistusHinnoitteluJulkaistuOdottaaKäsittelyssäVirhe

Cards & Stats

KPI-kortit (label + iso numero + trendi), nextstep-banneri vihreällä tint-gradientilla sekä panel-kortti mittarilla. Klikattavat kortit nousevat 2 px hoverissa.

Keskustelut

1 248

+18 %vs. edellinen 30 pv

Liidit

86

+31 %konversio 6,9 %

Vastausosuus

94 %

±0 %6 % eskaloitu

Vastausaika

1,2 s

−0,3 smediaani

312

Keskustelut tänään

+12 %

48

Uusia liidejä

+5

92%

Tyytyväisyys

+3 %

Seuraava askel: kouluta 5 AI-ehdotusta

Tekoäly löysi 5 toistuvaa kysymystä joihin botti ei osannut vastata.

Tietokannan kattavuus

42 artikkelia · 3 lähdettä

Containers & Nesting

Laatikko laatikon sisällä: pintataso nousee portaan per sisäkkäisyystaso (surface → surface-2 → surface-3), radius pienenee (14 → 12 → 9 px), padding kapenee (18 → 14 → 10 px) ja border on aina sama hairline. Lasigradientti ja varjot vain uloimmalle kortille. Enintään kolme tasoa — syvempi rakenne jaetaan omiksi korteikseen.

Taso 1 — RevCard (bg-surface · rounded-card)

Uloin kontti kantaa lasigradientin, hairline-borderin ja inset-kiillon. Sisätasot ovat pelkkää pintaa.

Taso 2 — sisälaatikko (bg-surface-2 · rounded-row)

Ei lasia, ei varjoa — pinta + border riittää erottamaan tason.

Taso 3 — bg-surface-3

Upotus — bg-black/30

Kevyt vaihtoehto tasolle 2: läpikuultava bg-white/[0.03] — esim. AI-suunnitelmakortit (RevAIPlan) ja muut hiljaiset sisälaatikot.

Pintaportaikko

Jokainen sisäkkäisyystaso nostaa pintaa yhdellä — samaa pintaa ei koskaan laiteta itsensä sisään.

--bg · canvas

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ä.

Artikkelin otsikko

Sisältö

Selectors & Toggles

Valintachipit (amber aktiivina korjausflowssa), segopt-korttivalitsin SUOSITUS-badgella, kytkin ja leveä segmentti.

Mikä meni pieleen?

Mihin tieto tallennetaan?

Kerää yhteystiedot keskustelun päätteeksi

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.

Testiympäristö — keskustelut eivät tallennu analytiikkaan.

ER

Toimitatteko Ruotsiin?

R

Kyllä — toimitamme Pohjoismaihin 3–5 arkipäivässä. Toimituskulut alkaen 12 €.

Lähde: Toimitusajat ja -kulut

R

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

Hinnoittelu

+4 %

Toimitusajat

±0 %

Palautukset

−2 %

Ostosuppilo

Keskustelu aloitettu

1 248

Tarve tunnistettu

574

Yhteystieto jätetty

86

94 %

Vastausosuus

6,9 %

Konversio liidiksi

42 s

Keskim. kesto

4,6/5

Palautearvio

1 248

Keskusteluja yhteensä

Builder Chrome

Widget-builderin kromi: 46 px työkalupalkki (otsikko + versiopilleri, näkymäsegmentti, icon-napit, zoom), rakenne-puu 13 px sisennysportailla ja hover-silmällä sekä canvas-valinnan overlayt — aksenttitagi vasemmassa ja työkaluklusteri oikeassa yläkulmassa. Lisää elementti -valikko kelluu canvaksen päällä (tässä staattisena).

Widget Builder v2 · Pill

100%

Pikavalinnat

Hinta-arvioDemoReferenssit+ Lisää

Library & Templates

Komponenttikirjaston vedettävät kortit (Revdot-lohkot saavat aksenttireunan, ikonilaatan ja pillin) sekä mallipohjakortit mini-skeletonesikatselulla. Skeletonit ovat RevSkeleton-palasia — kortin accent-väri periytyy niihin CSS-varilla.

Peruspalikat

Revdot-lohkot

Inspector

Builderin oikean reunan tyylipaneeli (266 px, sidebar-tausta): otsikkorivi ikonilaatalla, eyebrow-otsikoidut osiot hairline-erottimilla, rivi- ja pino-layoutit, mini-inputit tummalla upotuksella, liukusäädin arvolukemalla, väripaletti, mediakenttä ja toimintorivi.

AI Assistant

Rakenna AI:lla -kapseli: lasipinta (float-2 + blur 14 px), kysymys oikealla soft-aksenttikuplassa, vastaus sparkle-laatalla, suunnitelmakortti add/edit/del-badgeilla ja porrastetulla rivianimaatiolla, chip-ehdotukset ja lähetyskenttä. Suljettu tila on gradienttipilleri. Kokeile: Ota käyttöön / Hylkää vaihtaa suunnitelman tilaa.

Rakenna AI:llabeta

Lisää hinta-arvio CTA ja vaihda aksentti violettiin

Selvä — lisään CTA-lohkon etusivun loppuun ja vaihdan aksenttivärin. Tässä suunnitelma:

Suunnitelma · 3 muutosta

Hinta-arvio CTA etusivulle+

Aksenttiväri~

Tyhjä välilohko pois−

Lisää vielä referenssit-osio

Luen nykyistä widgettiä…

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.

Modal & Media Library

Keskitetty dialogi: surface-tausta, vahva border, syvä varjo ja scale+lift-sisääntulo. Otsikkorivi ikonilaatalla + X, tabirivi, scrollattava body ja hairline-footer. Demo on mediakirjasto: asset-tiilet valintacheckillä, upload-droppi ja URL-liitto. Avaa ja kokeile tabeja.

Steps & Checklist

Setup-checklist numeroympyröillä (valmis = täytetty vihreä, nykyinen = vihreä border) ja onboarding-stepper erottimilla. Progress-palkit 5 px pillejä.

Lisää tietolähteet

Valmis

2

Määritä botin ohjeistus

3

Testaa ja julkaise

Tili

2

Tilaus

3

Maksu

Plan Cards

Hinnoittelukortit: valittu kortti saa aksenttiborderin + renkaan + hehkuvarjon, suosituin badgen. Valintanappi muuttuu vihreäksi valitussa. Laskutusjakso vaihdetaan pillitogglella, jossa alennusbadge. Klikkaa vaihtaaksesi.

Start

Pienelle sivustolle

30 €/kk

500 keskustelua/kk
1 tietolähde

Growth

Suosituin

Kasvavalle B2B-yritykselle

50 €/kk

2 000 keskustelua/kk
Rajattomat lähteet
Liidien keräys + CRM

Pro

Suurelle liikenteelle

80 €/kk

Rajaton käyttö
Oma onboarding

Timeline & AI Audit

Aikajana pystyviivalla + pistemerkeillä (vihreä = julkaisu, amber = luonnos) sekä AI-auditrivi ikonilaatalla, perustelulla ja toiminnoilla.

v12 julkaistu

Tänään 14:02 · Eelis

2 korjausta lisätty luonnokseen

Tänään 11:30 · AI-ehdotus hyväksytty

Tietokanta synkattu (hinnasto.pdf)

Eilen 16:44

Vastaus vanhentui: aukioloajat

Verkkosivujen aukioloajat muuttuivat 1.7. — tietokannan artikkeli viittaa vanhoihin aikoihin.

→ TietokantaVarmuus 92 %

  Toimitamme Pohjoismaihin 3–5 arkipäivässä.− Toimituskulut alkaen 15 €.+ Toimituskulut alkaen 12 €.