The Foundry
System typography. Instrument Serif (Display) + Instrument Sans (Ui) + JetBrains Mono (Code).
Ig
Display Family
Instrument Serif
Regular Weight Only
UI Family
Aa Instrument Sans
Regular (400)
Medium (500)
Bold (700)
Code Family
JetBrains Mono
const x = true;
// Ligatures
=> != ===
// Ligatures
=> != ===
System Type Scale
| Level | Font Family | Size / Leading | Example |
|---|---|---|---|
| Display | Instrument Serif | 96px / 1.0 | The Horizon |
| Heading 1 | Instrument Serif | 60px / 1.1 | Section Title |
| Heading 2 | Instrument Serif | 48px / 1.2 | Component Block |
| Heading 3 | Instrument Serif | 36px / 1.3 | Card Header |
| Heading 4 | Instrument Serif | 24px / 1.4 | Subheading |
| Body Large | Instrument Sans | 18px / 1.6 | Lead paragraph text for introductions. |
| Body Base | Instrument Sans | 16px / 1.6 | Standard interface text and documentation body. |
| Caption | Instrument Sans | 12px / 1.5 | Metadata, timestamps, and labels. |
| Code / Data | JetBrains Mono | 12px / 1.5 | npm install garis-pola |
Display & Headings
Always Instrument Serif (Regular). Used for storytelling and hierarchy. Never bolded.
Interface
Always Instrument Sans. High legibility. Use Medium for interactive states, Regular for text.
Data & Code
Always JetBrains Mono. Used for technical values, coordinates, and code snippets.
Motion Lab
Spatial choreography. bezier(0.16, 1, 0.3, 1) for all entrance animations.
Opacity
0% -> 100% 0.8s
Filter
12px -> 0px Power3
Scale
0 -> 1 Elastic
Translate
Y: 20px Offset
Rotate
90deg EaseOut
Clip Path
GarisPola
Overflow Text
Signal
Ping Infinite
Skeleton
Loading...
Loading...
Loading...
Shimmer Linear
Sequence
Delay 100ms
Interface Elements
Atomic primitives. Radix UI accessible state management with GarisPola's signature curves.
Interaction States
Active
ring-2 slate-900
Disabled
opacity-50
Error
border-red-500
Font Family Inter
Actions
button.tsxStatus
badge.tsx Lift Root Grass Outline
Surface Elevation
Tailwind ShadowsElevated
shadow-lg
Bordered
border-slate-200
Flat
bg-slate-50