Internal reference
Style Guide
Live inventory of every color, type size, radius, and component pattern in use across lightdrop.com. Inconsistencies are flagged in orange — these are things to reconcile.
Colors
Dark
#0D0D0D
blackdrop
Tailwind token · bg-blackdrop · CSS var · all dark sections, service pages, homepage
Light / cream
#FFFBF7
whitelight / beige
Tailwind tokens bg-whitelight + bg-beige · primary light background site-wide
#F5F0E8
cream-alt
Inline · service page alternate sections (thesis, numbered items, FAQ bg) — subtle step down for visual separation
Accent / brand orange
#FC5D3B
accent
Tailwind token · bg-accent · CSS var --colors--accent · all buttons, dots, borders, eyebrows
#E35435
accent-hover
Tailwind token · accent-hover · ~10% darker · hover states
#FF8562
accent-light
Tailwind token · accent-light · tints, glows
Text & UI
#9f9f9f
muted
Tailwind token · secondary labels, timestamps
#1A8040
success green
Sitemap 'live' indicator only
#7a7770
warm-grey (service)
Inline · section labels, descriptions on light bg pages
#3d3b37
body-dark (service)
Inline · body paragraphs on light bg pages
Typography
Fonts in use
Space Grotesk
300 400 500 600 700
Primary — headings, body, UI text. Default sans.
Space Mono
400 700
Labels, eyebrows, buttons, tags. Always uppercase + tracked.
Space Grotesk (display)
300–700
font-display token — now same as font-sans. Used on hero H1, service titles, decorative text.
Display / Hero — Tailwind scale (Space Grotesk)
display-xl · clamp(3rem, 8vw, 7rem) · -0.02em · lh 1.0 · Space Grotesk (was Marsden S)
Lightdrop
Homepage hero H1
Heading scale — Tailwind (Space Grotesk)
display-lg · clamp(2.5rem, 6vw, 5rem) · tracking -0.02em · lh 1.1
We build the tool.
Service page H1 (via Tailwind scale)
display-md · clamp(2rem, 4vw, 3.5rem) · tracking -0.01em · lh 1.1
Most agencies run campaigns.
Section H2s (via Tailwind scale)
display-sm · clamp(1.5rem, 3vw, 2.5rem) · tracking -0.01em · lh 1.2
Geographic Booking Tool
Sub-section headings
Service page headings — inline clamp (Space Grotesk, bold)
These live as inline styles in service/methodology pages — not on the Tailwind scale. Consider migrating.
inline · clamp(52px, 7.2vw, 92px) · w700 · tracking -0.035em · lh 1.0
We build the tool.
ServiceHero H1
inline · clamp(28px, 3.2vw, 44px) · w700 · tracking -0.03em · lh 1.15
Most agencies run campaigns.
ServiceThesis H2
inline · clamp(32px, 4vw, 56px) · w700 · tracking -0.03em · lh 1.1
Tell us what isn't fitting.
ServiceCTABand H2
inline · clamp(26px, 3vw, 38px) · w700 · tracking -0.025em · lh 1.2
Questions buyers ask
ServiceFAQLight H2
Body & UI text
body-lg
The quick brown fox — 1.25rem / lh 1.6 — Section intros, hero subheads
body
The quick brown fox — 1rem / lh 1.6 — Default body copy
body-sm
The quick brown fox — 0.875rem / lh 1.5 — Captions, meta text
Eyebrow / label style (Space Mono)
Custom Marketing Tooling
11px · w600 · tracking 0.14em · with 20px rule · service pages
Sitemap
10px · w500 · tracking-widest · internal pages
11–12px · w600 · tracking 0.12em · section labels
Buttons & CTAs
Multiple button patterns exist. Listed together for reconciliation.
btn-primary (Tailwind component)
bg-accent · rounded-full · px-6 py-3 · hover:bg-accent-hover + gap animation
btn-secondary (Tailwind component)
border border-whitelight/20 · rounded-full · hover:bg-whitelight/10
.button--main (globals.css)
border border-whitelight/20 · border-radius: 100px · 13px · hover: accent border + tint
Service page CTA (inline style)
background: #FC5D3B · rounded-full · px-7 py-4 · text-sm w600
ServiceCTABand variant · px-8 py-4 · 15px
⚠ Three separate button sizes for the same action — consider a single CTA component with size prop
Corner Radius
Full-pill values are inconsistent across the codebase.
9999px
rounded-full
btn-primary, btn-secondary (Tailwind)
999px
999px inline
Stack chips, service page CTAs
⚠ Same intent as rounded-full — reconcile
200px
200px (.growth-study-eyebrow)
Case study eyebrow pill
⚠ Same intent as rounded-full — reconcile
100px
100px (.button--main)
.button--main in globals.css
⚠ Same intent as rounded-full — reconcile
16px
16px
Case study images (mobile), Clutch cards
12px
12px
sitemap card, case images (desktop scroll)
8px
8px
Service page outcome panels, review cards
0px
0
Stats grid, testimonial cards
Pills & Chips
Same concept, multiple implementations.
Stack chips — service pages (inline style, light bg)
11px w500 · bg #DDD8CC · color #3d3b37 · radius 999 · tracking 0.04em
Clutch service chip — reviews page (.clutch-card__service)
Space Mono · 10px uppercase · border accent/30 · radius 999px · color accent
Growth story eyebrow (.growth-study-eyebrow)
Growth Story: PixieLaneSpace Grotesk · 12px w600 · border accent · radius 200px (⚠ inconsistent with others)
Sitemap anchor tag
↗ homepageMono · 10px · border accent/20 · rounded-full
Borders & Dividers
border-white/10
FAQ items, sitemap card, subtle UI separators (dark bg)
#1e1d1a
Service page dark sections (numbers section, hero rule)
#DDD8CC
Service page light sections (thesis, FAQ, tools)
#DDD8CC
Service page tool rows and outcome panels
rgba(white, 0.08–0.10)
Review cards, clutch cards
Section Spacing Patterns
Standard section
96px 48px
Service page sections (hero, numbers, CTA band)
py-24 px-12 equivalent
FAQ / Services grid
80px top, 96px bottom · 48px sides
ServiceFAQLight, OtherServicesGrid
Homepage sections
py-16 md:py-20 (Tailwind)
FAQSection, ContactSection
Homepage hero subrow
mt-56px + pt-40px
ServiceHero rule + content gap
Content max-width
1240px (service/methodology)
mx-auto max-w-[1240px]
Content max-width
950px (FAQ, homepage sections)
mx-auto max-w-[950px]
Content max-width
1440px (homepage, reviews)
max-w-[1440px] container
⚠ Open Questions — Things to Reconcile
Three full-pill border radii
9999px (rounded-full), 999px (inline), 200px (.growth-study-eyebrow), 100px (.button--main). All mean "full pill" — consolidate to rounded-full.
Three CTA button sizes
btn-primary (px-6 py-3 · text-base), service hero CTA (px-7 py-4 · text-sm), service CTA band (px-8 py-4 · 15px). All say "Book a call" — pick one size or define size variants.
Two content max-widths
1240px (service pages) vs 950px (homepage sections). Is this intentional? Service pages feel wider.
Service page inline styles vs Tailwind scale
Most service page typography uses inline clamp() rather than the Tailwind display-* scale. Consider migrating to the scale so single-source changes apply everywhere.
Component Inventory
All shared components. Change one, every page using it updates.
Service & Methodology Page Template
Drop in order to build any /services/* or /methodology/* page
Atomic / Shared
Used across multiple components
Global Shell
Planned — High Priority
Global Components
Shared components used across service, methodology, and homepage sections. Change one, every page using it updates.
Live previews — atomic pieces
PulseArrow
Book a callPulsating arrow — every pill CTA button site-wide
ImageFPO
Pulsing dashed placeholder — swap for a real <img> once imagery exists
MetricCallout
Sample stat — slides up on scroll into view
Page-level templates
ServiceHero
Dark hero — pill eyebrow + icon, H1, hero image (or ImageFPO), subhead, outlined CTA
ServiceThesis
1fr/1fr insight section — headline + prose left, ImageFPO right — beige bg
ServiceNumberedItems
Numbered rows — auto 2 or 3-col with outcome panel
StatsGrid
4-col animated counter grid — dark bg
MetricCallout
Pulse-tile-style stat card, slides up on scroll
FAQSection
Dark accordion FAQ, WordReveal headline — shared homepage + service pages
ServiceCTABand
Dark CTA band, bg image, centered stack, outlined button
OtherServicesGrid
3×3 service tile grid, Remix icons, excludeHref prop
Full inventory with live/planned status: /sm