Design system
The foundations and components behind samivuori.com. Figma is the source of truth for visuals; the code mirrors its variables as CSS tokens. Every value on these pages is read from the code, so the docs can't drift from the site.
How it's built
- Astro 4, plain
.astrocomponents, no UI or CSS framework. - Tokens: custom properties in
src/styles/tokens.css, then type classes intypography.css, then base styles inglobal.css. Component styles are scoped<style>blocks. - Figma: file "Portfolio Figma Design version", spacing, colour, radius and type from the library "Sami Vuori — Design System", plus a local Layout collection for the grid.
- Font: Cosmic (variable, self-hosted). These docs are set in Inter so the system's own type stands out.
Principles
No hard-coding
Every spacing, size, colour, gutter, breakpoint and motion value is a token. Components only
reference var(--…). The exceptions are illustration geometry (percent insets
inside drawings like the device or project visual) and 1px hairlines via
--border-width-thin.
Breakpoints live only in tokens.css
Responsive behaviour is expressed by redefining tokens in the breakpoint blocks
(390 · 640 · 744 · 1024 · 1440 · 1920): column spans, display values, sizes,
directions. Components contain no media queries of their own, apart from
(hover: hover).
Use the near Figma variable
When a Figma value is a raw number close to an existing variable, the code uses the variable (and the difference is flagged), so the system stays small.
One accent in context
The site accent is orange. An article takes its customer's brand colour instead:
ArticleLayout sets --color-accent and the band gradient for everything
inside it. See Colour.
Content in one place
Contact details, CV and LinkedIn URLs, the status line and footer text live in
src/data/site.ts, never duplicated in pages.
Legacy, not part of the system
Still on the site, kept working until they're rebuilt; don't use them for new work.
CaseStudyLayoutwith.prosestyles:/work/plin,/work/earlier(hidden for now)./workindex page styles (hard-coded values).Metrics: the older key-figure row, only on/work/trial(hidden for now). Use Key figures.