Reference
Design System
Component inventory and brand reference. Everything available to build with.
Colors
Every color token from @theme static.
walnut
bg-walnut · text-walnut
#2D2520
copper
bg-copper · text-copper
#C2784A
gold
bg-gold · text-gold
#D4A853
cream
bg-cream · text-cream
#FAF7F2
warm-surface
bg-warm-surface
#F0EBE3
warm-muted
text-warm-muted
#8B7E74
Typography
Font families, sizes, and usage from the brand system.
Fraunces (heading)
Hero Heading
text-4xl sm:text-5xl lg:text-6xl · font-bold · leading-[1.08]
Section Heading
text-3xl sm:text-4xl lg:text-5xl · font-bold · leading-tight
Card Heading
text-2xl lg:text-3xl · font-bold
FAQ Question / Small Heading
text-xl · font-bold
Manrope (body)
Body copy. Manrope is used for all paragraph text, captions, navigation, and UI elements. It pairs cleanly with the editorial warmth of Fraunces headings.
text-base · leading-relaxed
Section Eyebrow
text-sm · font-medium · uppercase · tracking-[0.25em]
Button Text
text-sm · font-semibold · tracking-wide
Caption / Footer small print
text-xs
Components
Every reusable component in src/components/.
Atoms
SectionHeading
Eyebrow Label
A Section Title
Optional description text below the heading. This explains what the section is about in one or two sentences.
SectionHeading · src/components/SectionHeading.astro
Props: title, eyebrow, description, id, ornament (boolean) — all optional
FaqItem
FaqItem · src/components/FaqItem.astro
Props: id (required), question (required). Slot: answer content.
ServiceCard
OEM Manufacturing
Full garment construction from your tech packs across our 12 production lines. Jersey, cut & sew, sublimation printing, and embroidery — all under one roof.
- Jerseys, Kits & Teamwear
- T-Shirts, Polos & Hoodies
- Outerwear, Bottoms & Accessories
ServiceCard · src/components/ServiceCard.astro
Props: number, title, description, image, imageAlt, items (string[]), imageLeft (boolean)
FabricCard
Moisture-Wicking
Engineered polyester blends that pull sweat away from skin — essential for gym, running, and team sports.
FabricCard · src/components/FabricCard.astro
Props: number, title, description, tags (string[])
StatBadge
StatBadge · src/components/StatBadge.astro
Props: value (string), label (string)
CertificationBadge
ISO 9001 Certified
Our quality management system is independently audited. Process consistency and traceability you can rely on.
CertificationBadge · src/components/CertificationBadge.astro
Props: label, title, description, variant ("gold" | "copper")
BlogCard · src/components/BlogCard.astro
Props: post (collection entry with id and data), size ("default" | "large")
AuthorBio
Li Wei
Li Wei has spent over 12 years on the factory floor in Wuhan, working directly with brands from 20+ countries.
AuthorBio · src/components/AuthorBio.astro
Props: name, bio, avatar (optional)
Pagination
Pagination · src/components/Pagination.astro
Props: currentPage, totalPages, baseUrl (default: "/blog")