Design System v1.0 — Toukokuu 2026
Pohja kaikille uusille sivuille · design-system.css
1. Brändivärit
Väripaletti
Kaikki värit CSS-muuttujina. Käytä aina muuttujia, älä koodaa hex-arvoja suoraan.
Päävärit
Primary
--primary · #0e2d52
Primary Light
--primary-light · #164070
Primary Subtle
--primary-subtle · #e8eef6
Accent
--accent · #e67e22
Accent Hover
--accent-h · #d35400
Accent Subtle
--accent-subtle · #fff8f2
Neutraalit
BG
--bg · #eef2f7
Surface
--surface · #ffffff
Border
--border · #cdd9e8
Text
--text · #1a2332
Muted
--text-muted · #6b7c93
Faint
--text-faint · #9aabb8
Semanttiset
Success
--success · #1a9e5a
Warning
--warning · #f39c12
Danger
--danger · #dc2626
Info
--info · #2563eb
2. Typografia
Tekstityylit
System font stack. Kokojärjestelmä: 11 / 12 / 14 / 15 / 17 / 20 / 24 / 30 px.
Autotuonti ammattilaiselta
.h1 · 30px/800
Laske tuontihinta nyt
.h2 · 24px/700
Palvelupakettimme
.h3 · 20px/700
Sisältää kuljetuksen
.h4 · 17px/600
Tuomme auton Saksasta ovellesi — tarkastus, rekisteröinti ja kaikki järjestelyt hoidettu.
body · 14px/400
Ensirekisteröinti 15.3.2021 · 47 000 km · 133 kW
.text-sm .text-muted · 12px
Tiedot tarkistettu Traficomin rekisteristä
.text-xs .text-faint · 11px
3. Komponentit
Napit
Kaikki nappivariantit. Käytä .btn + varianttiluokka.
Koko: normaali (default)
Koot
Tilat
Kortit
Kolme korttivarianttia käyttötarkoituksen mukaan.
📦 Saksapaketti
2 599 €
sisältää kuljetuksen
Tarkastus · Rekisteröinti · Avaimet käteen
Yleisin valinta · Saksa 🇩🇪
✦ Suosituin
Ruotsi-paketti
Blocket + bytbil.com
Rekisterinumerohaku, kruunuhinta, lähes yhtä edullinen kuin Saksa.
Tunnusluvut
847
tuotua autoa
4,9★
keskiarvio
Lomakkeet
Syöttökentät, valinnat ja validointitilat.
Haetaan automaattisesti ilmoitukselta
Syötä numero
Badget & Tagit
Saksa Suosituin ✓ Tarkastettu Odottaa Peruttu AI-arvio Muu
Alertit
✅ Tilaus vahvistettu — tarkastaja lähetetty Stuttgartiin.
⚠️ Autovero-arvio on tekoälyn laskelma. Tarkista Traficom.
❌ API-avain virheellinen — kirjaudu uudelleen.
ℹ️ CO₂-arvo on AI:n arvio, koska ilmoituksessa ei ollut tarkkaa tietoa.
Taulukko
Auto Vuosi Km Hinta Tila
BMW 3-sarja 320d
München, DE		 2021 47 000 22 500 € Tarkastuksessa
VW Golf 1.5 TSI
Hamburg, DE		 2022 21 000 18 900 € Toimitettu
Audi A4 Avant 40 TDI
Stockholm, SE		 2020 63 000 26 800 € Tarjouksessa
Spacing (8px grid)
Kaikki välit 8 px:n kerrannaisina. CSS-muuttujat --space-1..12.
4px
--space-1
8px
--space-2
12px
--space-3
16px
--space-4
24px
--space-6
32px
--space-8
48px
--space-12
Mobiilibreakpointit
Mobile-first. CSS-mediat: max-width 480 / 768 / 1024 px.
Puhelin≤ 480px · .hide-sm
Tabletti≤ 768px · .hide-md
Pöytäkone≤ 1024px · .hide-lg
Leveämax-width: 1240px
Käyttöönotto uudelle sivulle
<!-- 1. Lisää <head>-tagiin -->
<link rel="stylesheet" href="/design-system.css">

<!-- 2. Käytä luokkia -->
<button class="btn btn-primary btn-lg">Laske tuontihinta</button>
<div class="card">...</div>
<span class="badge badge-success">Toimitettu</span>