A high-end design atelier and editorial showcase for typefaces
02
Color
#4DAFFFAccent
#333333Ink
#86888BInk soft
#232323BG
#F5F5F5BG soft
#A5A7A9Muted
rgba(134, 136, 139, 0.2)Line
High contrast between dark interfaces and light content areas, using a bright blue as a functional accent for links and UI elements.
03
Typography
transitional-serif · humanist-sans · monospace
display56px · 400
heading21px · 400
body15px · 400
caption10px · 400
Use transitional-serif for display and headline typography to evoke editorial elegance · Use humanist-sans for body text and UI elements for readability and modern feel · Maintain tight letter-spacing on display text for a refined, crafted appearance
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent 4px base with generous padding in content areas to create breathing room for typography
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Minimal use of borders; relies on background contrast and spacing for separation
rgba(255, 255, 255, 0.15) 0px 1px 0px 0px
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Grid-based layout with large visual areas for typography specimens and clear content hierarchy
07
Motion & Interaction
150msmicro
200mssmall
500msmedium
cubic-bezier(0.12, 0.91, 0.65, 1)easing
Smooth fill transitions on interactive elements · Color transitions on hover states · Opacity fades for content reveals
Subtle color changes and fill transitions on interactive elements · Immediate response with smooth transition feedback
08
Components
buttonMinimal styling, primarily text-based with subtle hover transitions
cardFull-bleed image blocks with overlaid text or clean separation between visual and content areas
chipNot prominently featured; interface relies on clean navigation links
inputMinimal underline-only input fields with subtle placeholder text
heroLarge typography specimens filling the viewport with bold visual impact
09
Voice & Don'ts
ToneKnowledgeable, refined, and editorial; speaks with authority about typography and design
HeadlinesBold, confident statements that showcase typographic specimens and design philosophy
CTAsUnderstated and elegant; invites exploration rather than aggressive conversion
Don't use rounded corners on content blocks — screenshot shows sharp, clean edges on all containers
Don't add drop shadows to cards or content areas — screenshot shows flat, borderless design
Don't use bold weights for body text — screenshot shows consistent 400 weight throughout
Don't clutter the interface with decorative elements — screenshot shows restraint with ample white space
Don't use sans-serif for display headlines — screenshot shows transitional-serif for prominent typography
Don't apply heavy borders to separate sections — screenshot relies on background color contrast instead
Captured from the live site · real computed styles
11
System prompt
Hoefler&Co (typography.com) is a premium type foundry presenting typefaces through editorial storytelling and elegant specimen displays. The design features a dark interface (#232323) with light content areas (#F5F5F5), using transitional-serif for display typography and humanist-sans for body text. A bright blue accent (#4DAFFF) provides functional highlights for links and UI elements. The layout emphasizes large typography specimens with generous spacing and minimal decorative elements. Key constraints: maintain sharp corners on all containers, avoid drop shadows, keep body text at 400 weight, and ensure ample breathing room between content blocks. The voice should be knowledgeable and refined, speaking with authority about typography while avoiding casual language or aggressive sales messaging.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
