Typography Specimen

TYPE
SYSTEM

A comprehensive look at the typographic architecture that defines the PRISM Studio visual identity.

Primary
Syne
Secondary
Space Grotesk
Display
Instrument Serif
Mono
JetBrains Mono

Our four pillars of typography

Syne
Display / Headings 7 Weights Geometric
Aa Bb Cc Dd
ABCDEFGHIJKLMNOPQRSTUVWXYZ

A geometric sans-serif with bold character. Used for headlines, display text, and brand marks. Its wide aperture and generous proportions give it an unmistakable presence.

Space Grotesk
Body / UI 5 Weights Tech-inspired
Aa Bb Cc Dd
ABCDEFGHIJKLMNOPQRSTUVWXYZ

A monospaced-inspired grotesque with technical charm. Primary typeface for body copy, interface elements, and long-form content with excellent readability.

Instrument Serif
Display / Accents 1 Weight Elegant Italic
Aa Bb Cc Dd
ABCDEFGHIJKLMNOPQRSTUVWXYZ

A condensed serif with editorial elegance. Used for pull quotes, accent text, and moments requiring refined personality and contrast.

JetBrains Mono
Mono / Labels 6 Weights Code-optimized
Aa Bb Cc Dd
ABCDEFGHIJKLMNOPQRSTUVWXYZ

A programmer's typeface with clean geometry. Deployed for labels, metadata, captions, and any element requiring monospaced precision.

Hierarchy system

96px
Display XL
72px
Display L
48px
Headline H1
36px
Headline H2
28px
Headline H3
22px
Subhead
18px
Body Large
16px
Body Default
14px
Body Small
12px
Caption / Label
10px
OVERLINE

Syne weight range

Regular 400
Aa Bb Cc
400
Medium 500
Aa Bb Cc
500
SemiBold 600
Aa Bb Cc
600
Bold 700
Aa Bb Cc
700
ExtraBold 800
Aa Bb Cc
800

Typography palette

Prim White
#F0F0F5
Headings / Primary
Muted Gray
#8888A0
Body / Secondary
Deep Gray
#55556A
Captions / Tertiary
Prism Purple
#A855F7
Primary Accent
Rose Pink
#F472B6
Gradient Stop B
Sky Blue
#38BDF8
Gradient Stop C

Display techniques

Gradient Fill
Gradient
Background-clip text with multi-stop linear gradient
Outline
Outline
Hollow letterforms with stroke-based rendering
Glow
Glow
Multi-layered text-shadow with radial falloff
Extended Kerning
KERN
Maximum letter-spacing for editorial presence
Stacked
Stacked Type
Vertical stacking with gradient accent line
Serif Contrast
Serif
Editorial italic for refined, sophisticated moments
Monospace
monospace
.mono()
Code-inspired for labels, metadata & precision
Stroke + Gradient
Stroke+
Gradient fill combined with subtle outline

Color palettes

Primary
Prism Core
135deg → #a855f7 → #f472b6 → #38bdf8
Deep
Deep Purple
135deg → #667eea → #764ba2
Rose
Rose Bloom
135deg → #f093fb → #f5576c
Cyan
Ocean Sky
135deg → #4facfe → #00f2fe
Emerald
Emerald Mist
135deg → #43e97b → #38f9d7
Warm
Sunset Glow
135deg → #fa709a → #fee140

Leading measure

1.0
Tight leading for display headlines and condensed text blocks.
1.3
Compact leading for tight layouts, cards, and dense content areas.
1.6
Standard body copy line height for optimal readability and comfort.
1.8
Open leading for editorial content, quotes, and spacious layouts.
2.0+
Ultra-spaced for decorative display, overlines, and typographic flourishes.

Tracking control

-3px
Tight Display
-1px
Tight Body
0
Default
+1px
Slight Open
+3px
Wide
+6px
Extended
+10px
Ultra Wide

60px baseline rhythm

1ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
2ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
3ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
4ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
5ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
6ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
7ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
8ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
9ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
10ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
11ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
12ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

12-column typographic grid

Span 12 — Full Width Display
Span 6 — Half Column Headline
Span 6 — Half Column Headline
Span 4 — Third Column Body
Span 4 — Third Column Body
Span 4 — Third Column Body
Span 3 — Quarter Grid
Span 3 — Quarter Grid
Span 3 — Quarter Grid
Span 3 — Quarter Grid
Ready to collaborate?

Let's build something beautiful together.

Start a Project →