Revdot Widget Components
Revdotin chat-widgetin tuotantokomponentit: tumma lasi, terävä taustakuva, Forest Signal -vihreä ja pillimuodot. Jokainen preview käyttää suoraan revdot-components.css-tiedostoa — kopioitu koodi toimii sellaisenaan.
Ihmiselle
Selaa sivupalkista, katso live-preview, kopioi HTML. Lisää sivullesi revdot-components.css ja kääri komponentit <div class="rvf-host" data-theme="dark"> -elementtiin.
AI:lle
Anna agentille skills/revdot-taste/ (SKILL.md + tokens.css + components.md) tai suoraan tämä sivu + revdot-components.css. Snippetit ovat 1:1 tuotantowidgetin kanssa.
Colors #
Brändipaletti revdot.ai:sta. Yksi vihreä signaaliväri — Forest Signal — kaikille interaktiivisille korostuksille. Widgetin pinnat ovat läpikuultavia mustia/valkoisia, eivät kiinteitä värejä. Klikkaa swatchia kopioidaksesi arvon.
Widgetin pintatokenit (dark) — läpikuultavuus on järjestelmän ydin
| Token | Arvo | Rooli |
|---|---|---|
--widget-bg | rgba(14,16,20,.62) | Paneelin lasipohja |
--comp-bg | rgba(0,0,0,.45) | Composer-tummennos (focus: .6) |
--row-bg | rgba(0,0,0,.25) | FAQ/option-boksit (hover: .35) |
--pill-bg | rgba(0,0,0,.3) | Pillit & togglet (hover: .4) |
--bd | rgba(255,255,255,.07) | Hairline-border (hover: .14) |
--tm | rgba(245,246,247,.62) | Toissijainen teksti |
--tf | rgba(245,246,247,.38) | Placeholder & himmein teksti |
--asf | rgba(81,163,90,.16) | Aksentin soft-tausta + focus-rengas |
Typography #
Inter (400–700) kaikkeen. Otsikoissa tiukka negatiivinen välistys (−0.02…−0.035em), eyebrow-otsikoissa harva versaali (+0.14em). Widgetin leipäteksti 14–15 px.
| Rooli | Koko / rivi / välistys / paino | Esimerkki |
|---|---|---|
| Home title | 28px / 1.1 / -0.03em / 600 | Miten voin auttaa? |
| Flow heading | 22px / 1.2 / -0.025em / 600 | Millainen tarve? |
| Body | 14px / 1.5–1.6 / -0.01em / 400 | Kysy AI:lta tai valitse vaihtoehdoista. |
| Chip / pieni UI | 12.5px / 1 / 0 / 500 | Hinta-arvio |
| Eyebrow | 10.5px / 1.2 / +0.14em / 600 / uppercase | USEIN KYSYTTYÄ |
Radius & Spacing #
Pilli (999px) on järjestelmän tunnistettavin muoto — kaikki napit, chipit ja togglet. Kortit ja paneelit 14–18 px, inputit ja rivit 12 px. Base unit 4 px.
| Elementti | Radius | Preview |
|---|---|---|
| Pillit, napit, chipit, tabit | 999px | 999 |
| Composer, CTA-kortti, paneelikortit | 16–18px | 18 |
| Option-kortit (flow) | 14px | 14 |
| Inputit, FAQ-rivit | 12px | 12 |
| Ikoninapit | 10px | 10 |
| Widget-paneeli | 24px | 24 |
Spacing scale (4px base)
| Sisäiset gapit | 6 / 8 / 12 / 14px | |
| Paddingit | 14–16px (rivit) · 14px 16px (composer) · 22px (näkymät) | |
| Osioiden välit | 18–22px (widget) · 80px (sivusto) |
Glass, Blur & Shadows #
Signature-efekti: läpikuultava tumma pinta + backdrop-filter: blur() saturate(140%) terävän valokuvan päällä. Kolme blur-tasoa eri rooleihin. Alla live-lasi kuvan päällä.
Trigger-pilli — raskain frost
Composer, rivit, optiot
Sivun backdrop widgetin takana
Shadow-tokenit
| Nimi | Arvo | Käyttö |
|---|---|---|
| widget-sh (dark) | 0 30px 80px -30px … + inset shimmer | Paneelin nosto + lasin yläreunan kiilto |
| cta-glow | 0 4px 18px -6px rgba(81,163,90,.55) | Vihreä hehku primäärinapin alla |
| trigger-sh | 0 10px 30px -12px rgba(0,0,0,.55) | Trigger-pilli (hover: 0 16px 36px -12px .65) |
| toggle-sh | 0 1px 3px … , 0 1px 2px … | Aktiivinen toggle/tab-pilli |
| focus-ring | 0 0 0 4px rgba(81,163,90,.16) | Input-focus, aina aksenttivihreä |
Motion #
Yksi easing kaikkeen mikro-interaktioon: cubic-bezier(.2,.8,.2,1). Hover = nousu 1–2 px + borderin kirkastus. Paneelit liukuvat 550 ms, sisältö 200–350 ms.
| Token | Kesto / easing | Käyttö |
|---|---|---|
| standard | 200ms · cubic-bezier(.2,.8,.2,1) | Hover, väri, borderit |
| enter | 300–350ms | Viestit & näkymät sisään (fade + 6–8px nousu) |
| panel | 550ms | Widget-paneelin liuku oikealta |
| expressive (sivusto) | 525ms · cubic-bezier(.625,.05,0,1) | Valikon avaus, isot siirtymät |
Trigger Pill #
Kelluva "Kysy tekoälyltä" -pilli sivun oikeassa alakulmassa. Near-black lasi 50 % + blur(40px), hairline-border, sparkle-ikoni. Aina tumma — myös vaalealla sivulla. Hover nostaa 2 px.
Buttons #
Primääri = Forest Signal -pilli valkoisella tekstillä. Send-nappi on valkoinen ympyrä tummalla (kääntyy tummaksi vaalealla). Ikoninapit ovat läpinäkyviä, hover tuo pinnan + borderin esiin.
Chips #
Quick-chipit composerin alla. Neutraali lasichip + yksi aksenttichip per näkymä (esim. Hinta-arvio). Vaalealla teemalla chipit muuttuvat valkoisiksi korteiksi varjolla.
Theme Toggle #
Kaksipaikkainen pillitoggle composerin vasemmassa reunassa (aurinko/kuu). Aktiivinen puoli saa pinnan + toggle-varjon.
Composer #
Widgetin sydän: lasipaneeli (rgba-musta 45 % + blur 20px + saturate 140 %), radius 18px, sisällä reunaton textarea ja työkalurivi. Focus syventää tummennuksen (.6) ja kirkastaa borderin (.18). Kokeile klikata kenttää.
Mini Popup #
Avautuu trigger-pillistä: kompakti composer + brändirivi + X-nappi. Pakotettu tumma teema syvemmällä tummennoksella (55 %) — pysyy tummana myös vaalealla sivulla. Submit avaa täyden widgetin.
Suggestion Rows #
Tummat boksirivit (FAQ, ehdotukset): rgba-musta 25 % + blur, radius 12px. Hover siirtää riviä 2 px oikealle ja nuoliympyrä täyttyy vihreällä kääntyen −45°. Eyebrow-otsikko ryhmän yllä.
Usein kysyttyä
CTA Card #
Ainoa vihreäpohjainen pinta widgetissä: diagonaali gradientti aksentista (.18 → .06), vihreä border (.3), sisällä otsikko + alarivi ja pillinappi. Koko kortti on klikattava.
Chat Messages #
Epäsymmetrinen chat: käyttäjän viesti on valkoinen pilli oikealla, AI vastaa ilman kuplaa suoraan pinnalla (14.5px / 1.6). Typing-indikaattori kolmella pomppivalla pisteellä. Vastauksen alle voi liittää pillitoiminnot.
Revdotin hinnoittelu alkaa 30 €/kk ja skaalautuu käytön mukaan. Tarkan arvion saat parissa minuutissa hinta-arviotyökalulla.
Flow: Progress & Steps #
Monivaiheisen flown yläosa: takaisin-pilli, vaiheilmaisin ja hinta oikealla. Alla 3 px progress-palkki aksentilla.
Flow: Option Cards #
Radiovalinta korttiriveinä: sama tumma boksipinta kuin FAQ-riveillä (radius 14px), radio oikeassa yläkulmassa. Valittu kortti saa aksenttiborderin + 1 px renkaan + vihreän häivepinnan.
Millaiseen tarpeeseen?
Valitse lähin vaihtoehto — tarkennetaan myöhemmin.
Flow: Inputs #
Tekstikentät samalla boksipinnalla (radius 12px). Focus: aksenttiborder + 4 px vihreä rengas + pinta tummenee kiinteämmäksi. Label pienellä muted-tekstillä kentän yllä. Kokeile fokusoida.
Widget Panel #
Koko paneeli koottuna (home-näkymä): terävä taustakuva + gradientti-fade ylhäältä läpinäkyvästä alas opaakkiin, header, keskitetty hero + composer + chipit, FAQ ja footer-tabit. Tuotannossa full-height side sheet (540 px), joka liukuu oikealta 550 ms.