Exar Design System · v1.0

Élő styleguide

Az Exar designnyelv böngészhető referenciája — minden *.exarlabs.com felület ezt a vizuális rendszert használja. Committed navy + meleg clay accent, Bricolage Grotesque + Hanken Grotesk, OKLCH.

← Vissza a katalógusba

Színek

A logó navy hordozza a felületeket (hero, footer sávok); a meleg clay az egyetlen accent (CTA-k, kiemelések). Tudatosan NEM navy+arany.

Navy — elsődleges brand

--navy-900
oklch(0.20 0.05 256)
--navy-800
oklch(0.26 0.07 256)
--navy-700
oklch(0.32 0.09 256)
A logó navy
--navy-600
oklch(0.40 0.10 256)
--navy-300
oklch(0.72 0.07 256)
--navy-100
oklch(0.94 0.025 256)

Clay — accent (CTA, kiemelés)

--clay-600
oklch(0.62 0.13 50)
--clay-500
oklch(0.71 0.135 56)
Elsődleges CTA
--clay-400
oklch(0.80 0.115 60)
--clay-100
oklch(0.95 0.03 66)

Neutrálisok (navy-felé hangolva)

--bg
oklch(0.987 0.004 250)
--surface
oklch(0.965 0.006 250)
--surface-2
oklch(0.935 0.009 250)
--ink
oklch(0.24 0.03 256)
--ink-muted
oklch(0.44 0.03 256)
--line
oklch(0.90 0.008 250)
--line-strong
oklch(0.83 0.012 250)

Státusz-zónák

--zone-green
oklch(0.74 0.14 155)
--zone-yellow
oklch(0.80 0.115 60)
--zone-red
oklch(0.70 0.16 28)

Tipográfia

Display: Bricolage Grotesque (címek, optical sizing). Szöveg: Hanken Grotesk. Alap méret 17px.

h1 · clamp 2.4–4rem

Rendezett szakember

h2 · clamp 1.75–2.6rem

Egy család, sok szoba

h3 · --text-xl

Komponensek és tokenek

h4 · --text-lg

Alcím szint

body · --text-base 17px

A törzsszöveg Hanken Grotesk, 1.6 sormagassággal, maximum 70 karakter széles sorokkal a kényelmes olvasásért.

small · --text-smKisebb, másodlagos szöveg — meta információ, lábjegyzet.

Komponensek

Gombok

Kártya

Kártya cím

Hajszálvékony keret, 16px radius, lágy navy-árnyalt árnyék. A katalógus és a microsite-ok közös affordanciája.

Második kártya

Szekciónként variáljuk a kártyakezelést — kerüljük az egyforma rács-monotóniát.

Űrlap-elemek

Link

Ez egy szövegközi link navy színnel és aláhúzással.

Spacing, radii, árnyékok, motion

Spacing (8px alap)

--space-1 · 0.25rem
--space-2 · 0.5rem
--space-3 · 1rem
--space-4 · 1.5rem
--space-5 · 2rem
--space-6 · 3rem
--space-7 · 4rem
--space-8 · 6rem

Radii

7px · sm 10px 16px · lg

Árnyékok (navy-árnyalt)

--shadow-sm --shadow --shadow-lg

Motion

--ease: cubic-bezier(0.16, 1, 0.3, 1) · --t: 180ms — csak ease-out, nincs bounce. Belépő fade-up csak a hero-n; minden más statikus. prefers-reduced-motion tiszteletben tartva.