Styleguide

Colour

One set, it follows the theme: switch the theme in the header and the values below change.

• --bg-page#ecefef#0f0f0f
• --bg-card#ffffff#191919
• --bg-raised#ebf0f0#1e1e1e
• --bg-subtle#e6e6e6#282828
• --bg-glass#ffffffcc#191919cc
• --scrim-50#ffffff80#19191980
• --scrim-30#ffffff4d#1919194d
• --text-primary#191919#f5f5f5
• --text-90#191919e6#ffffffe6
• --text-80#191919cc#ffffffcc
• --text-secondary#191919b3#ffffffb3
• --line-8#19191914#e6e6e614
• --line-16#19191929#e6e6e629
• --line-24#1919193d#e6e6e63d
• --accent#ffb05c#ff9524
• --accent-fixed#ffab2b#ffab2b (inherits light)
• --effect-dot#ff7300#ff7300 (inherits light)
• --accent-30#ffb05c4d#ff95244d
• --accent-soft#ffb05c40#ff952433
• --shadow#0000002e#000000b3
• --focus-ring{text-primary}{text-primary}

Type, EN and RU

One family (Onest 400/500/600). One clamp() per style between 360 and 1200 px. Size on the right is the computed value at the current width.

Metrics use tabular numbers and a real minus:−80% · −30% · 1 234 567 · 0.15em(non-breaking: 30 %).

Radius, spacing, blur

• --space-22px
• --space-44px
• --space-88px
• --space-1212px
• --space-1616px
• --space-2020px
• --space-2424px
• --space-3232px
• --space-4040px
• --space-4848px
• --space-5656px
• --space-6464px
• --space-7272px
• --space-8080px
• --space-100100px
• --space-120120px
• --space-140140px

Motion tokens

Hover (or focus) a track. Springs are CSS linear() generated from Motion spring(). Disabled under prefers-reduced-motion.

• ease-hb-out · dur-baseCopy
• ease-hb-inout · dur-slowCopy
• spring-uiCopy
• spring-logoCopy
• spring-coverCopy
• spring-panelCopy
• spring-snapCopy
• spring-lightboxCopy

Shell components

Session 2. Hover, press and Tab through everything. Panel layout follows the viewport: ≥1200 column, 810–1199 wide, <810 one row.

PanelMe (home, EN)

Nikita Makarov

Sr. Product Designer · B2B/B2C SaaS

Designer and engineer: I build products from zero to launch

7+ years in B2B and B2C SaaS. I turn chaotic requirements into product logic, own the work from research to production-ready layouts, and drive revenue through self-serve upgrades.

Read CVBook a call(opens in a new tab)

PanelMe (about, RU)

Никита Макаров

Sr. Product Designer · B2B/B2C SaaS

Сёрфер и исследователь

Океан и путешествия научили меня адаптироваться и быть гибким. А бэкграунд в промышленном дизайне научил меня проектировать продукты через призму пользователя, и что во главе угла всегда стоят его проблемы и потребности.

Читать CVСозвониться(откроется в новой вкладке)

Surface, opacity and links

Every card is a frosted surface: bg-card at surface-alpha over blur-glass. Links rest at link-rest (64% in light, 50% in dark), 80% on hover, 100% pressed or current.

• --link-rest0.64Nav links, footer links, quiet links at rest, light theme.
• --link-rest-dark0.5The same in the dark theme (set by hand from link-rest).
• --link-hover0.8Hover of those links. Pressed and current are 1.
• --surface-alpha90%Share of bg-card / bg-raised / bg-subtle kept by a frosted surface (--surface, --surface-raised, --surface-subtle). 100% on coarse pointers.

Site components

Panel, nav, buttons and tags are in Shell components above. Hover, press and Tab through these.

Notes and works

Real components with real content. Figures open the page’s single lightbox (glass, caret arrows, swipe on touch).

// tokens follow the theme
export function token(name) {
  return `var(--${name})` ?? null;
}

PostFigure and PostTrio

Logo, layout, icons