Skip to content

DESIGN.md

Latest commit

 

History

History
151 lines (126 loc) · 3.85 KB

DESIGN.md

File metadata and controls

151 lines (126 loc) · 3.85 KB
Raw
version alpha
name Adazo
description Beauty/lifestyle Amazon storefront on warm paper with blush rose accents — product photography first; pure white wells f
colors
primary secondary tertiary neutral bamboo bamboo-deep card charcoal cream gold ink ink-soft leaf line moss muted paper paper-2 sunset well wood
#1a1418
#4a3f45
#b76e79
#faf7f8
#b76e79
#944e5a
#ffffff
#1a1216
#f7f1f3
#c4a07a
#1a1418
#4a3f45
#d4a5ad
#eadfe4
#5c2e3a
#7a6d74
#faf7f8
#f3ecef
#d4846a
#ffffff
#c9a08a
typography
h1 body-md button
fontFamily fontSize fontWeight
Cormorant Garamond
2.5rem
600
fontFamily fontSize fontWeight
DM Sans
1rem
400
fontFamily fontSize fontWeight
DM Sans
0.875rem
600
rounded
sm md lg full
8px
12px
16px
999px
spacing
sm md lg xl
8px
16px
24px
40px
components
button-primary button-secondary card
backgroundColor textColor rounded
{colors.tertiary}
{colors.primary}
{rounded.full}
backgroundColor textColor
{colors.neutral}
{colors.primary}
backgroundColor textColor
{colors.neutral}
{colors.primary}

Overview

Beauty/lifestyle Amazon storefront on warm paper with blush rose accents — product photography first; pure white wells for studio shots.

Domain: adazo.com Primary conversion: Shop on Amazon CSS path: src/index.css

This file is the normative brand contract. Change tokens here first, then mirror into CSS, then components.

Colors

Extracted from live CSS. Prefer these names in new work:

Token Value
primary #1a1418
secondary #4a3f45
tertiary #b76e79
neutral #faf7f8
bamboo #b76e79
bamboo-deep #944e5a
card #ffffff
charcoal #1a1216
cream #f7f1f3
gold #c4a07a
ink #1a1418
ink-soft #4a3f45
leaf #d4a5ad
line #eadfe4
moss #5c2e3a
muted #7a6d74
paper #faf7f8
paper-2 #f3ecef
sunset #d4846a
well #ffffff
wood #c9a08a
  • Use tertiary (or the brand accent listed above) for interaction — not arbitrary new hues.
  • Keep product image wells pure white when this is an Amazon-affiliate surface.

Typography

  • Display: Cormorant Garamond
  • Body/UI: DM Sans
  • Do not add a third family without updating this file.

Layout

  • Follow existing container max-widths and section padding in the live CSS.
  • Sticky headers must leave scroll-margin for in-page anchors.
  • Prefer one primary CTA per view.

Elevation & Depth

  • Match existing shadow/glow language in the stylesheet; do not add Material-style heavy elevation unless already present.
  • Respect prefers-reduced-motion for hover transforms.

Shapes

  • Prefer rounded pills for CTAs and soft cards as in live components.

Components

Map to existing classes in the primary stylesheet (names vary by site):

Role Look for
Primary button .btn-primary, .btn.primary, brand CTA class
Secondary button .btn-secondary, .btn-ghost, outline CTA
Card .card, .card-soft, product card
Field .field, form inputs
Nav header/nav link styles

Reuse these; do not invent a parallel component set.

Do's and Don'ts

Do

  • Read this file before UI work on Adazo.
  • Keep brand accent usage consistent with live pages.
  • Update this file in the same PR when brand tokens change.

Don't

  • No cold cyan/obsidian (Kyasi). Never put brand color washes over product image wells.
  • Ship one-off hex in components when a token exists.
  • Copy another brand’s palette into this site without an intentional redesign + DESIGN.md rewrite.