TypeGallery Design System

TypeGallery Design System mockup preview
Click to expand

TypeGallery is a typography-forward, editorial, and refined design system built for graphic designer and typographer portfolios. Type hierarchy is the primary design element -- every layout decision serves the letterforms. The system uses warm cream surfaces, deep brown and rust tones, and flat, shadowless surfaces so that nothing competes with the typography. Layouts draw from specimen sheets and editorial print design with generous leading, deliberate column rhythm, and sharp geometric edges.

Color Primary#3C1518
Color Secondary#F5F0E8
Color Tertiary#A44A3F
Color Success#3D7A4A
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

text-heroEB Garamond · 80px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-h1EB Garamond · 56px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-h2EB Garamond · 36px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-h3EB Garamond · 24px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-body-lgManrope · 18px · Light

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-bodyManrope · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-captionManrope · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-monoJetBrains Mono · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 12px

TypeGallery is a typography-forward, editorial, and refined design system built for graphic designer and typographer portfolios. Type hierarchy is the primary design element -- every layout decision serves the letterforms. The system uses warm cream surfaces, deep brown and rust tones, and flat, shadowless surfaces so that nothing competes with the typography. Layouts draw from specimen sheets and editorial print design with generous leading, deliberate column rhythm, and sharp geometric edges.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

DefaultSelectedHoverPublishedDraftFeaturedArchived

List

Default

Checkboxes

Unchecked

Checked

Disabled

Radio Buttons

Unselected

Selected

Disabled

Tooltips

Default

Do's & Don'ts

Do

treat type hierarchy as the primary design element -- scale, weight, and spacing should carry the entire visual structure.
use generous leading (1.75x on body text) to create an open, editorial reading rhythm.
establish column rhythm using a consistent baseline grid; all text blocks should align across columns.
design specimen-style layouts for showcasing type work: large glyph displays, character sets, and weight ramps.
use the warm cream background consistently -- pure white should only appear on raised card surfaces.

Don't

introduce decorative elements that compete with letterforms. No gradients, patterns, or ornamental graphics.
use more than two typefaces in a single layout. The serif/sans pairing is deliberate; adding a third breaks coherence.
use rounded corners or drop shadows anywhere. The sharp, flat aesthetic reflects print precision.
set body text smaller than 16px. Readability and typographic craft must be evident at every scale.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.4 KB
Downloads 0
creative elegant minimal portfolio warm

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/typegallery-design-system and implement it in my code

Don't have the MCP? Install it here