Design System · gravityjones.com
Gravity
Jones.
Palette
A monochrome color system with restrained use of accent. Black and white do 95% of the work. Color is a signal, not a style.
Chartreuse for action and attention (CTAs, hover states, active indicators). Lavender for classification (tags, categories). Never use both accent colors together in the same composition.
#1A1B1E
#707070
#C2C2C2
#F2F2F2
#FFFFFF
Accent · used sparingly
#D9EC37
#C5CBFF
On Dark Backgrounds
White on Black · 16.5:1 AAA
Chartreuse on Black · 11.3:1 AAA
Lavender on Black · 10.2:1 AAA
Never use chartreuse or lavender as text on white backgrounds. Both fail WCAG contrast.
Typography
Söhne by Klim Type Foundry for display and headings. Inter for body text. Typography is the interface.
Headlines are massive, architectural, unavoidable. Flush-left, ragged-right. Uppercase for all headings and labels. Extreme contrast between headline and body.
Display · 900
Revenue.
Hero · 800
Infrastructure.
H1 · 700
Section Headlines
H2 · 600
Sub-Section Heads
H3 · 600
Card Titles
Body Large · Inter 400
Lead paragraphs and introductory text. Used for the first paragraph of sections and editorial intros.
Body · Inter 400
Standard body copy for long-form content, descriptions, and supporting text.
Small · Inter 400
Captions, meta information, dates, bylines.
Overline · Söhne 600 · Uppercase · Tracked
Section Labels · Navigation · Prefixes
Söhne Weight Specimen
Extraleicht (200)
Leicht (300)
Buch (400)
Kräftig (500)
Halbfett (600)
Dreiviertelfett (700)
Fett (800)
Extrafett (900)
Extraleicht Kursiv
Leicht Kursiv
Buch Kursiv
Halbfett Kursiv
Dreiviertelfett Kursiv
Fett Kursiv
Extrafett Kursiv
Components
Buttons
No border-radius. No scale transforms. Color inversions only.
Cards
Card Title
Hover to invert. Background snaps to black, text to white.
Card Title
Arrow rotates on hover. Instant snap, no fade.
Tags
Stats
50+
Transformations
3x
Pipeline Growth
$12M
Sourced Pipeline
6
Certifications
Pull Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Certifications
Certified: Marketo · HubSpot · 6Sense · Salesforce · Pardot
Texture
CSS-based patterns add visual richness while maintaining flatness. No shadows, no 3D effects.
Depth comes from pattern, not shadow. A subtle noise texture sits on the body at all times like fine paper grain. Grid, dot matrix, and diagonal patterns are applied per-section on wash backgrounds.
Grid · 24px · 3%
Dot Matrix · 16px · 4%
Diagonal · 45deg · 2%
Structure
The grid is not hidden infrastructure. It's made tangible through thick borders and structural lines.
4px structural borders never thin out, even on mobile. Vertical dividers between grid columns make the structure visible. Every component sits within the grid with precision.
Structural · 4px · #1A1B1E
Section · 2px · #1A1B1E
Subtle · 1px · #C2C2C2
Layout
12-column grid. Asymmetric layouts. Flush-left, never centered.
8 Columns
Primary Content
4 Columns
Negative space
01.
Off-Center Content
Imagery
No stock photography. All imagery desaturated to greyscale. Non-competing with accent colors.
filter: grayscale(100%)
03. Case Studies
3.2x Pipeline
Growth
Greyscale image + dark overlay + white type. Non-competing.
Design System · v1.0
Swiss International Typographic Style. Söhne + Inter. A strong grid, sparse layout, and restrained use of color.