Brand guidelines
A.I Stone Care — style guide
A quiet, stone-inspired identity. Warm neutrals quarried from limestone and travertine, anchored by deep basalt charcoal and lifted with a single pyrite-gold accent. Typography pairs an editorial serif with a clean technical sans.
Logo
A faceted slab mark paired with the wordmark in Fraunces.
Primary lockup on warm white
Inverse lockup on charcoal
Do
- • Keep clear space equal to the slab mark height around the lockup.
- • Use the inverse lockup on imagery or charcoal surfaces.
- • Render the wordmark in Fraunces, semibold (600).
Don't
- • Recolor the slab mark in chart palettes or gradients.
- • Replace the wordmark font or stretch the lockup.
- • Place the primary lockup on busy stone photography — use inverse.
Color palette
All tokens are defined in src/styles.css using oklch. Reference them through Tailwind utilities — never hardcode hex values.
Warm white
--background
App canvas — quarried limestone
Charcoal
--primary
Primary text + buttons — basalt
Soft beige
--secondary
Surfaces, chips — travertine
Muted sand
--muted
Cards, subtle fills
Gold accent
--gold
Highlights, veining — pyrite fleck
Border
--border
Hairlines + dividers
Destructive
--destructive
Warnings, do-not-use
Stone texture utility
Use the .stone-texture class for hero backgrounds — soft radial veining built from the warm palette.
Typography
Display · Fraunces
Quarried.
Polished — etched — restored.
Use for h1–h3, hero headlines, and the wordmark. Weights 500–700.
Body · Inter
The quick brown fox jumps over the lazy dog. Identification is an estimate, not a guarantee — always patch test before applying products to natural stone.
Secondary text in muted-foreground. Weights 300–600.
H1
36–48 / -0.01em
H2
24–30 / -0.01em
Body
16 / 1.6 line-height
Voice
- • Honest about uncertainty — surface confidence and alternatives.
- • Practical — recommend the safest path and when to call a pro.
- • Quietly expert — no hype, no exclamation marks.
- • Stone-literate — use terms like veining, etch, patina, sealer.