Design System · v1.0

BEARLA Style Guide

Heirloom keepsakes cast from a child's drawing. A warm, editorial, jewelry-box aesthetic — cream & maroon, serif elegance, restrained gold detail.

01

Color

Cream — Dawn Pink
#F4EEE5
Page background
Cream Light — Merino
#F9F6F0
Nav bar, lightest surface
Parchment
#EEE5D0
Hairline borders, alt surface
Maroon — Crown of Thorns
#621D26
Primary CTA, headline accent
Maroon Deep
#4E161D
Hover / active state
Espresso — Coffee Bean
#281712
Footer background
Gold — Tussock
#B18A3D
Metallic accent, rings, stars
Gold Bright — Pizza
#D09727
Live-preview fill, high-emphasis gold
Ink / Taupe — Coffee
#6F5F4F
Body text, nav links
Rose Gold — Antique Brass
#BB7558
Material swatch — rose gold
Silver
#B8B8B8
Material swatch — sterling silver
Resin — Korma
#823D19
Material swatch — color resin
Focus — Dodger Blue
#453AF7
System only — focus rings, form validation. Never decorative.

Opacity ramps

Maroon 10%
Subtle tint / row hover
Maroon 20%
Selected-state background
Maroon 40%
Disabled fill / muted badge
Maroon 70%
Pressed state
Gold 15%
Icon background wash
Gold 40%
Active border tint
Black 10%
Hairline dividers on light
Black 50%
Scrims / image overlays
Black 90%
Near-black text/UI on light
02

Typography

Cormorant Garamond — display & body

A ScribbleDisplay / Hero
Light 300 · 72/75.6
Cast in GoldDisplay / H1
Light 300 · 60/75
Choose your mediumH2
Light 300 · 48/60
Three steps from crayonH2 / Section title
Light 300 · 36/45
Heirloom ProofH3
Light 300 · 30/36
Capture & UploadH4 / Card title
Light 300 · 24/32
"That drawing deserves to outlast everything"Body Large / Italic
Light Italic · 20/32.5
We transform your grandchild's first drawing into a handcrafted pendant, charm, or brooch — precious metal, cast from their exact lines.Body
Regular 400 · 18/29.3
Receive a high-resolution 3D proof with scale reference. Request any adjustments before we cast.Body Small
Regular 400 · 16/26

Jost — interface chrome

Upload a DrawingButton label
Medium 500, upper · 14/20
Heirloom Keepsakes · Est. 2019Eyebrow / Label
Regular 400, upper · 12/16
Approve Before We Cast a Single GramSmall eyebrow
Regular 400, upper · 10/15
Rich warm yellow, lifetime heirloom weightUI caption (sentence case)
Medium 500 · 12/16

Inter — micro UI only

SELECTEDBadge / tag
Bold 700 · 11/16
4.97 averageMicro stat
Semi Bold 600 · 11/16
1,340 pieces craftedMicro stat
Medium 500 · 11/16
03

Spacing

4px base unit. Generous section padding (64–96px) gives the layout its calm, editorial pace.

TokenValueUse
--space-28pxIcon-to-label gaps
--space-416pxCard internal padding, tight stacks
--space-524pxCard padding, grid gaps
--space-632pxComponent gaps
--space-748pxSub-section spacing
--space-8 / --space-964 / 96pxBetween major sections
--space-10128pxHero top/bottom breathing room
04

Buttons

Sharp corners (2px), uppercase micro-tracked labels, generous horizontal padding. Only one filled/solid style — restraint keeps the maroon meaningful.

05

Cards & Components

Material selector cards, process steps, and testimonial cards — the three recurring card patterns.

Selected
14k Solid Gold
Rich warm yellow, lifetime heirloom weight
$369
14k Rose Gold
Blush warmth, romantic and modern
$349
Sterling Silver
Cool bright finish, everyday wearability
$189
Color Resin
Vivid inlay preserving the original crayon palette
$129
01
From Phone to Heirloom in Seconds
Capture & Upload
Photograph or scan a drawing — our dual-input picker works natively on iOS and Android camera rolls.
★★★★★
"My granddaughter drew a little horse at age 5. Seeing it cast in 14k gold — I wear it on her graduation. She cries."
Margaret Holloway
Solid Gold Pendant
★★★★★
"Not sure drawing of our family became a charm bracelet for his grandmother's birthday. The detail they presented was astonishing."
James & Priya Oset
Rose Gold Charm
★★★★★
"I was skeptical about the preview — but what arrived was exactly what I saw. Meticulous craft on custom jewelry."
Camille Fontaine
Sterling Silver Brooch
06

Navigation & Footer

Begin
07

FAQ / Accordion

What kind of drawing works best?
How long does the process take?
Can I make changes after upload?
08

Usage Principles

ElementRule
MaroonReserved for one primary CTA per view and headline word-emphasis. Never use as a large background outside the Stories module.
GoldMetallic/material cues only — icons, rings, stars, section eyebrows. Not used for text links or buttons.
Serif italicsEmphasize one or two words per headline max — the technique loses power if overused.
Numbering (01/02/03)Reserved for genuine sequences (the 3-step process). Don't apply to non-sequential content.
CornersSharp, 2–4px radius throughout — no pill buttons, no heavy rounding. Circles are reserved for material swatches and the hero locket motif.
DividersSmall centered gold flourish (◆ or hairline + dot) under section eyebrows, used sparingly.
Focus blue (Dodger Blue)System-reserved only: keyboard focus rings, form validation, checkbox/radio checked states. Never used decoratively — its high saturation exists to stand out from the warm palette on purpose.
Back to Case Study