Design System — Browser Start Page

01

Color Tokens

Semantic color system derived from macOS Human Interface Guidelines. All tokens are theme-aware — they resolve to different values in light and dark mode. Surface tokens use RGBA with intentional opacity for glassmorphism layering.

Surface tokens

Light Mode

surface-glass

rgba(255,255,255,.72)

surface-raised

rgba(255,255,255,.88)

surface-overlay

rgba(255,255,255,.96)

Dark Mode

surface-glass

rgba(30,30,32,.74)

surface-raised

rgba(38,38,42,.90)

surface-overlay

rgba(44,44,48,.97)

Text tokens

Light Mode

text-primary

#1d1d1f

text-secondary

#6e6e73

text-tertiary

#8e8e93

Dark Mode

text-primary

#f5f5f7

text-secondary

#8e8e93

text-tertiary

#636366

Accent & State tokens

Light Mode

accent

#0071e3

accent-hover

#0077ed

accent-subtle

rgba(0,113,227,.12)

danger

#e04040

overlay

rgba(0,0,0,.42)

Dark Mode

accent

#2997ff

accent-hover

#3aa0ff

accent-subtle

rgba(41,151,255,.16)

danger

#ff5353

overlay

rgba(0,0,0,.62)

02

Typography

Satoshi (primary) with Inter as fallback. Five fluid size tokens using clamp() — scales smoothly with viewport. Names reflect role, not size: display for the clock, body for main text, label for UI elements, caption for micro text.

--font-size-display

clamp(2rem, 1.2rem + 2.5vw, 3.5rem)
weight: light · tracking: tight
Clock time only

18:42

--font-size-body

clamp(1rem, .95rem + .25vw, 1.125rem)
weight: regular / semibold
Modal title · Search input · Body

Поиск в интернете... · Настройки

--font-size-body-sm

clamp(.875rem, .8rem + .35vw, 1rem)
weight: regular / medium
Clock date · Engine name · Save btn

Воскресенье, 18 апреля · Яндекс

--font-size-label

clamp(.75rem, .7rem + .25vw, .875rem)
weight: medium / semibold / bold
Pills · ЗАДАЧИ · Section labels · Todo items

Поиск: · ЗАДАЧИ · Тема · Обои macOS

--font-size-caption

clamp(.625rem, .58rem + .2vw, .75rem)
weight: medium / semibold
Todo notes · Tile labels · Badge · Micro

Добавить все компоненты · Chroma · 3

Font weights

Token	Value	Usage
--font-weight-light	300	Clock digits only
--font-weight-regular	400	Body text, clock date
--font-weight-medium	500	Pill labels, engine names, secondary buttons
--font-weight-semibold	600	Modal title, section labels, save button
--font-weight-bold	700	ЗАДАЧИ label, badge count

03

Spacing Scale

8-step scale on a 4px base unit. --space-6 (24px) is the primary page-level padding. --space-5 is used for card internal padding.

--space-10.25rem · 4px · micro gaps, pill dot margin

--space-20.5rem · 8px · pill gap, grid gap, todo item gap

--space-30.75rem · 12px · icon-to-input, pill padding-x

--space-41rem · 16px · engine option padding-x

--space-51.25rem · 20px · search card padding, modal-header mb

--space-61.5rem · 24px · modal padding, page edge

--space-82rem · 32px · page vertical padding

--space-123rem · 48px · large section gaps

04

Border Radius

Six steps from tight elements to full pill shape. Larger containers use --radius-xl; interactive controls use --radius-md; pills and avatars use --radius-full.

--radius-xs

4px · chips

--radius-sm

6px · checkboxes

--radius-md

10px · inputs, btns

--radius-lg

16px · cards, eng-opt

--radius-xl

24px · glass panels

--radius-full

9999px · pills

05

Shadows

Three elevation levels plus focus ring. Values are heavier in dark mode to compensate for reduced surface contrast.

sm

--shadow-sm

md

--shadow-md

lg

--shadow-lg

focus

--shadow-focus

Token	Light Value	Usage
--shadow-sm	0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05)	Corner buttons, todo toggle
--shadow-md	0 4px 16px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06)	Glass cards, search panel, todo panel
--shadow-lg	0 20px 60px rgba(0,0,0,.16), 0 4px 12px rgba(0,0,0,.08)	Modal dialogs
--shadow-focus	0 0 0 3px rgba(0,113,227,.28)	Focused inputs, active todo editor, hover checkbox

06

Motion

Two easing curves: ease-out for state transitions, ease-spring for scale animations with a bounce. Always respects prefers-reduced-motion.

--ease-out

cubic-bezier(.16, 1, .3, 1)
Standard transitions

--ease-spring

cubic-bezier(.34, 1.56, .64, 1)
Scale with overshoot

200

ms

--duration-fast

Hover, color, opacity

350

ms

--duration-normal

Panel open/close, modal

07

Components

All components rendered in both light and dark themes. Token names map directly to Figma variable groups.

Clock Widget

Time (font-size-display, weight light) and date (font-size-body-sm) over wallpaper. Always white with text-shadow for any background.

--font-size-display

--font-weight-light

--letter-spacing-tight

--font-size-body-sm

18:42

Воскресенье, 18 апреля

Search Card

Glass card with search input, engine icon, submit button, divider, and engine pill selector. max-width 580px.

--color-surface-glass

--backdrop-blur

--color-accent

--radius-xl

--shadow-md

--font-size-body (input)

--font-size-label (pills)

Light

Поиск:

Dark

Поиск:

Engine Pills

3 states: default, hover (border-medium), active (accent border + accent-subtle bg + dot).

--color-accent

--color-accent-subtle

--radius-full

--font-size-label

Light

Dark

Todo Widget

Floating glass panel. Items: default, done (strikethrough), editing (accent border + focus ring). Toggle button with badge count.

--color-surface-glass

--color-surface-raised

--color-accent

--radius-sm (checkbox)

--radius-md (items, input)

--radius-xl (panel)

--shadow-focus (editor)

--font-size-label (items)

--font-size-caption (note)

Light

Задачи

Обновить дизайн-систему
Добавить все компоненты в двух темах
Задача выполнена

Toggle

Dark

Задачи

Обновить дизайн-систему
Добавить все компоненты в двух темах
Задача выполнена

Toggle

Settings Widget

Settings button (gear icon, rotates on hover) triggers modal. Modal contains: theme segmented control, default engine radio group, custom wallpaper section, macOS preset section, save button.

--color-surface-overlay (modal)

--color-surface-raised (seg bg)

--color-surface-glass (btn)

--radius-xl (modal, btn)

--radius-lg (eng-opt, seg)

--radius-md (tiles)

--shadow-lg (modal)

--shadow-sm (btn)

--font-size-body (modal title)

--font-size-label (sections)

--font-size-body-sm (eng names, save btn)

Light

Button

Dark

Button

Inputs & Buttons

Todo input (height 32px), primary button, upload button. Focused state uses shadow-focus ring. Search input is larger (height 44px) inside the search card.

--color-surface-raised (input bg)

--color-border-subtle / medium

--shadow-focus

--radius-md (inputs, add-btn)

--radius-full (upload btn)

--radius-lg (save btn)

Light

Добавить

Dark

Добавить

08

Full Variables Reference

Complete list of all CSS custom properties. Categories map 1:1 to Figma variable groups for direct binding.

Variable	Light	Dark	Usage
Surfaces
--color-surface-glass	rgba(255,255,255,.72)	rgba(30,30,32,.74)	Main glass cards
--color-surface-raised	rgba(255,255,255,.88)	rgba(38,38,42,.90)	Inputs, elevated elements
--color-surface-overlay	rgba(255,255,255,.96)	rgba(44,44,48,.97)	Modal, dropdown
Borders
--color-border-subtle	rgba(0,0,0,.09)	rgba(255,255,255,.10)	Card borders, hover bg
--color-border-medium	rgba(0,0,0,.18)	rgba(255,255,255,.22)	Dividers, input borders
Text
--color-text-primary	#1d1d1f	#f5f5f7	Body, headings, input value
--color-text-secondary	#6e6e73	#8e8e93	Labels, captions, engine names
--color-text-tertiary	#8e8e93	#636366	Placeholders, hints, notes
--color-text-done	rgba(0,0,0,.32)	rgba(255,255,255,.28)	Completed task text
Accent
--color-accent	#0071e3	#2997ff	Primary CTA, checkbox, pill active, badge
--color-accent-hover	#0077ed	#3aa0ff	Hover on accent elements
--color-accent-subtle	rgba(0,113,227,.12)	rgba(41,151,255,.16)	Tinted bg: active pills, editor, upload
--color-accent-focus	rgba(0,113,227,.28)	rgba(41,151,255,.36)	Focus ring color
State
--color-danger	#e04040	#ff5353	Delete button hover
--color-danger-bg	rgba(220,50,50,.12)	rgba(255,60,60,.14)	Delete hover background
--color-overlay	rgba(0,0,0,.42)	rgba(0,0,0,.62)	Modal scrim
Shadows
--shadow-sm	0 1px 3px rgba(0,0,0,.08)…	0 1px 3px rgba(0,0,0,.30)	Corner buttons, todo toggle
--shadow-md	0 4px 16px rgba(0,0,0,.10)…	0 4px 16px rgba(0,0,0,.40)	Glass cards, panels
--shadow-lg	0 20px 60px rgba(0,0,0,.16)…	0 20px 60px rgba(0,0,0,.60)…	Modal dialogs
--shadow-focus	0 0 0 3px rgba(0,113,227,.28)	0 0 0 3px rgba(41,151,255,.36)	Focused inputs, active editor
Typography
--font-family	'Satoshi','Inter',-apple-system,sans-serif		All text
--font-size-display	clamp(2rem, 1.2rem + 2.5vw, 3.5rem)		Clock time
--font-size-body	clamp(1rem, .95rem + .25vw, 1.125rem)		Modal title, search input, body text
--font-size-body-sm	clamp(.875rem, .8rem + .35vw, 1rem)		Clock date, engine name, save btn
--font-size-label	clamp(.75rem, .7rem + .25vw, .875rem)		Pills, todo items, section labels
--font-size-caption	clamp(.625rem, .58rem + .2vw, .75rem)		Notes, tile labels, badge, micro
--font-weight-light	300		Clock digits
--font-weight-regular	400		Body, clock date
--font-weight-medium	500		Pill labels, engine names
--font-weight-semibold	600		Modal title, section labels, save btn
--font-weight-bold	700		ЗАДАЧИ label, badge count
Spacing
--space-1	0.25rem (4px)		Micro gaps
--space-2	0.5rem (8px)		Pill gap, grid gap
--space-3	0.75rem (12px)		Icon-to-input, pill padding-x
--space-4	1rem (16px)		Engine option padding-x
--space-5	1.25rem (20px)		Card padding, modal-hdr mb
--space-6	1.5rem (24px)		Modal padding, page edge
--space-8	2rem (32px)		Page vertical padding
--space-12	3rem (48px)		Section gaps
Border Radius
--radius-xs	0.25rem (4px)		Tight chips
--radius-sm	0.375rem (6px)		Checkboxes, editor action buttons
--radius-md	0.625rem (10px)		Inputs, buttons, tiles
--radius-lg	1rem (16px)		Cards, engine options, segmented control
--radius-xl	1.5rem (24px)		Glass panels, modals
--radius-full	9999px		Pills, badges, corner buttons
Motion
--ease-out	cubic-bezier(.16, 1, .3, 1)		Standard transitions
--ease-spring	cubic-bezier(.34, 1.56, .64, 1)		Scale with bounce
--duration-fast	200ms		Hover, color, opacity
--duration-normal	350ms		Panel, modal, background
--transition-fast	200ms ease-out		Fast transitions shorthand
--transition-normal	350ms ease-out		Normal transitions shorthand
--backdrop-blur	blur(24px) saturate(180%)		All glass elements