Krea
Home
Build a dark system that feels like a capable creative-tool marketplace rather than a minimal landing page. A dark creative-tool marketplace system built from black app chrome, rounded sidebar rails, massive action pills...
Open exampleTypography Systems
Browse DESIGN.md examples that emphasize typography systems, type scale, font pairing, and hierarchy as reusable implementation guidance.
178 curated examples24 per pagePage 5 of 8
What To Study
Compare how these systems define display type, body fonts, scale jumps, density, and readability rules instead of leaving typography as vague visual taste.
What To Compare
Focus on font roles, scale naming, line-height intent, responsive hierarchy, and whether the system makes typography easy for engineers and AI tools to apply consistently.
Design Analysis
Common typography systems signals
Build a dark system that feels like a capable creative-tool marketplace rather than a minimal landing page. A dark creative-tool marketplace system built from black app chrome, rounded sidebar rails, massive action pills... Build a dark system that feels exact...
Recurring System Signals
- Primary ( 1F2322): main text and dark action color.
- Secondary ( D7E0DB): calm technical backdrop.
- Tertiary ( EEDB3C): tiny observational signal.
- Display: very large, sparse, and low-drama.
- Body: concise, explanatory, and calm.
- Labels: minimal, mostly for navigation or tiny metadata.
Related Keywords
OverviewImage DirectionColorsTypographySecondary ( D7E0DB): calm technical backdropTertiary ( EEDB3C): tiny observational signalDisplay: very large, sparse, and low-dramaBody: concise, explanatory, and calmLabels: minimal, mostly for navigation or tiny metadataPrimary ( FF5A5F): the warm social signalTertiary ( B79CFF): soft lavender support accentDisplay: compact, strong, and highly legible
2026-02-01
Kiro
Home
Build a dark system that feels exacting, technical, and fast to trust. A dark developer system built from near-black shells, violet call-to-action energy, and terminal-first proof panels.
Open exampleHurdle
Home
Build a service-page system that feels calm, trustworthy, and founder-friendly. A minimal founder-support system built from white space, black capsule CTAs, soft gray cards, and calm product proof.
Open example
Continue Exploring
Use these adjacent facet and workflow pages to connect typography systems analysis with other structured design-system concerns across the site.
Hub
All DESIGN.md Examples
Return to the main DESIGN.md hub to scan the broader dataset and compare across multiple system concerns.
Related Hub
Design Topics
Branch into topic pages grouped by repeated visual signals when you want a broader inspiration lens beside this system-focused facet.
Adjacent Facet
Color Systems
Collections focused on palette logic, semantic tokens, contrast handling, and accent usage.
Adjacent Facet
Component Rules
Examples that document reusable components, states, variants, and interaction expectations.
Adjacent Facet
Layout Principles
Examples that describe spacing, grid, rhythm, hierarchy, and structural decision-making.
Workflow Collection
AI Design System Examples
DESIGN.md-style references, token-driven systems, and tools for AI-readable design workflows.
Workflow Collection
Figma AI References
References for Figma AI, Figma Make, MCP-assisted design workflows, and editable UI generation.
Typography Systems FAQ
What should I study on this page?
Compare how these systems define display type, body fonts, scale jumps, density, and readability rules instead of leaving typography as vague visual taste.
Why browse this as a dedicated DESIGN.md collection?
A focused collection makes it easier to compare how teams describe one system concern consistently across many examples instead of mixing unrelated signals on a single page.