design system · v1.0
the fox design system.
how the brand looks, types, sounds, and moves. tokens here are the source of truth — every interface across thefoxhair.com, wigfam.com, and internal tools resolves back to this document.
color.
three maroon values, one ink, hairline borders. no decorative accents — color does meaning, not mood.
Maroon
primary brand color · buttons, links, accents
--color-maroon
Maroon Deep
hover & pressed states
--color-maroon-deep
Maroon Light
gradient stops & subtle highlights
--color-maroon-light
Ink
body text · the only non-brand color you write with
--color-ink
Ink 70
body paragraph text, secondary information
--color-ink-70
Ink 50
captions, mono labels, tertiary metadata
--color-ink-50
Surface
page & card background — pure white, no warmth
--color-cream / --color-surface
the fox uses no gold, no metallic accents. quality is carried by the product itself — 100% remy, own factory, founder-level qc. the visual system holds tension through maroon's quiet luxury, not through glint.
typography.
four faces, one rule: lowercase by default. display sets the brand voice; body carries it; ui labels operate it; mono documents it.
she moves different.
touch this lace. density, airflow, the way the edge finishes against skin — every detail is calculated. not what cheap pretends to be.
add to cart · view spec · request sample
--color-maroon: #5C1A1B; box-shadow: var(--shadow-card);
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;900&family=Inter:wght@400;500;700&family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
every headline, nav link, body line, and button stays lowercase. confidence doesn't need uppercase to prove itself. reference: glossier, aesop. exceptions: quoted customer copy, amazon listings, and paid ads where the platform requires title case.
elevation.
five shadow layers tinted with maroon, never pure black. four radii — pill is reserved for buttons.
spacing.
4-pixel base grid. eight steps cover everything from tight pill padding (--space-2) to section breaks (--space-24).
components.
primitives only. each one earns its place by appearing on at least three surfaces — buttons, product card, trust block, logo system.
<button class="btn btn-primary">know your edge</button>
<button class="btn btn-secondary">learn more</button>
lace front wig · 20"
100% remy · hd lace
$289
<div class="card"> <div class="product-image"></div> <p class="product-meta">lace front wig · 20"</p> <p class="product-name">100% remy · hd lace</p> <p class="product-price">$289</p> </div>
she moves different.
25 years in our own factory. every bundle passes our hands before yours.
<div class="trust-block"> <h2>she moves different.</h2> <p>25 years in our own factory...</p> </div>
visual patterns.
signature moves of the brand. not single components — recurring rules that hold the system together across surfaces.
P-01
maroon block + reversed type
the quiet-luxury move. punctuate white pages with deep maroon blocks for trust, about, and cta moments.
P-02
all-lowercase typography
everything lowercase except quoted customer copy and platform-locked ads. confidence carried without capitals.
P-03
real-texture close-up
the product speaks, not ui decoration. hair texture, lace density, edge work — detail you can't fake.
P-04
frosted navigation
sticky top · backdrop-blur 12px · 85% white · a hairline border appears on scroll.
P-05
multi-shadow hover float
translateY(-4px) and shadow-card → shadow-strong. maroon-tinted shadows, never pure black.
P-06
lifestyle scene
her at the mirror, in motion, with friends. unstaged. reference: tesla's quiet confidence.
voice & tone.
smart · calculated · sharp · premium · in control · dangerous. no explaining. no pandering. no apologies. the product talks.
| rule | what it means | example |
|---|---|---|
| confident, not defensive | no need to argue why we're good. good is good. | "our lace is different. you'll see." |
| no corporate filler | skip "we're committed to providing..." — say what it is | describe the product, not your intent |
| insider voice | not "dear" or "sweetie" — talk like people who know | "you know what this lace density means." |
| don't chase approval | no trashing competitors, no fake warmth | never "please buy from us" |
| specifics over claims | detail does the work, not adjectives | "120 stitches per inch" > "high quality" |
| restraint with ! | emphasis comes from content, not punctuation | — |
| don't say | why | say instead |
|---|---|---|
| hun / dear / sweetie | fake warmth, pandering | just "you" — or drop the address |
| please buy | undignified | — |
| lowest price / at a loss | violates our no-price-war stance | "if you know, now's the moment" |
| we don't sell fakes | defensive framing — the old anti-scam voice | "you're not avoiding fakes, you're picking the right thing" |
| quality guaranteed | too generic, says nothing | describe the craft ("120 stitches per inch") |
| you deserve better | tired self-help cliché | "you know what you want" |
our wigs use 100% human hair. we don't deceive customers. quality guaranteed.
touch this lace. density, airflow, the way the edge finishes against skin — every detail is calculated. not what cheap pretends to be.
we don't lie. every product passes strict qc.
every bundle passes our hands before yours. you don't have to trust us — you just have to know.
we're not cheap, because we use real materials.
cheap costs more in the end. settle once, pay twice. we're not for everyone.
good news! new arrivals are up! 100% human hair, come shop now! 🎉
zero fox given. she doesn't owe anyone an explanation.
please leave a review and let us know how it is!
those who know, know. the rest — try it and find out.
sale! limited time offer! first come, first served!
we don't run price wars. but if you know — now's the best moment.
attitude
zero fox given.
proud, unbothered, doesn't care who's watching. for social, attitude posters, hard editorial shots.
editorial
pretty. calculated.
refined, deliberate, nothing by accident. for product close-ups, craft stories, editorial.
lifestyle
she moves different.
confident, singular, walks with intent. for lifestyle content, influencer, brand film.
tailwind config.
drop this into your tailwind.config.js and every the fox token is one class away. css variables and tailwind utilities point at the same source of truth.
/** @type {import('tailwindcss').Config} */
export default {
content: ["./**/*.{html,js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
maroon: {
DEFAULT: "#5C1A1B",
deep: "#3D1112",
light: "#7A2324",
},
cream: "#FFFFFF",
ink: {
DEFAULT: "#1A1A1A",
70: "rgba(26,26,26,0.7)",
50: "rgba(26,26,26,0.5)",
},
},
fontFamily: {
display: ['"Playfair Display"', "Georgia", "serif"],
body: ['"Inter"', "sans-serif"],
ui: ['"DM Sans"', "sans-serif"],
mono: ['"JetBrains Mono"', "monospace"],
},
boxShadow: {
soft: "0 1px 2px rgba(0,0,0,0.04)",
medium: "0 4px 12px rgba(0,0,0,0.06)",
card: "0 8px 24px rgba(92,26,27,0.08)",
strong: "0 12px 32px rgba(92,26,27,0.12)",
elevated: "0 20px 48px rgba(92,26,27,0.16)",
},
borderRadius: {
sm: "8px",
md: "16px",
lg: "24px",
},
},
},
plugins: [],
};
:root {
/* brand */
--color-maroon: #5C1A1B;
--color-maroon-deep: #3D1112;
--color-maroon-light: #7A2324;
/* surface & ink */
--color-cream: #FFFFFF;
--color-surface: #FFFFFF;
--color-ink: #1A1A1A;
--color-ink-70: rgba(26, 26, 26, 0.7);
--color-ink-50: rgba(26, 26, 26, 0.5);
--color-on-maroon: #FFFFFF;
--color-hairline: rgba(26, 26, 26, 0.08);
/* fonts */
--font-display: "Playfair Display", "Noto Serif SC", Georgia, serif;
--font-body: "Inter", "Noto Sans SC", sans-serif;
--font-ui: "DM Sans", sans-serif;
--font-mono: "JetBrains Mono", monospace;
/* shadows */
--shadow-soft: 0 1px 2px rgba(0,0,0,0.04);
--shadow-medium: 0 4px 12px rgba(0,0,0,0.06);
--shadow-card: 0 8px 24px rgba(92,26,27,0.08);
--shadow-strong: 0 12px 32px rgba(92,26,27,0.12);
--shadow-elevated: 0 20px 48px rgba(92,26,27,0.16);
/* radius */
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-pill: 9999px;
}