Design System
The building blocks of Great Danish Designers. Colors, type, components and patterns in one place, so every page on the site speaks the same language.
01 / Foundations
Colors
Every color is a theme token. This page is shown on black, and the light and dark values are listed under each swatch. Click a swatch to copy its CSS variable.
Brand
Surfaces & text
Neutrals
02 / Foundations
Typography
An elegant italic serif for voice, a tight grotesk for reading, and a pixel mono for a wink of retro. Use the scale below rather than inventing new sizes.
Inter Tight
Body & interface / 100 to 900VT323
Navigation & labels / Regular 400Fira Mono
Code, tokens & data / 400 / 500 / 700Anton
Posters & big numbers / Regular 400Type scale
DisplayInstrument Serif Italic / 96 / 1.0
Great Danish Designers
Heading 1Instrument Serif Italic / 48 / 1.1
The best of the best
Heading 2Instrument Serif Italic / 32 / 1.2
Why I made the list
LeadInter Tight Regular / 32 / 40
A curated celebration of Danish design talent.
BodyInter Tight Regular / 18 / 1.6
Great Danish Designers is a hand-picked list of designers from Denmark, made to celebrate craft and help great people find great work.
SmallInter Tight Regular / 14 / 1.5
Submitted designers are reviewed before they appear on the list.
Nav labelVT323 / 26 / 1.0
List / Goals / Stories
Button labelVT323 Uppercase / 32 / 1.0
Submit designer
CodeFira Mono Regular / 14 / 1.5
color: var(--red); /* #FF1414 */
03 / Foundations
Spacing & shape
A 4px based rhythm keeps layouts calm. Corners stay soft: tight on tags, generous on panels, fully round on pills.
Spacing scale
4px
8px
12px
16px
24px
32px
48px
64px
128px
Corner radius
4 / Tag
8 / Menu item
12 / Button
24 / Panel
Pill
Elevation & focus
Flat
Popover
Focus ring
05 / Components
Form elements
Text fields and checkboxes share one look: a filled pill on the field surface, 24px radius and padding, a green tint when valid, a red outline when invalid and a green focus ring.
Text field / default, valid, invalid
Checkbox / default, checked, invalid
06 / Foundations
Iconography
Phosphor icons in the light weight, drawn on a 256 grid and filled with currentColor so they inherit text color. Use 20px in menus, 24px in buttons.
Icon set / viewBox 0 0 256 256
- list-search
- info
- article
- newspaper
- flag
- smiley
- dots-three
- plus
- arrow-right
07 / Brand
Brand elements
The little red flag mark, the waving Dannebrog and big counting numbers. Use them sparingly as moments of delight.
Logo lockup
Great Danish Designers
components/dk-flag / default + small
components/count-up
6,032,304
Animated numbers for stats and goals. Pair with Anton for poster impact.
08 / Patterns
Patterns
Larger compositions built from the pieces above: designer cards, promo blocks and FAQs. Shown with sample content.
components/designer-card
components/top-trumps
Freja Lund
- Strength:Marker drawing
- Kryptonite:Clients
- Fuel:Sarcasm and Red Bull
- Special ability:Free-hand drawing
components/promo-card
Open for submissions
42designers on the list
Sample contentKnow a great Danish designer?
Help us complete the list. Every submission is reviewed by hand before it goes live.
components/faq-section
Frequently asked questions
Designers who are Danish or based in Denmark and do great work.
Use the submit form. Every entry is reviewed before it goes live.