Internal · v0.1
Style Guide
Visual language for PricingPages.com. Palette is sampled directly from a US dollar bill — paper cream, engraving ink, and the saturated treasury green reserved for CTAs.
Brand mark
Color
Each base color has two tints (+15%, +30% toward white) and two shades (−15%, −30% toward black). CTA green is reserved — never use it for decoration, section dividers, or secondary affordances.
Elevated surfaces
#F7F3E6--brand-creamUltra-light. Elevated surfaces that rest above cards — popovers, highlighted rows, tooltips.
Tint / shade scales
--brand-paper#F3EEDF#F1EBD8#EEE7D1#CAC4B2#A7A292--brand-paper-deep#ECE6D4#E8E1CB#E4DCC2#C2BBA5#A09A88--brand-sage#CDD0BF#C2C6B1#B7BCA3#9CA08B#808472--brand-ink#62625E#41403C#1F1E19#1A1A15#161512--brand-ink-muted#97978E#818076#6B6A5E#5B5A50#4B4A42Reserved — CTA
#1C7A3A--brand-ctaPrimary CTA, links, accent marks.
#155E2C--brand-cta-hoverCTA hover/active state.
#F4F6ED--brand-cta-inkText color on CTA surfaces.
Typography
Five families. Commuter Sans carries the copy. Asset is the engraved display face — specialty moments only. Baskervville SC provides old-style small-caps gravitas. Lekton tags the data. Ballet signs the page.
Asset
Google Fonts · Display
font-displaySpecialty H1s, sidebar section heads, footer column headers, oversized CTA marks. All-caps only.
Commuter Sans
Adobe Fonts · Body
font-sansBody copy, card titles, UI labels, form fields, breadcrumbs, tag badges. The workhorse.
Baskervville SC
Google Fonts · Serif SC
font-serifOld-style small-caps gravitas. Section subheads where Asset is too loud, testimonial attribution, deliberate editorial moments.
Lekton
Google Fonts · Mono
font-monoHex codes, serial numbers, metadata, timestamps, token names — anything that feels like data on a bill.
Ballet
Google Fonts · Script
font-scriptSignatures, handwritten flourishes, 'from the desk of' moments. Use sparingly, one per page at most.
Spacing
Base rem scale. Section vertical padding uses fluid clamp() — never fixed px.
Radii
Shadows
Resting
Raised
Floating