background
- HEX
- #080808
- HSL
- 0 0% 3%
- OKLCH
- oklch(0.13 0 0)
Page background — near-black, never pure #000 to keep depth on OLED
THE SYSTEM BEHIND THE WORK
BRANDSYSTEM
Every component on this site reads from a single, typed token document. This page documents that document. The same JSON powers the live UI, downstream brand kits, and any third-party tool that needs to render in the studio's voice.
// 01
TYPE
display
Space Grotesk, sans-serif
The quick brown fox 0123
Display headings, numerals, kinetic type
sans
Space Grotesk, sans-serif
The quick brown fox 0123
Body copy
mono
JetBrains Mono, monospace
The quick brown fox 0123
Captions, // operator, technical labels, numbers in tabular contexts
SCALE
xs0.75rem · 12px// captions, tabular labels
sm0.875rem · 14pxSmall body, FAQ
base1rem · 16pxBody
lg1.125rem · 18pxLead paragraphs
xl1.25rem · 20pxSection intros
2xl1.5rem · 24pxCard titles
3xl1.875rem · 30pxSub-section heads
4xl2.25rem · 36pxSection heads
6xl3.75rem · 60pxPage heads (mobile)
9xl8rem · 128pxDisplay heads (desktop)
// 02
COLOR
foreground
- HEX
- #FAFAFA
- HSL
- 0 0% 98%
- OKLCH
- oklch(0.98 0 0)
Primary text on background
primary
- HEX
- #FF4D00
- HSL
- 16 100% 50%
- OKLCH
- oklch(0.66 0.22 38)
Electric Safety Orange — accents, links, callouts, the // operator
primaryFg
- HEX
- #000000
- HSL
- 0 0% 0%
- OKLCH
- oklch(0 0 0)
Text on orange primary surfaces
card
- HEX
- #0D0D0D
- HSL
- 0 0% 5%
- OKLCH
- oklch(0.16 0 0)
Cards and elevated surfaces
border
- HEX
- #1F1F1F
- HSL
- 0 0% 12%
- OKLCH
- oklch(0.25 0 0)
Dividers and outlines
muted
- HEX
- #1F1F1F
- HSL
- 0 0% 12%
- OKLCH
- oklch(0.25 0 0)
Muted surface
mutedFg
- HEX
- #999999
- HSL
- 0 0% 60%
- OKLCH
- oklch(0.64 0 0)
Secondary text
destructive
- HEX
- #EF4444
- HSL
- 0 84% 60%
- OKLCH
- oklch(0.64 0.22 25)
Errors and destructive actions
input
- HEX
- #1F1F1F
- HSL
- 0 0% 12%
- OKLCH
- oklch(0.25 0 0)
Input borders on dark surfaces
ring
- HEX
- #FF4D00
- HSL
- 16 100% 50%
- OKLCH
- oklch(0.66 0.22 38)
Keyboard focus ring
cardForeground
- HEX
- #FAFAFA
- HSL
- 0 0% 98%
- OKLCH
- oklch(0.98 0 0)
Text on cards
cardBorder
- HEX
- #1F1F1F
- HSL
- 0 0% 12%
- OKLCH
- oklch(0.25 0 0)
Card outlines
popover
- HEX
- #0D0D0D
- HSL
- 0 0% 5%
- OKLCH
- oklch(0.16 0 0)
Popover surface
popoverForeground
- HEX
- #FAFAFA
- HSL
- 0 0% 98%
- OKLCH
- oklch(0.98 0 0)
Text on popovers
popoverBorder
- HEX
- #1F1F1F
- HSL
- 0 0% 12%
- OKLCH
- oklch(0.25 0 0)
Popover outlines
primaryBorder
- HEX
- #FF4D00
- HSL
- 16 100% 50%
- OKLCH
- oklch(0.66 0.22 38)
Primary control outlines
secondary
- HEX
- #262626
- HSL
- 0 0% 15%
- OKLCH
- oklch(0.26 0 0)
Secondary surfaces
secondaryForeground
- HEX
- #FAFAFA
- HSL
- 0 0% 98%
- OKLCH
- oklch(0.98 0 0)
Text on secondary surfaces
secondaryBorder
- HEX
- #1F1F1F
- HSL
- 0 0% 12%
- OKLCH
- oklch(0.25 0 0)
Secondary outlines
mutedBorder
- HEX
- #1F1F1F
- HSL
- 0 0% 12%
- OKLCH
- oklch(0.25 0 0)
Muted surface outlines
accent
- HEX
- #FF4D00
- HSL
- 16 100% 50%
- OKLCH
- oklch(0.66 0.22 38)
Interactive accent
accentForeground
- HEX
- #000000
- HSL
- 0 0% 0%
- OKLCH
- oklch(0 0 0)
Text on orange accent surfaces
accentBorder
- HEX
- #FF4D00
- HSL
- 16 100% 50%
- OKLCH
- oklch(0.66 0.22 38)
Accent outlines
destructiveForeground
- HEX
- #FAFAFA
- HSL
- 0 0% 98%
- OKLCH
- oklch(0.98 0 0)
Text on destructive surfaces
destructiveBorder
- HEX
- #EF4444
- HSL
- 0 84% 60%
- OKLCH
- oklch(0.64 0.22 25)
Destructive outlines
// 03
MOTION
EASING CURVES — CLICK TO PLAY
DURATIONS
instant
120ms
fast
240ms
base
400ms
slow
900ms
epic
1400ms
ALL MOTION RESPECTS prefers-reduced-motion — DECORATIVE TWEENS COLLAPSE TO INSTANT
// 04
VOICE
TONE
Direct, technical, confident. No marketing fluff.
PERSON
First-person studio ("we") for engagements; third-person ("the studio") for credentials.
- →Lead with the outcome, not the process.
- →Numbers > adjectives.
- →Never end a CTA with a period.
- →Use sentence case in body. Use UPPERCASE in section labels and CTAs.
- →// is the operator — it begins technical labels and only technical labels.
// 05
THE // OPERATOR
//
Visual operator that marks technical metadata, section labels, and editorial annotation.
DO
- // SECTION LABEL
- // 01
- // CASE STUDY
- // FOR: BUYERS
DON'T
- // in body copy
- // inside CTAs
- // without UPPERCASE following it
// 06
LOGO
TAGDESIGNS
wordmark
Default — TAGDESIGNS one-line wordmark in display weight
TAG
DESIGNS
DESIGNS
stacked
TAG / DESIGNS — stacked split for narrow contexts
T/D
monogram
T/D monogram — favicons, social avatars, app icons
Ger'Quia Abner
signature
Ger'Quia Abner signature — credits, byline, about pages
CLEAR SPACE
Minimum clear space equals the cap-height of the wordmark on all sides.
MIN SIZE
24px monogram, 96px wordmark
TAG/DESIGNS