The Topographic S
Primary — Light Background
Inverse — Dark Background
Construction
5 concentric S-curves representing topographic contour lines. Each layer uses a strata color from the palette, moving from sage (outer) to rust (inner core).
Clear Space
Maintain minimum clear space equal to the width of the outermost contour line on all sides. The logo should never feel crowded.
Minimum Size
32px for digital, 12mm for print. Below this, the inner contour lines become illegible. Use the simplified 3-line version for smaller applications.
Logo Lockup Animation
The signature animation sequence: S draws itself over 4 seconds, settles from 1.3x to 1x scale, then the wordmark reveals left-to-right. Used on homepage hero load.
S Draws
5 contour paths animate via stroke-dashoffset, staggered 0.1s → 1.3s delay
Logo Settles
Scale transitions from 1.3x to 1x over 0.8s
Wordmark Reveals
Container opens over 1.4s, text slides in at 4.3s
Content Fades In
Subtitle, form, scroll indicator transition to visible
Terra Palette
Light Mode
Dark Mode
Clay
#C2A995
Background
Ink
#3A322B
Primary text
Rust
#8B3B23
Accent
Sage
#8D9282
Strata 1
Olive
#857A60
Strata 2
Loam
#765B45
Strata 3
Terra
#75422F
Strata 4
Muted Text
rgba(58,50,43,0.5)
Body text, secondary
Faint Border
rgba(58,50,43,0.15)
Dividers, card borders
Card Fill
rgba(255,255,255,0.06)
Elevated surfaces
Shadow
rgba(58,50,43,0.08)
Box shadows, depth
Typography
Fraunces
Display / HeadingsSurfaced.
Surfaced.
The quick brown fox jumps over the lazy dog. When customers ask AI for recommendations, you don't exist.
Variable axes: Weight (100-900), WONK (0-1), opsz (9-144)
WONK mode: font-variation-settings: "WONK" 1, "opsz" 144
Usage: All headings, hero text, wordmark, score numbers, pull quotes
JetBrains Mono
Body / LabelsABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()
The quick brown fox jumps over the lazy dog. Free. No signup required. Results in 30 seconds.
Weight: 400 (regular) for body, 700 for emphasis
Usage: Body text, labels, buttons, navigation, form inputs, metadata
Size scale: 0.68rem (tiny) → 0.75rem (labels) → 0.88rem (body) → 1rem (large)
Type Scale
UI Components
Buttons
Zero border-radius. All square edges. Primary buttons hover to rust.
Form Inputs
Cards
Default Card
Faint border, no fill
Elevated Card
Ink border, fill, offset shadow
Labels & Badges
Usage Rules
Always
- —Zero border-radius on everything
- —Fraunces for headings, JetBrains Mono for body
- —Terra palette — no grays, no blues
- —Square edges, offset shadows for depth
- —Uppercase labels with wide letter-spacing
Never
- ✕Rounded corners or pill shapes
- ✕Inter, Arial, Roboto, or system fonts
- ✕Purple gradients or blue accents
- ✕Drop shadows or glows
- ✕Emoji in the UI