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: #F5F5F5;
--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: #F5F5F5;
/* 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.
深酒红大色块 + 反白文字 · 用于 trust / about / cta 片段
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.
真实质感高清特写 · 产品说话 · 不堆 ui 元素
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.
卡片 hover 上浮 · 带淡酒红调的阴影 · 不是纯黑
06 · lifestyle scene photography
lifestyle scene
her at the mirror, in motion, with friends. unstaged. reference: tesla's quiet confidence.
场景化生活方式摄影 · 不摆拍不矫情 · 气质参考 tesla
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 | — |
tone 规则：自信不解释 · 不说车轱辘话 · 像 insider 对话 · 不讨好 · 永远具体 · 少用感叹号
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" |
forbidden words：亲爱的 · 求求你 · 最低价 · 假货我们不做 · 品质保证 · 你值得更好的
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.
editorial · 精致高级 · 产品特写 / 细节故事
lifestyle
she moves different.
confident, singular, walks with intent. for lifestyle content, influencer, brand film.
lifestyle · 自信特别 · 生活方式 / influencer
07 / brand assets
brand assets
品牌素材
logo, fonts, palette. logo system is in design — placeholders first.
logo · 字体 · 色板下载 · logo 设计中 · 占位先上
logo system — coming soon
app icon
avatar
header
reverse
badge
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: #F5F5F5; --color-white: #FFFFFF; --color-ink: #1A1A1A;
08 / tailwind config
tailwind config
tailwind 配置
drop this into your tailwind.config.js to use every the fox token.
贴进 tailwind.config.js · 即可使用所有 the fox tokens
/** @type {import('tailwindcss').Config} */
export default {
content: ["./**/*.{html,js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
maroon: {
DEFAULT: "#5C1A1B",
deep: "#3D1112",
light: "#7A2324",
},
cream: "#F5F5F5",
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: [],
};