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ä

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ä

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

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