Design System — Maksym Rewko Portfolio

① Token Scope

Each layer inherits tokens from above and overrides only what it needs

site.css

→

All tokens: type, spacing, radius, easing, colours, dark mode

template-a/b/c.css

→

Overrides only: --radius: 10px · --max-w: 1440px · local --ease: 0.22s

projects/*.html

→

Loads site.css first, then template CSS — full token set + dark mode

floating-nav.css + contact-modal.css

→

Fully tokenised — all colours and inputs reference site.css vars

② Colour Tokens

Always use semantic tokens. Legacy aliases exist for backward compat only — do not use in new code.

Surfaces

--bg-page

#ffffff → dark: #0f1117

Page background — applied to body

--bg-surface

#f8f9fb → dark: #161926

Raised sections, hero bands, alt rows

--bg-surface-alt

#f5f7ff → dark: #161926

Blue-tinted surface — approach cards, highlights

--bg-card

#ffffff → dark: #1e2235

Card and modal backgrounds

Text

--text-heading

#0d1878 → dark: #dde1f5 (16.5:1)

h1–h5, section titles — deep navy brand colour

--text-body

#1c1c1c → dark: #c8ccd8 (8:1)

All body copy

--text-muted

#5a6278 → dark: #9aa0b4 (7.5:1)

Supporting text, descriptions, captions

--text-subtle

#888ea8 → dark: #7c839a (5.1:1)

Placeholders, timestamps, metadata

Accent

--accent

#0057D9 → dark: #6b9fff (7.8:1)

CTAs, links, highlights, interactive elements

--accent-dark

#004ab8 → dark: #5585ee

Hover / pressed state for accent elements

Borders

--border-card

#e8eaf0 → dark: rgba(255,255,255,0.10)

Card, panel, and component borders

--border-subtle

#e0e0e0 → dark: rgba(255,255,255,0.08)

Dividers, nav underlines, list separators

Chips, Forms & Status

--chip-bg / --chip-text

bg #f0f3ff · text #0d1878 → dark #252b42 · #b0b8d0

Skill tags, filter pills, tool chips

--input-bg / --input-border / --input-text / --input-focus-bg

bg #f7f7f7 · border #e0e0e0 · text #1c1c1c · focus-bg #ffffff

All form inputs and textareas

--status-success-* / --status-error-*

success: #15803d · error: #dc2626 (with bg + border pairs)

Form feedback, confirmation banners

③ Typography Scale

Montserrat for all display/UI text. Open Sans for reading. h1–h5 now have defined default sizes via the type scale — template-specific overrides are valid where layouts demand it.

h1 — Display / Page hero

Enterprise design leader

--text-3xl: clamp(32px, 5vw, 56px) · weight 800 · ls -0.02em · lh 1.1

h2 — Section title

What I bring to every engagement

--text-2xl: clamp(28px, 4vw, 44px) · weight 800 · ls -0.01em · lh 1.2

h3 — Section sub-heading

Research, Systems, Delivery

--text-xl: clamp(22px, 3vw, 32px) · weight 700 · lh 1.25

h4 — Card heading

Scaling a National Loyalty Platform to 16M Users

--text-lg: clamp(18px, 2vw, 22px) · weight 700 · lh 1.3

h5 — Small heading / label heading

Key Research Findings

--text-md: 16px · weight 600 · lh 1.4

Section label — .section-label utility class

Core Skills

12px · weight 700 · uppercase · ls 0.12em · --accent → .section-label

Body copy — Open Sans regular

My approach combines systems thinking with deep user research — building design systems that scale, shaping product strategy, and working closely with Engineering and Data to deliver outcomes that hold up.

--text-md: 16px (site) / --text-base: 15px (templates) · --text-body · lh 1.7

Supporting / muted — Open Sans regular

Reduced UX debt across an enterprise AI-powered fleet platform through paper cuts, IA restructuring, and shared design patterns.

13–14px · --text-muted · lh 1.7

④ Spacing, Radius & Easing

6-step spacing scale, 4-step radius scale, 4 named easing curves — all tokenised in site.css.

Spacing scale

--space-xs8pxChip gap, icon + label, fine gaps

--space-sm16pxCard gap, section label mb, grid gap

--space-md24pxCard padding, component inner spacing

--space-lg40pxSection sub-padding, grid gap (desktop)

--space-xl64pxSection padding, hero padding

--space-2xl80pxFull section padding (desktop top-level)

Radius scale — 4 steps only

6px

--radius-sm

buttons · focus

12px

--radius-md

cards · inputs · modals

20px

--radius-lg

large panels · canvas

full

--radius-full

pills · chips · nav dock

Templates set --radius: 10px — a value between sm and md used for their card components. Use var(--radius) inside template CSS, and --radius-sm/md/lg/full for all other contexts.

Easing — 4 named curves

0.22s

--ease: 0.22s ease

Base transition for all hover/colour/border changes — used everywhere

spring

--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1)

Card lift on hover, button pop, panel entry — slight overshoot

zoom

--ease-zoom: cubic-bezier(0, 0, 0.2, 1)

Image scale on hover — smooth deceleration to final size

decel

--ease-decel: cubic-bezier(0.4, 0, 0.2, 1)

Nav dock slide, panel show/hide — Material-style decelerate

⑤ Component Previews

All components consume design tokens. Toggle dark mode at the top — everything should respond.

Section label + title

Core Skills

What I bring to every engagement

Skill chips · --chip-bg / --chip-text

Figma Systems Thinking Accessibility Ethnography DesignOps WCAG

Buttons · --radius-sm · --accent

Stat card · --accent + --bg-card

Top 5%

Recognised performer at Geotab, 2024 & 2025

Mini project card · --radius-md

Product Design

Scaling a National Loyalty Platform

Transformed a fragmented loyalty ecosystem into a scalable national rewards platform.

Form inputs · --input-* tokens

Status states · --status-* tokens

✓ Message sent — I'll be in touch soon.

Something went wrong. Please try again.

⑥ Dark Mode

Triggered by html.fn-dark (floating-nav settings panel) or OS preference. All tokens have dark counterparts. WCAG AA on all text.

Product Design

Modernising a complex, legacy system

Reduced UX debt across an enterprise AI-powered fleet platform through platform paper cuts, IA restructuring, and shared design patterns.

Geotab · Lead Product Designer

Design Systems IA Restructuring WCAG Accessibility

WCAG AA contrast ratios (dark bg)

--text-heading 16.5:1

--text-body 8:1

--text-muted 7.5:1

--text-subtle 5.1:1

--accent 7.8:1

--status-success 11.4:1