Case Study
Design System by Madison Lincez
A personal design system built on my brand palette and a single typeface, Montserrat. It documents the tokens, type scale, and component states behind this portfolio. Small, consistent, easy to evolve.
01 Tokens
The palette is the brand: warm cream as the canvas, two sages for interaction and emphasis, charcoal and ink for text. Every colour is a CSS custom property, so the dark theme is the same five tokens inverted. No new colours, no special cases.
02 Typography
Montserrat alone covers display, heading, body, and caption roles. The scale is deliberately narrow, four steps, so hierarchy comes from weight and tracking rather than size jumps.
Systems over screens
Tokens before components
A small palette, used consistently, does more than a large one used loosely.
FIG 01: PALETTE TOKENS
03 Components
Each state is documented live, not mocked. Use the theme toggle in the sidebar: every specimen below shows both themes in real time, driven entirely by the tokens above.
04 Process
- 01
Palette first
Five brand colours, no more. Every surface, line, and state derives from cream, sage, charcoal, and ink before a single component is drawn.
- 02
One typeface, many voices
Montserrat carries the whole system. Weight, size, tracking, and case create hierarchy, never a second family.
- 03
Motion with restraint
Transitions stay under 300ms and ease-out. Movement confirms an action; it never decorates one.
- 04
Accessible by default
Reduced motion is honoured globally, focus states are visible on every interactive element, and both themes keep contrast intact.