01 / colors
color system
deep maroon leads. warm off-white grounds it. quality speaks through the product — no gold required.
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.
brand primary
background
text
02 / typography
typography
classic serif (playfair display) meets modern sans (inter). everything lowercase, always.
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.
display / hero · playfair display 900
know your edge.
section title · playfair display 700
pretty. calculated.
body · inter 400 / line-height 1.7
touch this lace. density, airflow, the way the edge finishes against skin — every detail is calculated. not what cheap pretends to be.
ui · dm sans 500
add to cart
mono · jetbrains mono 400
--color-maroon: #5C1A1B;
google fonts link
<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">
03 / shadows & radius
shadows & radius
five shadow layers tinted with maroon. four radii. pill is reserved for buttons.
shadows
soft
--shadow-soft
medium
--shadow-medium
card
--shadow-card
strong
--shadow-strong
elevated
--shadow-elevated
radius
small · 8px
--radius-sm
medium · 16px
--radius-md
large · 24px
--radius-lg
pill · 9999px
--radius-pill
04 / components
components
live preview plus copyable html + css. drop into any the fox project.
primary button
<button class="btn btn-primary">know your edge</button>
secondary button
<button class="btn btn-secondary">learn more</button>
product card
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>
trust block
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>
css variables (full set)
:root {
/* brand */
--color-maroon: #5C1A1B;
--color-maroon-deep: #3D1112;
--color-maroon-light: #7A2324;
/* background */
--color-cream: #FFFFFF;
--color-white: #FFFFFF;
/* text */
--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;
/* fonts */
--font-display: "Playfair Display", Georgia, serif;
--font-body: "Inter", 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;
}
05 / visual patterns
visual patterns
signature moves of the brand. not single components — recurring rules that hold the system together.
01 · maroon color block
maroon block + reversed type
the quiet-luxury move. punctuate cream pages with deep maroon blocks for trust, about, and cta moments.
02 · all-lowercase typography
all-lowercase typography
everything lowercase except quoted customer copy and platform-locked ads. confidence carried without capitals.
03 · real-texture close-up photography
real-texture close-up
the product speaks, not ui decoration. hair texture, lace density, edge work — detail you can't fake.
04 · frosted navigation
frosted navigation
sticky top · backdrop-blur 16px · 70% cream · a hairline border appears on scroll.
05 · multi-shadow hover float
multi-shadow hover float
translateY(-4px) and shadow-card → shadow-strong. maroon-tinted shadows, never pure black.
06 · lifestyle scene photography
lifestyle scene
her at the mirror, in motion, with friends. unstaged. reference: tesla's quiet confidence.
06 / voice & tone
brand voice
smart · calculated · sharp · premium · in control · dangerous. no explaining. no pandering. no apologies. the product talks.
tone rules
| 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 | — |
forbidden words
| 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" |
before / after
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.
campaign slogans
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.
07 / brand assets
brand assets
logo, fonts, palette. logo system is in design — placeholders first.
logo system — coming soon
five variants queued. when designs are finalized, drop svg files into assets/logos/ and replace placeholders.
fonts
playfair display + inter + dm sans + jetbrains mono. all from google fonts — free for commercial use.
<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">
color palette · css snippet
/* the fox · v1.0 */ --color-maroon: #5C1A1B; --color-maroon-deep: #3D1112; --color-maroon-light: #7A2324; --color-cream: #FFFFFF; --color-white: #FFFFFF; --color-ink: #1A1A1A;
08 / tailwind config
tailwind config
drop this into your tailwind.config.js to use every the fox token.
/** @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: [],
};