Reference
Component inventory and brand reference. Everything available to build with.
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
Font families, sizes, and usage from the brand system.
Fraunces (heading)
text-4xl sm:text-5xl lg:text-6xl · font-bold · leading-[1.08]
text-3xl sm:text-4xl lg:text-5xl · font-bold · leading-tight
text-2xl lg:text-3xl · font-bold
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
Every reusable component in src/components/.
SectionHeading
Eyebrow Label
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
Full garment construction from your tech packs across our 12 production lines. Jersey, cut & sew, sublimation printing, and embroidery — all under one roof.
ServiceCard · src/components/ServiceCard.astro
Props: number, title, description, image, imageAlt, items (string[]), imageLeft (boolean)
FabricCard
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
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 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")
Full page sections are currently defined inline in src/pages/index.astro.
As they are extracted into src/components/, they will appear here.
Footer · src/components/Footer.astro
4-column footer with brand, services, products, and contact info. Dark background using walnut theme token.
Reusable CSS classes defined in the global style block on the homepage.
.hero-gradient-overlay
Dark warm gradient overlay for hero background images.
.card-hover
Hover lift effect: translateY(-4px) + soft shadow transition.
.flip-card / .flip-card-inner / .flip-card-front / .flip-card-back
3D card flip animation with perspective and backface-visibility.
.gold-underline
Animated gold underline that expands on hover — used on nav links.
.pull-quote-open / .pull-quote-close
Oversized decorative quotation marks (6rem Fraunces) for testimonials.
.ornament-divider
Decorative section divider with centered ornament flanked by gold gradient lines.
.perf-section
Paint containment for heavy below-fold sections: content-visibility: auto.
.faq-toggle / .faq-icon
FAQ accordion toggle button and rotating plus/minus icon.
.scrollbar-none
Hides scrollbar across Webkit, Firefox, and IE/Edge.