Styleguide – Viarent

Színek

Token	Érték	Minta
`--color-primary`	`#1f2937`
`--color-primary-hover`	`#111827`
`--color-on-primary`	`#ffffff`
`--color-background`	`#ffffff`
`--color-surface`	`#f3f4f6`
`--color-surface-raised`	`#ffffff`
`--color-text`	`#111827`
`--color-text-muted`	`#4b5563`
`--color-border`	`#d1d5db`
`--color-focus`	`#2563eb`
`--color-highlight`	`#fef3c7`
`--color-overlay`	`rgb(17 24 39 / 0.5)`

Tipográfia

Token	Érték	Minta
`--font-family-base`	`'Gotham', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif`	Aa – Szöveg minta
`--font-family-heading`	`var(--font-family-base)`	Aa – Szöveg minta
`--font-family-mono`	`ui-monospace, 'SF Mono', Menlo, Consolas, monospace`	Aa – Szöveg minta
`--font-weight-light`	`300`	Aa – Szöveg minta
`--font-weight-regular`	`400`	Aa – Szöveg minta
`--font-weight-medium`	`500`	Aa – Szöveg minta
`--font-weight-bold`	`700`	Aa – Szöveg minta
`--font-size-sm`	`0.875rem`	Aa – Szöveg minta
`--font-size-base`	`1rem`	Aa – Szöveg minta
`--font-size-lg`	`clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem)`	Aa – Szöveg minta
`--font-size-h3`	`clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)`	Aa – Szöveg minta
`--font-size-h2`	`clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem)`	Aa – Szöveg minta
`--font-size-h1`	`clamp(2rem, 1.5rem + 2.5vw, 3.75rem)`	Aa – Szöveg minta
`--line-height-base`	`1.6`
`--line-height-heading`	`1.2`

Harmadik szintű címsor

Negyedik szintű címsor

Lead bekezdés: nagyobb, halványabb szöveg a cím alatt.

Alap bekezdés. Lorem ipsum dolor sit amet, egy szövegen belüli link, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Halvány (muted) szöveg: kiegészítő információhoz.

Monospace kódminta

A címsorok (h1–h4) elemre vannak stílusozva, a szerkesztői tartalom elemei a minta cikken láthatók.

Térköz

Token	Érték	Minta
`--space-2xs`	`0.25rem`
`--space-xs`	`0.5rem`
`--space-sm`	`0.75rem`
`--space-md`	`1rem`
`--space-lg`	`1.5rem`
`--space-xl`	`2rem`
`--space-2xl`	`3rem`
`--space-3xl`	`4.5rem`
`--section-padding`	`clamp(var(--space-2xl), 2rem + 4vw, 6rem)`

Forma és mozgás

Token	Érték	Minta
`--border-width`	`1px`
`--radius-sm`	`0.25rem`
`--radius-md`	`0.5rem`
`--radius-lg`	`1rem`
`--shadow-sm`	`0 1px 2px rgb(17 24 39 / 0.08)`
`--shadow-md`	`0 8px 24px rgb(17 24 39 / 0.12)`

Token	Érték	Minta
`--duration-fast`	`120ms`
`--duration-base`	`200ms`
`--easing`	`cubic-bezier(0.2, 0, 0, 1)`
`--transition-base`	`var(--duration-base) var(--easing)`

Token	Érték	Minta
`--focus-ring`	`3px solid var(--color-focus)`
`--focus-offset`	`2px`

Elrendezés

Token	Érték	Minta
`--container-width`	`75rem`
`--container-width-narrow`	`45rem`
`--container-width-wide`	`90rem`
`--gutter`	`clamp(var(--space-md), 0.5rem + 2.5vw, var(--space-2xl))`
`--grid-gap`	`var(--space-lg)`
`--header-height`	`4rem`
`--header-height-compact`	`3.25rem`
`--logo-height`	`2.75rem`
`--icon-size-md`	`1.5rem`
`--icon-size-lg`	`2.5rem`