CURATED · OPEN · FREE

Commercial Type

A premium type foundry specializing in historical roots and modern craftsmanship.

typefoundry

↓ Download design system (15 MB)Open in OpenDesign

Visit: https://commercialtype.com

📦 Browse pack contents →

Identity DNA

TypeFoundryLibrarySpecimen

A curated gallery of typography

Color

#FF4B6CAccent

#000000Ink

#00283BInk soft

#FFFFFFBG

#E4CAEFBG soft

#323232BG quiet

#47FF5BMuted

rgba(0,0,0,0.1)Line

High-contrast typography with bold, saturated section backgrounds.

Typography

transitional-serif · grotesque-sans · monospace

display199px · 400
heading21px · 400
body15px · 400

Hero text uses specific type families like Canela. · Text casing is strictly mixed case, with rare uppercase for specific labels. · Body text is set in Styrene UI.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

8px based rhythm for vertical spacing.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 0px

1px solid rgba(0,0,0,0.1)

rgba(0, 0, 0, 0.35) 2px 2px 7px 0px

Layout

1280container

3columns

24pxgutter

768 / 1024breakpoints

Full-width sections with horizontal grid-based card layouts.

Motion & Interaction

150msmicro

300mssmall

500msmedium

cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

Subtle background-color transitions on hover. · Opacity transitions for UI elements.

Subtle color shifts or background changes. · Instant response with no heavy animation.

Components

button Compact, bordered buttons with uppercase text for actions like 'View Cart'.
card Image and text cards separated by thin borders.
chip Simple text labels for style counts.
input Minimalist, bordered text fields.
hero Massive typographic specimens occupying full viewport height.

Voice & Don'ts

Tone Expert, minimal, and authoritative.
Headlines Bold, type-centric statements that let the font speak.
CTAs Understated and functional.

Don't use rounded corners — screenshot shows sharp, rectangular edges.
Don't use gradients — screenshot shows flat, solid background blocks.
Don't use drop shadows excessively — screenshot shows flat UI elements.
Don't use sans-serif for display — screenshot shows transitional-serif for headlines.
Don't use vibrant accent colors everywhere — screenshot uses them only for specific specimens.
Don't use heavy padding — screenshot shows tight, efficient spacing.
Avoid: Marketing fluff
Avoid: Overly decorative UI
Avoid: Complex animations
Avoid: Rounded corners
Avoid: Bright gradients

Inside the pack — real screenshots

Commercial Type — 桌面首屏（hero） — 桌面首屏（hero）

Commercial Type — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Commercial Type is a premium type foundry with a minimalist, typography-focused design. The layout uses large, bold specimens (transitional-serif like Canela) set against solid, high-contrast background blocks (#E4CAEF, #500000, #78FFF0). The UI is a clean, functional grid (Styrene UI) with sharp corners and no gradients. Key colors include deep purple (#480078), hot pink (#FF4B6C), and bright green (#47FF5B). Critical donts: never use rounded corners, avoid gradients, and ensure display text remains strictly serif-based. The overall feel is an editorial gallery of type.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko