hs108 Design System
A living reference for brand assets, tokens, type, and components. Designed to stay sharp, stay honest.
What this is
This site documents the visual and technical language of hs108 Design Studio — the rules, defaults, and exceptions that make our work coherent across projects.
It covers three areas:
| Area | What it documents |
|---|---|
| Design Tokens | Color scales, semantic mappings, spacing, and layout values |
| Typography | Font families, type scale, and when to use each |
| Components | Button, tag, card, and navigation patterns with live code |
System principles
Brutalist by default. Hard edges, 2px borders, zero border-radius. Decoration earns its place.
Token-first. Every color, size, and space is a CSS custom property. Nothing is hardcoded.
Two accent colors. Blue (--blue-500) for primary navigation and data. Vermilion (--vermilion-500) for highlight, action, and emphasis.
Fluid type. All type scale steps use clamp() — they scale continuously with viewport width.
Quick reference
| Token | Value | Usage |
|---|---|---|
#2186EB | Primary brand accent — links, focus rings, active states | |
#F03A17 | Action / highlight — copy buttons, sidebar active, callouts | |
Instrument Serif | Large headings, zine titles, hero text | |
Geist | Body copy, labels, UI text | |
Geist Mono | Code, token names, navigation labels | |
clamp(15px, 1.1vw, 18px) | Default paragraph text size | |
clamp(14px, 2vw, 28px) | Gap between grid items and stacked elements | |
2px | Standard border weight throughout the system |
How to use this
- Copy token names by clicking the ⎘ icon in any token table.
- Live previews on component pages show rendered output alongside copyable HTML.
- Typography specimens render at their actual fluid sizes — resize the browser to see the scale in action.
