← OpenDesign CURATED · OPEN · FREE
Frere-Jones Type
A premium independent type foundry showcasing original typefaces through a stark, editorial design.
type foundry
01
Identity DNA
type design foundry custom typefaces retail fonts independent
A refined, old-world craft studio that prioritizes the clarity and beauty of letterforms.
02
Color
#87ADE0Accent
#000000Ink
#FFFFFFBG
#E6E6E6Muted
rgba(0,0,0,1)Line
High-contrast monochrome with a single, dusty blue accent for featured specimens.
03
Typography
transitional-serif · humanist-sans · monospaced
display 86px · 700h1 56px · 700body 16px · 400caption 12px · 400Use transitional serif for large display type to showcase font details · Use humanist sans for all functional UI and body copy
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Generous whitespace with a strict 4px baseline grid.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
1px solid black for subtle separators and buttons.
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Clean grid with distinct sections for hero, about, blog, and custom work.
07
Motion & Interaction
100ms micro
250ms small
500ms medium
cubic-bezier(0.25, 0.1, 0.25, 1) easing
Subtle crossfades between font specimens in the hero carousel
Subtle color change or underline appears on text links and buttons. · Immediate transition to the next state or page.
08
Components
button Simple text with underline or a black background with white text; no rounded corners. card Full-width sections or bold grid blocks for custom work, typically black with white text. chip Simple underlined text tags like 'Releases'. input Minimalist, borderless search bar. hero Massive, full-bleed typography specimens in black or blue, designed to showcase the font. 09
Voice & Don'ts
Tone Authoritative, refined, and understated. Headlines Short, direct, and often the name of the typeface itself. CTAs Quiet text links like 'More About Us' or 'Read Post →', rarely large buttons. Don't use rounded corners on buttons or cards — screenshot shows sharp, 90-degree angles. Don't use drop shadows on UI elements — screenshot shows completely flat surfaces. Don't use a wide, colorful palette — screenshot shows a strict black, white, and single accent palette. Don't use decorative sans-serifs for large displays — screenshot shows bold transitional serifs for specimens. Don't use heavy, chunky borders — screenshot shows very fine, 1px borders or none at all. Don't clutter the interface with icons — screenshot relies almost entirely on text and typography. Avoid: Avoid overly expressive or decorative elements Avoid: Avoid bright, neon, or clashing colors Avoid: Avoid rounded corners on primary UI elements 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
This is a premium, editorial-style independent type foundry website. It uses a strict high-contrast monochrome palette (black #000000 and white #FFFFFF) with a single, dusty blue accent (#87ADE0) used specifically for large font specimens. The typography features bold transitional serifs for display text and clean humanist sans-serifs for body copy and UI. The layout is spacious and grid-based, prioritizing the font specimens themselves as the primary visual focus. Key constraints: do not use rounded corners on UI elements; keep borders minimal (1px solid black); avoid drop shadows; and never use more than one accent color at a time. Maintain a highly refined, understated voice that lets the letterforms do the talking.
More from the library en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: This site is a masterclass in 'less is more' design, proving that a single, well-executed typeface can serve as the entire visual identity.
