Style Guide V1
PinRoot ConsultingColors
Deep Teal
Ocean Teal
Mist
Cloud
Charcoal
Paper
#f3eddf
Primary page background
Paper Deep
#e9dfcb
Warm section tint and CTA bands
Ink
#1d1e1b
Primary text, borders, and guide primary button
Sun
#ffcf32
Warm emphasis, highlights, and selective callouts
Violet
#9c5cf5
Secondary accent and style-guide outlines
Deep Teal
#007f7f
Brand accent, highlighted words, directional cues
Ocean Teal
#2e9ea0
Secondary accent, small UI details, soft emphasis
Mist
#d5e6e5
Pale blue-green surfaces, placeholder art, quiet blocks
Cloud
#e6ecee
Neutral blue-gray surfaces, logo placeholder, subtle fill
Charcoal
#242b33
Dark neutral surfaces and richer hover states
Viewports & Layout
Breakpoints
Base
none / 0px
Mobile-first defaults
Small
sm / 640px
Large phones and small tablets
Medium
md / 768px
Tablet and compact desktop navigation
Large
lg / 1024px
Laptop layouts
Extra Large
xl / 1280px
Desktop expansion begins
2XL
2xl / 1536px
Large desktop compositions
3XL
3xl / 1920px
Designed 1920px canvas
Gutters
Base
sm
lg
xl
3xl
Containers
Narrow
760pxText-heavy content
Content
1180pxConstrained editorial blocks
Default
1360pxNormal desktop sections
Wide
1600pxMain landing sections
Cinema
1760pxHero, header, and footer on 1920px screens
Typography
Display / H1
46 / 56 / 72 / 88px
Fraunces / 500 / Mobile, tablet, xl, 3xl; regular + italic
Display / H2
36 / 44 / 52px
Fraunces / 500 / Section headings with wide-screen steps
Display / H3
20px
Fraunces / 500 / Panel headings
Body
16-18px
Work Sans / 400 / Line height 1.6
Body Small
13-15px
Work Sans / 400 / Dense supporting copy
Eyebrow / Label
12px
Space Mono / 400 / Uppercase, 0.14em tracking
Caption / Meta
10.5-11px
Space Mono / 400 / Uppercase metadata
Heading 1
Heading 2
Heading 3
Body
Body
Body
Body
Buttons
Primary
Secondary
Text Link
Primary
Highest-emphasis action
Ink fill, paper text, Space Mono uppercase label
Secondary
Secondary action
Paper fill, ink border, Space Mono uppercase label
Text Link
Low-emphasis navigation
Underlined text treatment
Brand Elements
Headshot Placeholder
drawing headshot
drawing headshot
Paper
Primary page background and quiet component surface.
Paper Deep
Warmer CTA band and section contrast.
Mist
Pale support fill for placeholder art and secondary blocks.