Flare Orange
#d33c03Label tags, collection names, editorial annotations — a saturated vermilion that reads as the foundry's signature mark on light backgrounds
Klim
klim.co.nzWebsite preview
The design language
Klim Type Foundry presents its library as a typographic gallery: each typeface gets its own full-bleed band, set in itself, with no ornament. The site alternates between a matte black gallery mode and a pale studio-gray mode, letting the letterforms carry all the visual weight. UI chrome is reduced to a thin black header strip and small orange label tags; everything else is type. The accent system is deliberately loud — vivid orange-red, electric blue, mint teal — used as tiny color punches against an otherwise neutral monochrome canvas.
Color palette
brand
Signal Red
#e90702Hot accent on dark surfaces, inline highlights, the reddest red in the palette for maximum voltage
Electric Blue
#24a7f2Interactive highlights, active states, link emphasis — a bright cyan-blue that pops against black
accent
Mint Pulse
#93ffe6Decorative text accent, special-occasion highlights — a pale mint used sparingly for emphasis
Canary
#ffff79Rare chromatic accent, used for the highest-attention text moment on dark backgrounds
Blush
#ffe6d9Soft warm accent, subtle text tint — a cream-pink that warms dark sections without competing with type
neutral
Studio Charcoal
#101c19Page canvas, primary background — a near-black with a green undertone that reads as neutral but feels warmer than pure black
Gallery Black
#000000Feature bands, specimen backgrounds, header bar — pure black for maximum type contrast
Charcoal Surface
#1c1c1cElevated surface, input fields, secondary panel backgrounds — one step lighter than the canvas
Slate Mist
#3c585fMuted accent band, tertiary surface — desaturated blue-gray used as an alternate section background
Graphite
#555555Mid-tone borders, muted body text on light sections, card outlines
Steel
#646464Secondary borders, subdued link text on dark backgrounds
Fog
#7f7f7fTertiary borders, inactive UI elements, secondary text
Ash
#939393Medium-contrast borders, control outlines, and structural separators. Do not promote it to the primary CTA color
Marble
#f9f9f9Light-mode page canvas, pale gray that photographs cleanly for specimen presentations
Bone
#ffffffPrimary text on dark backgrounds, type specimen letterforms, button labels, high-contrast surfaces
Typography
Type scale
display
56px · 1.1The quick brown fox jumps
heading
36px · 700 · 1.19The quick brown fox jumps
heading-sm
24px · 1.3The quick brown fox jumps
subheading
18px · 1.4The quick brown fox jumps
body
16px · 400 · 1.5The quick brown fox jumps
body-sm
14px · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
SOEHNE
- Weights
- 400, 700
- Sizes
- 16px, 36px
- Line height
- 0.98, 1.19, 1.2, 1.33, 1.5
- Features
- "ordn"; "tnum"
SOEHNE — detected in extracted data but not described by AI
Additional typeface
Söhne
- Weights
- 400, 700
- Line height
- 1.19, 1.20, 1.33, 1.50
- Fallback
- Inter, Söhne (Klim's own)
- Features
- "ordn" on, "tnum" on
Primary UI typeface — used for navigation, body text, buttons, form labels, and all functional interface text. Tight line-heights (0.98–1.20) at display sizes; generous (1.50) for body. Two weights only: regular for content, bold for emphasis. Tabular numerals via tnum for price alignment; ordinals via ordn.
Additional typeface
Söhne Ikon
- Weights
- 400
- Line height
- 1.20, 1.33, 1.50
- Fallback
- Söhne (Klim's own)
- Features
- "tnum" on, "calt" on
Iconographic variant of Söhne for interface glyphs, special characters, and numeric UI elements. Same voice as Söhne but with alternate character forms via calt and tabular figures via tnum.
Additional typeface
SOEHNE_IKON
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.2, 1.33, 1.5
- Features
- "tnum"; "calt"
SOEHNE_IKON — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1440px
- Section gap
- 69px
- Card padding
- 20px
- Element gap
- 10px
Border radius
tags
2pxcards
0pximages
0pxinputs
2pxbuttons
2pxSpacing scale
2px4px5px7px8px10px20px30px34px69px137pxGuidelines
Do
- Set all primary UI text in Söhne 16px/400 with Söhne 700 for emphasis only
- Use Flare Orange (#d33c03) for label tags, collection names, and editorial annotations — this is the foundry's signature mark
- Alternate specimen band backgrounds between #000000, #1c1c1c, #3c585f, and #f9f9f9 to create rhythm without dividers
- Use 2px border-radius on all interactive elements (buttons, tags, inputs) — this near-sharp corner is the system's geometric signature
- Set type specimens in the typeface they represent at 36px+ — the font IS the content
- Enable tnum and ordn font features on all Söhne usage for consistent number and ordinal rendering
- Maintain tight spacing: 8px component padding, 10px element gaps, 20px horizontal page padding
Don’t
- Do not introduce drop shadows, gradients, or glow effects — the system is flat and shadowless
- Do not use border-radius greater than 2px — the design is intentionally near-sharp
- Do not use color on large background fills — chromatic colors are reserved for tiny label tags and text accents
- Do not set body or display type in colors other than Bone (#ffffff on dark) or Graphite (#555555 on light) — chromatic type is for special emphasis only
- Do not add visible section dividers or whitespace gaps larger than ~69px between bands — the background color shift IS the divider
- Do not use system fonts for UI text — Söhne is the voice of the interface
- Do not place more than one chromatic color in a single component — each color punch gets its own moment
Components
Top Bar
Primary site navigationFull-width black bar (#000000), fixed/sticky, 8px vertical padding, 20px horizontal padding. Left-aligned: brand name 'Klim Type Foundry' in white Söhne 16px regular, then 'Fonts' as a 16px Söhne link in Flare Orange (#d33c03). Right-aligned: hamburger menu icon in white. No drop shadow, no border — the bar sits as a pure black strip.
Label Tag
Collection or edition annotationInline rectangular tag with Flare Orange (#d33c03) background, white Söhne 16px text, 2px border-radius, 8px horizontal and 4–5px vertical padding. Used to label specimen collections (e.g. 'Die Grotesk', 'American Grotesk Collection'). Positioned bottom-left of the image it annotates.
Typeface Specimen Band
Full-width type showcase row in the font catalogueFull-bleed horizontal band, one per typeface family. Alternates between Gallery Black (#000000), Charcoal Surface (#1c1c1c), Slate Mist (#3c585f), and Marble (#f9f9f9). Contains three zones: (1) family name set in the typeface itself at 36px+ in Bone (#ffffff on dark bands) or Graphite (#555555 on light bands), left-aligned with ~20px left padding; (2) variant list in Söhne 16px regular, center-aligned, listing sub-styles (e.g. 'Founders Grotesk', 'Founders Grotesk Condensed'); (3) 'Buy' links in Söhne 16px, right-aligned, in Fog (#7f7f7f) on dark or Graphite on light. No card chrome, no borders between zones — the three columns float in the band.
Specimen Variant Row
Individual sub-style entry within a typeface bandSingle line of Söhne 16px text listing one variant name (e.g. 'Founders Grotesk Condensed'). Text color matches the band's text tier: Bone on dark, Graphite on light. 7px row-gap between variant entries. No bullet, no chevron — pure text.
Buy Link
Purchase action for a typeface variantSöhne 16px, right-aligned in the specimen band. Text color: Fog (#7f7f7f) on dark bands, Graphite (#555555) on light. No background fill, no border, no padding — the word 'Buy' alone, set as text. Hover state brightens to Bone or Electric Blue.
Image Specimen
Full-bleed type-in-context or object photographyEdge-to-edge image with no border-radius (0px), no frame, no caption. Fills the full viewport width. May be paired with a Label Tag in the bottom-left corner. Images sit on the page canvas (Marble for light sections, Gallery Black for dark sections) with no gutter.
Hamburger Menu Trigger
Mobile and desktop menu toggleThree short horizontal lines in Bone (#ffffff), 2px thick, right-aligned in the Top Bar. No background, no border. Touch target approximately 24×24px.
Input Field
Form input for search or filterCharcoal Surface (#1c1c1c) background, Graphite (#555555) 1px border, 2px border-radius, 8px horizontal padding, Söhne 16px text in Bone. No visible focus ring color specified — likely defaults to Electric Blue or a 1px border darken.
Text Link
Inline hyperlink within body or navigation contentSöhne 16px, no underline by default. Color varies by context: Flare Orange (#d33c03) for primary nav links, Electric Blue (#24a7f2), Signal Red (#e90702), Mint Pulse (#93ffe6), or Canary (#ffff79) for inline links on dark backgrounds. Ash (#939393) 1px border may appear on interactive containers.
Section Divider
Horizontal rule between specimen bandsImplicit — specimen bands stack directly with no visible divider. The color change of the background itself creates separation. No border, no line, no whitespace gap greater than the band padding.
Collection Annotation
Editorial label overlaid on specimen imageryIdentical visual treatment to the Label Tag — Flare Orange (#d33c03) background, white Söhne text, 2px radius, small padding. Anchored to bottom-left of the image it describes. Functions as a caption that can be clicked to enter a collection.
Surfaces & elevation
Level 1
Gallery Black
#000000Feature band, specimen background
Level 2
Studio Charcoal
#101c19Primary page canvas, page background
Level 3
Charcoal Surface
#1c1c1cElevated panel, input field
Level 4
Slate Mist
#3c585fAlternate band background
Level 5
Marble
#f9f9f9Light-mode page canvas
The system is deliberately flat: zero drop shadows, zero glow, zero gradient. Elevation is communicated entirely through background-color stacking (canvas → charcoal surface → elevated panel) and through the alternating band backgrounds. This is a poster-gallery approach where type and imagery carry all dimensional weight, not UI chrome.
Layout & imagery
Layout
Full-bleed page model with no max-width container. The Top Bar spans the full viewport width. Below it, sections alternate between full-viewport image specimens and stacked specimen bands. The fonts catalogue uses a three-column structure within each band: family name left-aligned, variant list centered, Buy links right-aligned — no gutters, no card chrome. Vertical rhythm is driven by ~69px section gaps between type families. The page reads as a vertical exhibition: one artwork or typeface per band, stacked without interruption.
Imagery
Full-bleed object photography and editorial imagery serve as type-in-context specimens: industrial objects (crates), surreal material studies (bacon flag), and typographic compositions. Images fill the viewport edge-to-edge with zero border-radius and no framing. Color treatment is natural and unstylized — the objects speak for themselves against a pure black or pale-gray studio background. No illustrations, no icons beyond the hamburger glyph, no decorative graphics. The images function as both content and atmosphere.
Design notes
Agent Guide
**Quick Color Reference** - text (on dark): #ffffff - text (on light): #555555 - background (dark mode): #101c19 - background (light mode): #f9f9f9 - border / outline: #939393 - accent / label tag: #d33c03 - primary action: no distinct CTA color **Example Component Prompts** 1. **Label Tag**: Flare Orange (#d33c03) background, white Söhne 16px/400 text, 2px border-radius, 8px horizontal padding, 4px vertical padding. Place bottom-left of an image. 2. **Specimen Band (dark)**: Full-width, Gallery Black (#000000) background, 20px horizontal padding, 20px vertical padding. Left: family name in the typeface itself, 36px, Bone (#ffffff). Center: variant list in Söhne 16px, Bone. Right: 'Buy' text in Söhne 16px, Fog (#7f7f7f). 3. **Specimen Band (light)**: Full-width, Marble (#f9f9f9) background. Left: family name in the typeface itself, 36px, Graphite (#555555). Center: variants in Söhne 16px, Graphite. Right: 'Buy' in Söhne 16px, Graphite. 4. **Top Bar**: Full-width, Gallery Black (#000000), 8px vertical padding, 20px horizontal. Left: 'Klim Type Foundry' in Söhne 16px/400 white, then 'Fonts' in Söhne 16px/400 Flare Orange. Right: hamburger in white. 5. **Inline Link on Dark**: Söhne 16px/400, Electric Blue (#24a7f2), no underline, no background. Used for interactive text within specimen descriptions.
Specimen Band Color Rotation
The specimen list cycles through four background states in a repeating rhythm: Gallery Black (#000000) → Charcoal Surface (#1c1c1c) → Slate Mist (#3c585f) → Marble (#f9f9f9). Text color inverts with background: Bone (#ffffff) on all dark bands, Graphite (#555555) on the Marble band. This rotation is the page's primary navigation device — the viewer tracks position by band color rather than by section headers.
Similar brands
Commercial Type
Same full-bleed specimen-band layout with type-as-content philosophy and minimal black header chrome
Grilli Type
Type-foundry presentation style: large display type, black/white alternation, photographic specimens with minimal overlay
Dinamo (abcdinamo.com)
Editorial type showcase with alternating dark/light bands and near-zero border-radius geometry
Production Type
Type catalogue structured as stacked horizontal bands, each typeface given its own colored strip
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
