Mint Canvas
#b7ffb4Page background, card surfaces — the signature pastel that makes dark type appear sunlit rather than printed
NaN
nan.xyzWebsite preview
The design language
NaN runs its website like a working specimen sheet: the mint-green canvas is the page, and the page is the product. Massive custom display faces (200-336px) are the visual architecture; a monospaced sans (NaN Holo Mono) set in uppercase with 0.075em tracking is the chrome that holds everything together. The palette is ruthlessly tight — one pastel canvas, near-black text (#262626, never pure black), one bright lime accent (#00ff00) for raw typographic flourishes, and a single pink-purple-blue gradient for the lone chromatic CTA. Borders do the work that shadows usually do: 1-2px hairlines define cards, inputs, and the type tester frame with no elevation. The interaction model is a live font tester — sliders for size and leading, dropdowns for family and weight — letting visitors steer the display in real time, which makes the site function as both storefront and demo.
Color palette
brand
accent
Lime Spark
#00ff00Decorative typographic flourishes and SVG scribble overlays — a raw signal-green that contrasts the pastel canvas without warming it
Aurora Gradient
#ffa3b6Supporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color
neutral
Carbon Ink
#262626Primary text, borders, icon strokes, button outlines — softer than pure black, sits on mint without vibrating
Obsidian
#000000Display-type fills at the largest sizes, pure-black SVG fills for the heaviest display specimens
Fog
#999999Muted helper text, inactive borders, disabled controls — the quietest readable neutral on the mint canvas
Smoke
#767676Input field borders in resting state — darker than fog to signal interactivity without competing with the canvas
Bone
#efefefLight surface for elevated UI bits (button hover, inverted controls) — provides a near-white counterpoint when the canvas needs to recede
Paper
#ffffffInput field interior, pure-white text on dark inverted moments
Typography
Type scale
Minor Third (1.2) · 16px basedisplay-mega
336px · 400 · 0.8The quick brown fox jumps
display-xl
228px · 400 · 0.9The quick brown fox jumps
display-lg
216px · 400 · 0.85The quick brown fox jumps
display
86px · 700 · 1The quick brown fox jumps
display-sm
45px · 300 · 1.2 · 3.4px trackingThe quick brown fox jumps
heading
32px · 900 · 1.2The quick brown fox jumps
text-26
26px · 900 · 1The quick brown fox jumps
heading-sm
24px · 300 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
NaN Holo Mono
- Weights
- 300, 400, 500, 700, 800, 900
- Sizes
- 12, 13, 14, 16, 20, 24, 26, 32, 45px
- Line height
- 1.0–3.0
- Letter spacing
- 0.075em (≈1.2px at 16px, ≈3.4px at 45px)
- Fallback
- JetBrains Mono, IBM Plex Mono, Space Mono
- Features
- "dlig" 0, "liga" 0
All interface chrome — navigation, labels, buttons, form controls, metadata, keyboard hints. Set uppercase with +0.075em tracking, the letter-spacing is the signature that makes mono read as a deliberate UI system rather than terminal output. The weight range lets it flex from thin nav links to heavy button text without leaving the family.
Additional typeface
NaN Holo
- Weights
- 300, 400, 700
- Sizes
- 12, 16, 45, 86px
- Line height
- 1.2–1.5
- Fallback
- Inter, Söhne, Untitled Sans
- Features
- "dlig" 0, "liga" 0
Prose body and large secondary headlines that need to sit beside display specimens without competing. The 86px weight-300 size is a typographic statement — a humanist counterweight to the blocky display faces above it.
Additional typeface
NaN Archy On ExtraBlack
- Weights
- 400
- Sizes
- 228px
- Line height
- 0.90
- Fallback
- Druk, Compacta, Inter Black Compressed
- Features
- "dlig", "frac" 0, "onum" 0, "ss01" 0, "ss02" 0, "ss03" 0, "ss05" 0, "tnum" 0
Hero display headline — the signature specimen face, shown at its native 228px with tight 0.90 leading so the letterforms stack into a near-monolithic mass. This is the typeface the homepage exists to sell.
Additional typeface
NaN SuperX Sans Display Black
- Weights
- 400
- Sizes
- 216px
- Line height
- 0.85
- Fallback
- Druk Wide, Inter Black, Söhne Breit
- Features
- "dlig", "frac" 0, "onum" 0, "ss01" 0, "ss02" 0, "ss03" 0, "tnum" 0
Secondary display face — ultra-tight 0.85 leading creates a dense typographic slab, the contrast to Archy's rounded forms. Used in alternate hero rotations.
Additional typeface
NaN SuperX Serif Text Thin Italic
- Weights
- 400
- Sizes
- 216px
- Line height
- 1.00
- Fallback
- Tiempos Headline, Domaine Display, Canela
- Features
- "dlig" 0, "frac" 0, "onum" 0, "ss01" 0, "ss02" 0, "ss03" 0, "ss05" 0, "tnum" 0
Editorial italic display — the serif counterpoint that proves the practice spans humanist letterforms, not just geometric sans. Thin weight at 216px is a tension device: fragile strokes at monumental size.
Additional typeface
NaN Holo Gigawide Ultra1
- Weights
- 400
- Sizes
- 336px
- Line height
- 0.80
- Fallback
- Druk Condensed Super, Compacta Black
- Features
- "ss01" 0, "ss02" 0, "ss03" 0, "ss04" 0, "ss05" 0, "ss06" 0, "ss07" 0, "ss08" 0, "ss09" 0, "ss10" 0
Ultra-condensed display at 336px — the widest single-character scale on the site, used sparingly as a one-word exclamation.
Additional typeface
NaN Rage family (Zipp, Soft, Beau, Sans Narrow)
- Weights
- 400
- Sizes
- 86px
- Line height
- 1.00
- Fallback
- Recoleta, Pangram Sans, GT America
Card specimen headlines in the 'You Might Have Missed' grid — each card shows the family name rendered in that exact family at 86px, making the grid self-documenting.
Additional typeface
NaNRageZippNarrowThin
- Weights
- 400
- Sizes
- 86px
- Line height
- 1
NaNRageZippNarrowThin — detected in extracted data but not described by AI
Additional typeface
NaNRageSoftXCondensedRegular
- Weights
- 400
- Sizes
- 86px
- Line height
- 1
NaNRageSoftXCondensedRegular — detected in extracted data but not described by AI
Additional typeface
NaNRageBeauStandardSemibold
- Weights
- 400
- Sizes
- 86px
- Line height
- 1
NaNRageBeauStandardSemibold — detected in extracted data but not described by AI
Additional typeface
NaNRageSansNarrowMedium
- Weights
- 400
- Sizes
- 86px
- Line height
- 1
NaNRageSansNarrowMedium — detected in extracted data but not described by AI
Additional typeface
NaNSerfATextLightItalic
- Weights
- 400
- Sizes
- 86px
- Line height
- 1
NaNSerfATextLightItalic — detected in extracted data but not described by AI
Additional typeface
NaNSerfSansLightItalic
- Weights
- 400
- Sizes
- 86px
- Line height
- 1
NaNSerfSansLightItalic — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1440px
- Section gap
- 80px
- Card padding
- 20px
- Element gap
- 10px
Border radius
cards
18pxsmall
2pxinputs
2pxbuttons
29.4pxSpacing scale
1px2px3px5px6px8px10px12px13px14px16px20px24px29px32px40px48px49px50px60px80px120px121px171px218pxGuidelines
Do
- Set all interface text in NaN Holo Mono with 0.075em tracking — the monospace + tracking combo is what reads as 'NaN UI' versus generic mono
- Use #262626 for text and borders, never #000000 for UI chrome — pure black is reserved for the heaviest display specimens
- Let display specimens bleed to viewport edges without a max-width clamp; the type defines the lateral scale
- Use the aurora gradient button (29.4px radius) exactly once per page — the gradient is rationed because it's the only warm element
- Mark every new section with a hollow circle bullet (◉) in 14px NaN Holo Mono, followed by 60-80px vertical space
- Make specimen cards self-documenting: render the card's font name IN that font, not as a label
- Keep all elevation to 1-2px hairline borders in #262626 — never introduce drop shadows
Don’t
- Don't use #ffffff as a page surface — it kills the mint canvas identity
- Don't use #000000 for body text or UI borders — it fights the pastel canvas
- Don't set the Holo Mono tracking below 0.05em — the letter-spacing is what makes the mono read as deliberate UI
- Don't introduce additional accent colors — the palette is mint, lime, carbon, and the aurora gradient, nothing else
- Don't add drop shadows to cards or buttons — the site defines depth through borders and whitespace only
- Don't use a 4px or 8px radius on cards — the 18px card radius is the signature soft-corner language
- Don't wrap display specimens in centered containers; full-bleed is what makes the type feel architectural
Components
Top Navigation Bar
Primary site navigationSticky top bar on #b7ffb4 canvas. Left: 'NaN' wordmark in NaN Holo Mono 14px uppercase. Center: nav links (FONTS, COMMISSIONS, PROJECTS, TXT, SHOP, STUDIO) in NaN Holo Mono 14px uppercase, #262626, letter-spacing 0.075em, 32px gap. Right: CART (0), ACCOUNT, then a tri-color circle icon and a small 'NaN' dot. No background fill, no shadow — sits directly on canvas. Bottom edge: no border, sections define their own top spacing.
Hero Statement Block
Opening brand descriptionLeft-aligned paragraph in NaN Holo Mono 26px weight 400, #262626, line-height 2.25. Content fills roughly 75% of viewport width. No background, no border — the text IS the hero. A lime-green (#00ff00) SVG scribble overlays the right portion at ~40% opacity, drawing the eye past the text without blocking it.
Live Font Tester
Interactive type specimen controllerSectioned widget with four control rows stacked vertically on a #b7ffb4 canvas. Row 1: small section label (◉ Our Latest Font Release, NaN Holo Mono 14px #262626, 0.075em tracking). Row 2: Size slider (left-aligned label 'Size 220px', then NaN Holo Mono 12px, line-track 1px #262626 with 6px #262626 thumb) + Leading slider (right-side label 'Leading', identical track style) + two select dropdowns (NaN Holo Mono 13px, 1px #262626 border, 2px radius, no fill). Row 3: keyboard-shortcut chips (rounded squares, 1px #262626 border, NaN Holo Mono 12px) + a pear emoji. Row 4: a massive display specimen in the selected family at the selected size. No drop shadows — borders and whitespace define the frame.
Aurora CTA Button
Sole chromatic primary actionFilled pill button, 29.4px radius, horizontal aurora gradient (pink #ffa3b6 → violet #dda9ff → blue #a2d1ff → pink). Label in NaN Holo Mono 14px weight 500, #262626, uppercase, 0.075em tracking. Padding 14px 20px. Sits centered below the display specimen. One per page — this gradient is rationed because it is the only warm element in a cool palette.
Display Headline (Specimen)
Full-bleed type demonstrationMassive custom typeface rendered at 216-336px, weight 400, #000000 or #262626, line-height 0.80-0.90 depending on face. Text bleeds to both edges of the viewport (no max-width clamp) so the letterforms define the page's lateral scale. No background, no border — the type floats on the mint canvas.
Font Specimen Card
Library entry in the 'You Might Have Missed' gridThree-column grid on the mint canvas. Each card: 1px #262626 border, 18px radius, transparent fill (shows mint through). Interior padding 20px. The card's own family name is rendered IN that family at 86px, weight 400, #262626, line-height 1.0 — the card is its own specimen. Two-line stack: 'NaN' (smaller) above 'Rage Zipp' (larger). No shadow, no hover elevation — the 1px border does all the work.
Section Label
Subsection headingLeft-aligned '◉ Section Name' in NaN Holo Mono 14px weight 400, #262626, 0.075em tracking. The hollow circle (◉) is a recurring typographic bullet that marks every new section without using color or weight changes. Followed by generous vertical breathing space (60-80px) before the section content.
Select Dropdown
Form control within the font testerInline select element, NaN Holo Mono 13px, #262626, 1px #262626 border, 2px radius, transparent fill. No focus ring color change — interaction is communicated through a 1-2px border darkening to #000000 on hover/focus. Inline with text controls on a single row.
Range Slider
Numeric control for size/leadingNative range input styled as a 1px #262626 line track with a 6px square #262626 thumb. Label text in NaN Holo Mono 12px, #262626, sits above the track. No value tooltip — the display specimen updates in real time as the user drags, providing feedback.
Keyboard Hint Chip
Reveals power-user shortcutsSmall rounded-square button, ~20×20px, 1px #262626 border, 2px radius, NaN Holo Mono 11px #262626 label. Used to surface shortcuts (e.g. 'R', arrows, 'OT') adjacent to the font tester controls.
Surfaces & elevation
Level 0
Mint Canvas
#b7ffb4Page background and base surface for all sections
Level 1
Bone Lift
#efefefRare elevated surface for inverted or hover states where mint needs to recede
Level 2
Aurora CTA
#ffa3b6The sole gradient surface — the discover-more button
Layout & imagery
Layout
Full-bleed canvas with no global max-width clamp on display type. Top nav is a single horizontal row, sticky, with the wordmark left and utility links right. The hero is a left-aligned statement paragraph occupying ~75% viewport width, with no centered hero or split-screen image. Sections stack vertically with 60-80px gaps, each opened by a small mono-uppercase label. The 'You Might Have Missed' section is a 3-column card grid. The display specimens in the font tester span the full viewport width and bleed off the right edge intentionally. Density is sparse and editorial — the mint canvas breathes between sections, and the only dense moment is the font tester control row.
Imagery
Zero photography, zero illustration beyond the lime SVG scribble overlay. The site IS imagery: each custom typeface is photographed (rendered) at 200-336px and the resulting letterforms ARE the visual content. Product screenshots are absent because the product is the typography itself. The only non-typographic graphical element is a tri-color circle icon (likely a theme/palette swatch) in the nav and a pear emoji in the font tester — small, playful, and accepted as part of the studio's informal voice. Card specimens double as their own photography: the card titled 'Rage Zipp' is photographed by being typeset in Rage Zipp.
Design notes
Agent Guide
**Quick Color Reference** - Page background: #b7ffb4 (Mint Canvas) - Primary text & borders: #262626 (Carbon Ink) - Muted text & disabled borders: #999999 (Fog) - Decorative accent: #00ff00 (Lime Spark) - Inverted / elevated surface: #efefef (Bone) - primary action: #b7ffb4 (filled action) **Example Component Prompts** 1. *Hero statement*: full-width #b7ffb4 background, left-aligned paragraph in NaN Holo Mono 26px weight 400, #262626, line-height 2.25, letter-spacing 0.075em, occupying ~75% viewport width. Overlay a lime (#00ff00) SVG scribble at the right edge. 2. *Display specimen*: full-bleed headline in NaN Archy On ExtraBlack 228px, weight 400, #000000, line-height 0.90, bleeding past the right viewport edge. No background, no border, no max-width. 3. Create a Primary Action Button: #b7ffb4 background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 4. *Font specimen card*: 1px #262626 border, 18px radius, transparent fill (shows #b7ffb4 through), 20px padding. The card's own title rendered in its native family at 86px weight 400 #262626 line-height 1.0. Three-column grid. 5. *Section label*: left-aligned '◉ Section Name' in NaN Holo Mono 14px weight 400, #262626, 0.075em tracking, followed by 80px vertical space before content begins.
Type Tester Interaction Model
The font tester is a signature component: visitors drag Size (80-336px) and Leading (0.8-1.2) sliders and select a family + weight from dropdowns, and a live display specimen updates in real time. The interaction makes the site function as both a storefront and a working demo. When recreating, render the four control elements (size slider, leading slider, family dropdown, weight dropdown) on a single row above the specimen, with section labels in NaN Holo Mono 12px, all borders at 1px #262626, 2px radius, transparent fill. The specimen below should use the same color and padding rhythm as the hero display block. No toggle buttons, no modal — the tester is always visible and always live.
Similar brands
Pangram Pangram
Same type-foundry-as-website model where custom display faces at 100-200px ARE the page, with a minimal mono-uppercase nav wrapping the specimens
Klim Type Foundry
Same specimen-first architecture — large type specimens dominate the viewport, monospaced metadata labels, single-color canvas with no decorative imagery
OH no Type
Same bold-display-on-pastel-canvas approach and playful studio tone, with type specimens doubling as page composition
Future Fonts
Same experimental-foundry aesthetic — mint-toned canvas, uppercase mono nav, type families presented as cards with the family name set in its own face
Commercial Type
Same live font-tester pattern with sliders and dropdowns controlling a real-time display specimen, and 1px hairline borders defining all UI frames
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
