Design systems, extracted.
Search curated design systems pulled from premium templates or create one from URL. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Birkform
Birkform is a quietly confident portfolio system for architecture studios and design practices that take their cues from Nordic restraint. The aesthetic centers on a stark black-and-white duality, broken only by a whisper of warm grey elevation, with oversized Inter Tight headlines that breathe across the page like cast concrete slabs. Everything in the system is in service of imagery: testimonial cards, project tiles, and full-bleed hero photographs are framed by generous whitespace and lowercase navigation labels that feel almost editorial. Type sets the rhythm — display sizes climb to 90px and beyond, while body copy stays grounded at a calm 20px, creating an architectural cadence between scale and silence.
Sections from Birkform
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Stats
View section
Hero with Background Image
View section
Logos
View section
Footer
View section
Projects Sticky
View section
Testimonial
View section
Hero with Logo Animation
View section
Navigation with Mega Menu
View section
FAQ
View section
Hero Image with Overlay
View section
Combo Image List
View section
Values Section with Numbered List
View section
Colors
Canvas
Gallery White
#ffffff
Primary canvas. Default page background, navbar fill, and reverse text on dark sections.
Stone Elevation
#f2f2f2
Lifted surface. Testimonial tiles, subtle card fills, and section dividers.
Ink
Ash Veil
#000000b8
Image overlay & figcaption ink. Tints hero photography for legible reverse text and softens captions.
Linen Haze
#cccccc
Tertiary text on dark. Social link defaults and quiet meta on the footer.
Graphite Mute
#171717
Secondary ink. Mega-menu links and subdued text on light backgrounds.
Midnight Basalt
#000000
Primary ink & dark surface. Headlines, body copy, footer fill, and primary button backgrounds.
Accent
Fog Line
#ffffff29
Hairline divider on dark. Footer top border and subtle dark-section separators.
Typography
The quick brown fox jumps
Universal typeface — headlines, body, navigation, captions. Carries the entire system at varying weights.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1600pxSection gap
120pxCard padding
52pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-24
24px--spacing-32
32px--spacing-40
40px--spacing-52
52px--spacing-64
64px--spacing-80
80px--spacing-120
120px--spacing-140
140px--spacing-160
160pxBorder radius
none0pxpill9999pxcards12pxsmall6pxmedium8pxSurfaces
Step from canvas (level 1) to lifted (level 2) to inset depth (level 3), then invert into the dark levels for full-bleed sections. Hex codes and roles live in the Colors section above; this ladder shows the layering only.
Level 1Gallery White
Level 2Stone Elevation
Level 3Midnight Basalt
Do's and don'ts
- Use Inter Tight for every text element — headings, body, navigation, and captions all share the same family.
- Set hero and section headings to display sizes (90px–140px) with tight -0.03em letter-spacing for the signature monumental feel.
- Frame hero imagery edge-to-edge with a 45% black overlay (#00000073) so reverse-out captions stay legible.
- Use lowercase for navigation links, CTA labels, and small meta text — uppercase is reserved for tracked-out 12px eyebrow labels.
- Apply 12px border-radius consistently to testimonial tiles, project images, and lifted cards; keep buttons at 6–8px.
- Pad sections at 120–160px top/bottom on desktop to honor the spacious editorial cadence.
- Reverse to a black background with white text for testimonial spotlights, CTA blocks, and the footer to create rhythm between light and dark.
- Don't introduce additional brand colors — the palette is strictly black, white, and a single warm grey elevation.
- Don't mix typefaces; resist pairing Inter Tight with a serif or display font.
- Don't use heavy weights above 600 — the system relies on 400/500/600 for its quiet, drafted feel.
- Don't apply drop shadows to cards or buttons; flat fills with subtle radius carry the elevation.
- Don't pack content tightly — never reduce section padding below 80px or strip the 24px container gutters.
- Don't use sentence-case or all-caps for nav and CTAs; lowercase is the brand voice for interactive labels.
- Don't crop hero photography to short banner heights — heroes should occupy near full-viewport height (100vh).
Example prompts
Studio landing page
Project case study
About / vision section
Product card (shop)
# Design System Guide
> Unlock the template to access the full design system.
## Brand voice
A short paragraph describing the brand voice, mood, and visual
principles that anchor the system. Tone, cadence, and intent.
## Colors
| Token | Hex | Role |
| ------------ | -------- | ------------------------------------- |
| canvas-1 | #xxxxxx | Page background, large surfaces |
| canvas-2 | #xxxxxx | Lifted surfaces, cards |
| canvas-3 | #xxxxxx | Inset wells, depressed states |
| ink-1 | #xxxxxx | Primary body text |
| ink-2 | #xxxxxx | Secondary text, labels |
| ink-3 | #xxxxxx | Tertiary text, hints |
| accent-1 | #xxxxxx | Primary brand accent |
| accent-2 | #xxxxxx | Secondary accent |
| state-ok | #xxxxxx | Success, confirmations |
| state-warn | #xxxxxx | Warnings |
| state-err | #xxxxxx | Errors, destructive actions |
## Typography
- **Display** — heading scale, used for hero text and section titles.
- **Body** — primary reading text, optimized for paragraphs.
- **Mono** — code, data, and tabular numerals.
```
display: 32px / 40px / 48px / 64px / 80px
body: 14px / 16px / 18px
mono: 12px / 14px
```
## Spacing & shape
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Radii: sm (4px), md (8px), lg (12px), xl (20px), full (9999px).
## Surfaces
Layered elevation from canvas → lifted → inset. Surfaces invert in
dark sections for full-bleed contrast.
## Do's and don'ts
- Do use accent-1 sparingly for primary CTAs only.
- Do maintain at least 4.5:1 contrast on body text.
- Don't mix display and body in the same line.
- Don't use state colors for branding.
## Agent prompt guide
Prompts for AI design tools that respect this system.
Includes example prompts for sections, components, and layouts.
# ...
Unlock the full style guide