Brand book

Colour

Three constants and a set of roles derived from them. Components ask for a role, never for a hex.

Brand constants

Three colours carry the brand. Everything else is a role derived from them, and components may only ask for a role.

--ink#1A1A1AHeadings, dark bands, primary buttons

--accent#6B7A5AThe green. Hovers, eyebrows, savings

--sand#D9D2C4Outline borders, quiet rules

Roles

Reach for the role, not the constant. --body is what body copy is, and it stays right if the palette is ever retuned.

--body#5A5A52Body copy

--mute#70706AMeta lines, captions

--accent-text#5F6D50Green used as text

--bone#F2F2F0Media grounds, soft panels

--line#E4E2DCHairlines, field borders

--alert#8A5A3AErrors, low stock

Contrast

Computed in your browser from the same tokens the components use. Anything reading FAIL is a defect on this page, not a note to file.

Body copy on page white——

Body copy on a bone panel——

Meta line on white——

Green as text on white——

White on the dark band——

Body copy on the dark band——

Not every pair needs AA. Decorative marks and disabled states are exempt. Anything a customer has to read is not.

Type

Three families and one fluid size ladder. Every size below is measured from the running theme at your current window width.

Families

Role	Family	Used for
Display	Newsreader	Headings and product titles. Light weights only — 200 and 300.
UI	Archivo	Body copy, buttons, navigation, everything that is not a heading.
Mono	IBM Plex Mono	Eyebrows, prices, meta lines, counts. Always uppercase with letterspacing.

The serif is the brand. A heading set in Archivo reads as a different shop. If a heading looks too light, it is the size that is wrong, not the weight.

Size ladder

Every size is fluid — it interpolates between a floor and a ceiling with the viewport. The pixel values are what your browser resolves right now, at this window width; make the window narrower and they move.

Care that starts--fs-display-xl—

Care that starts--fs-display-sm—

Section heading--fs-h2-xl—

Section heading--fs-h2-sm—

Product card title--fs-card-title—

Lead paragraph--fs-lead—

Body copy--fs-body—

Small print--fs-xs—

Eyebrow label--fs-eyebrow—

The mark

One dark lockup, a short list of grounds it is allowed on, and the things that are never done to it.

Grounds it is allowed on

The mark is a single dark lockup. It is not a colour-aware SVG, so it needs a light ground — on anything dark it must be swapped for a light version rather than recoloured.

White — preferred

Bone — allowed

Accent tint — allowed

Rules

Clear space. Keep at least the height of the word BURDOCK clear on every side. In the header that is the full bar height.
Minimum size. 110px wide on screen. Below that the NATURALS line closes up and stops being legible.
Never recolour it. The fill is fixed. On a dark ground, supply a light version through the logo setting instead.
Never set it in type. The wordmark is drawn. Typing "Burdock Naturals" in Newsreader is not the logo.
Never stretch, rotate, outline or add effects. Scale proportionally, nothing else.

Where to change it. Header, footer and the password gate each carry their own logo setting, so a new file has to be set in all three.

Photography

What the pictures are of, how they are graded, and how copy is kept legible over them.

Direction

Real skin, real bathrooms. People using the products, in daylight, at home. Not studio beauty shots and not stock-looking models.
Warm and unsaturated. The library sits in warm neutrals. Product images render at slightly reduced saturation so photographs and packaging agree.
Room on the left. Hero copy sits left on desktop and bottom on mobile, so choose frames with quiet space there.
Packaging is the hero on product cards. Cards crop square on a bone ground; a cut-out PNG works, a photo with its own white background fights the frame.

Overlays

Hero copy is kept legible by a gradient over the image, not by darkening the photograph itself. Two different gradients run on desktop and mobile because the copy sits in different places.

Where	Treatment
Hero, desktop	Left-to-right, 62% ink at the left edge fading out by 72% across.
Hero, mobile	Bottom-up, 88% ink at the base fading out at the top.
Category tiles	Bottom-up to 94% ink behind the label.
Media frames	No overlay. Ground is bone, so transparent PNGs sit correctly.

If copy is hard to read, change the frame, not the overlay. Pushing the overlay darker to rescue a busy image is what makes a hero look muddy.

Space

The rhythm between bands and the frame the page sits in. Both are fluid, so the figures move with the viewport.

Spacing ladder

Bands and grids use a small set of fluid steps rather than arbitrary numbers. Bar lengths below are proportional; the figures are resolved at your current window width.

--section-y—

--section-y-sm—

--gap-split—

--gap-grid—

--gutter—

Page frame

--container—

--container-md—

--container-sm—

--container-xs—

Band rhythm. Most bands carry top padding only and let the next band's padding make the gap. A band that sets both usually ends up with twice the space you wanted.

Voice

How the brand sounds, and the short list of things that may never be written without evidence behind them.

How it sounds

Plain, and slightly understated. "Cold-pressed, cured, never rushed." Not "revolutionary botanical science".
Specific over superlative. "Cures four to six weeks before it can ship" beats "made with care".
Honest about limits. "That is the honest reason a batch occasionally sells out" is the register. Admitting a constraint reads as confidence.
Second person, lightly. Talk to one person. Avoid "customers will love".
Short sentences. Few commas. If a sentence needs a semicolon, it is two sentences.

Never invent

This is the one rule with legal weight. Everything below has either been said by a real customer, or it may not appear on the site.

Testimonials and ratings. No quote, name, star count or review total may be written for effect. Placeholder social proof carries a visible "Sample" marker for exactly this reason — if you cannot mark it, do not publish it.
Medical claims. These are cosmetics, not medicine. Never say a product treats, heals or cures anything. Describe what it is and what customers report.
Certifications and test results. Organic, clinically tested, dermatologist approved — only with a document behind it.
Scarcity. "Only 3 left" is true or it is absent.

Motion

One duration, one curve, and a contract with anyone who asks their system for less movement.

Durations and curves

Token	Value	Used for
`--dur`	0.22s	Every hover, border and colour change.
`--ease`	cubic-bezier(.4, 0, .2, 1)	The single curve. Do not introduce a second.
Hero crossfade	1s	Slide to slide.
Hero drift	7s	Slow zoom on the active slide.
Card image	0.6s	Scale on hover.

The reduced-motion contract

When a visitor asks their system for reduced motion, the theme honours it globally: animations and transitions collapse to effectively zero, and the hero stops both its drift and its autoplay.

Anything new must honour it too. If you add motion, it belongs inside the existing reduced-motion rule. Motion is decoration here — nothing may depend on an animation to become readable or reachable.

How Burdock Naturals looks and sounds.