Style guide for the website
The design system used by marcusolsson.dev.
Colors
The color system uses semantic tokens that adapt to light and dark themes. Use these CSS variables in your code.
Brand Colors
| Token | CSS Variable | Preview |
|---|---|---|
| Primary (Terracotta) | --color-accent-primary | |
| Secondary (Sage) | --color-accent-secondary | |
| Tertiary (Amber) | --color-accent-tertiary |
Surface Colors
| Token | CSS Variable | Preview |
|---|---|---|
| Base | --color-surface-base | |
| Elevated | --color-surface-elevated | |
| Subtle | --color-surface-subtle | |
| Accent Primary | --color-surface-accent-primary | |
| Success | --color-surface-success | |
| Warning | --color-surface-warning | |
| Danger | --color-surface-danger |
Text Colors
| Token | CSS Variable | Preview |
|---|---|---|
| Default | --color-text-default | |
| Muted | --color-text-muted | |
| Faint | --color-text-faint | |
| Accent Primary | --color-text-accent-primary | |
| Success | --color-text-success | |
| Warning | --color-text-warning | |
| Danger | --color-text-danger |
Border Colors
| Token | CSS Variable | Preview |
|---|---|---|
| Subtle | --color-border-subtle | |
| Default | --color-border-default | |
| Strong | --color-border-strong | |
| Accent Primary | --color-border-accent-primary |
Code Colors
| Token | CSS Variable | Preview |
|---|---|---|
| Background | --color-code-background | |
| Text | --color-code-text | |
| Comment | --color-code-comment | |
| String | --color-code-string | |
| Function | --color-code-function | |
| Number | --color-code-number | |
| Keyword | --color-code-keyword |
Typography
Atkinson Hyperlegible Next is a font that is accessible to a wide range of readers.
For larger text, Tiempos Text brings a beautiful identity.
| Preview | Role |
|---|---|
Tiempos Text | H1 |
Tiempos Text | H2 |
Tiempos Text | H3 |
Atkinson Hyperlegible Next | H4 |
Atkinson Hyperlegible Next | Body |
Atkinson Hyperlegible Mono | Code |
Buttons
Cards
Regular cards
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan condimentum dolor, eu faucibus massa placerat at. Morbi ac urna a risus vulputate tempus in quis metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan condimentum dolor, eu faucibus massa placerat at. Morbi ac urna a risus vulputate tempus in quis metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan condimentum dolor, eu faucibus massa placerat at. Morbi ac urna a risus vulputate tempus in quis metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan condimentum dolor, eu faucibus massa placerat at. Morbi ac urna a risus vulputate tempus in quis metus.
Outlined cards
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan condimentum dolor, eu faucibus massa placerat at. Morbi ac urna a risus vulputate tempus in quis metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan condimentum dolor, eu faucibus massa placerat at. Morbi ac urna a risus vulputate tempus in quis metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan condimentum dolor, eu faucibus massa placerat at. Morbi ac urna a risus vulputate tempus in quis metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan condimentum dolor, eu faucibus massa placerat at. Morbi ac urna a risus vulputate tempus in quis metus.