A curated gallery and marketplace for high-end typography, combining the prestige of a museum with the utility of a licensing platform.
02
Color
#F56900Accent
#000000Ink
#111111Ink soft
#FFFFFFBG
#777777Muted
rgba(218, 218, 218, 1)Line
Stark, high-contrast black and white foundation with a single vibrant orange accent to highlight the core message.
03
Typography
didone-serif · humanist-sans
display96px · 400
h124px · 400
body18px · 400
small14px · 400
Use Didone serif for large expressive display type to evoke classic editorial elegance. · Use Humanist sans-serif for all body copy, navigation, and UI elements for clean readability. · Maintain high contrast between display serif and sans-serif body text.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
A strict 4px baseline grid with generous vertical padding to maintain an airy, editorial feel.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Thin 1px solid borders in #DADADA or #CCCCCC, used strictly for subtle horizontal separation and card containment.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A wide single-column container with a max-width, featuring distinct horizontal sections separated by thin hairline borders.
07
Motion & Interaction
150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Color and background-color transitions on interactive elements. · Text-decoration-color transitions for links.
Subtle color changes on interactive elements, often transitioning to the accent orange or darkening text. · Immediate visual feedback, maintaining the clean and understated interaction model.
08
Components
buttonMinimal ghost or outline buttons with 1px solid borders, small text, and an arrow icon.
cardClean white cards with thin 1px borders, containing an icon, bold title, body text, and a ghost button.
chipMinimal tags or labels with subtle borders.
inputSimple text inputs with standard browser styling or subtle borders.
heroA massive, expressive serif headline in bright orange followed by a large sans-serif paragraph.
09
Voice & Don'ts
ToneConfident, authoritative, and refined. Speaks as an expert curator of high-end design tools.
HeadlinesDirect, impactful, and often utilizes large serif type for maximum visual weight.
CTAsSubtle, understated ghost buttons with simple text and an arrow, allowing the typography to lead.
Don't use drop shadows — the screenshot shows flat surfaces separated only by thin 1px borders.
Don't use rounded pill buttons for primary actions — the screenshot shows rectangular buttons with 4px radius.
Don't use sans-serif for the main hero headline — the screenshot shows a large Didone serif font.
Don't use a complex multi-color background — the screenshot shows a strictly white background.
Don't use heavy, bold weights for body text — the screenshot shows weight 400 for all standard text.
Don't use thick borders — the screenshot shows thin, subtle 1px borders in light gray.
Avoid: Avoid overly casual or conversational language.
Avoid: Avoid dense, cluttered layouts without clear horizontal separation.
Avoid: Avoid using sans-serif for large, expressive headlines.
Avoid: Avoid using rounded borders excessively; keep corners sharp or only slightly rounded.
Avoid: Avoid using drop shadows or heavy box shadows for depth.
Avoid: Avoid using bright, multi-color palettes; maintain the strict black-white-orange scheme.
Captured from the live site · real computed styles
11
System prompt
Type Network is a premium, curated marketplace for typography, acting as a liaison between world-class foundries and global enterprises. The visual system is defined by a high-contrast black and white base with a single vibrant orange (#F56900) accent. It combines a refined Didone-serif for expressive display headings with a clean humanist-sans for body copy. Key critical donts include: do not use drop shadows or complex gradients; do not use thick borders or heavy drop caps; do not use sans-serif for large display headlines. The layout relies on clean horizontal separation and generous whitespace to maintain an authoritative, editorial feel.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
