Design System
Component inventory and brand reference. Every reusable element from src/components/.
Colors
terracotta
bg-terracotta
#F97AA0
terracotta-dark
bg-terracotta-dark
#E86A90
gold
bg-gold
#5CBFBB
gold-light
bg-gold-light
#4DAFAB
walnut
bg-walnut
#4F7F82
walnut-light
bg-walnut-light
#3D5F61
cream
bg-cream
#FFFFFF
warm-sand
bg-warm-sand
#FFF5F7
charcoal
bg-charcoal
#3D3D3D
warm-muted
bg-warm-muted
#8E8E8E
sakura
bg-sakura
#FF8FAB
sakura-light
bg-sakura-light
#FFF0F4
sakura-dark
bg-sakura-dark
#F06A8E
Typography
h1 · Hero Headline
We bring your toy ideas to life.
font-heading · font-black · clamp(2.2rem, 5.5vw, 4rem) · leading-[1.06]
h2 · Section Heading
Everything your toy needs, all under one roof.
font-heading · font-bold · clamp(2rem, 4.5vw, 3.4rem) · leading-[1.08]
h3 · Card Title
Concept Design
font-heading · text-xl · font-bold
Eyebrow Label
Your Creative Manufacturing Partner
text-terracotta · text-sm · uppercase · tracking-[0.2em] · font-bold
Body Text
A soft-spoken, seriously capable manufacturing partner. Talk directly to the people making your product — no trading desk, no delays, just honest collaboration.
text-warm-muted · text-base · leading-relaxed
Small Text · Caption
Custom shapes, organic cotton, embroidered details
text-warm-muted · text-sm · font-medium
Stat Counter
font-heading · font-black · text-walnut · clamp(2.6rem, 5vw, 4rem)
Components · Atoms
Small reusable elements — buttons, headings, dividers, decorative elements.
CtaButton
src/components/CtaButton.astro
SectionHeading
Our Craft
Everything your toy needs,
all under one roof.
src/components/SectionHeading.astro
SectionHeading · with description
What We Make
Category expertise you can see in every stitch and seam.
From plush to precision engineering, we bring decades of hands-on manufacturing experience to every product category.
src/components/SectionHeading.astro
WaveDivider
Variants: default, curve, wavy. Positioned absolutely at the bottom of a relative parent.
default
curve
wavy
src/components/WaveDivider.astro
BackgroundBlob
Decorative floating blurred circles. Position inside a relative parent.
src/components/BackgroundBlob.astro
AnimatedCounter
React component — animates from 0 to target when scrolled into view.
2,200ms duration · IntersectionObserver at 40% threshold
src/components/AnimatedCounter.tsx
NavBar
Shared navigation component with desktop dropdowns and mobile hamburger drawer. Props: accent, ctaText, ctaHref, activeLink, navBg.
src/components/NavBar.astro
BlogCard
Blog preview card with image, catalog badge, title, description, date, and author info. Hover lift effect with shadow transition.
src/components/BlogCard.astro — Props: title, description, date, authorName, authorAvatar, catalog, featuredImage, href
Components · Sections
Full page sections — combine atoms into complete layout blocks.
StatsGrid
Grid of animated stat counters. Uses AnimatedCounter with client:load.
Happy Partners
Quality Approval
src/components/StatsGrid.astro
FaqAccordion
Click-to-toggle accordion with max-height animation. Opens one item at a time.
We start at 500 units for most categories, with flexibility for first-time partners.
Most prototypes ship within 5-10 business days.
src/components/FaqAccordion.astro
ProcessStepper
Horizontal scrollable step cards on desktop, vertical stack on mobile. Click to expand detailed descriptions. Active step highlighted with terracotta accent.
Design & Prototyping
Transform your concept into production-ready specs with 3D renders and physical samples.
Our in-house design team transforms your concept into production-ready specifications. You get 3D renders for review, material swatches, and a physical prototype shipped to you. Iterate directly with the engineer — changes go from your message to the sample room in hours.
Material Sourcing
Premium materials sourced, tested, and verified before production begins.
Every material is sourced directly from certified suppliers and verified in our in-house testing lab. Tensile strength, colorfastness, flammability, and heavy metal screening on all incoming materials.
Manufacturing
Precision production on dedicated lines with calibrated tooling.
Your order moves to a dedicated production line with calibrated tooling and documented quality checkpoints. Injection molding, CNC machining, embroidery, and multi-material assembly under one roof.
src/components/ProcessStepper.astro
TestimonialCarousel
Infinite-loop carousel with image + quote slides, prev/next arrows, and dot indicators.
Testimonials
What our partners say
"Leeline not only took the order — they assigned me a dedicated engineer who improved my design."
James Hartwell
Kickstarter Creator
"Leeline made it feel like working with a neighbor. They cared about my product as much as I did."
Sofia Reyes
Founder, Little Luna Toys
"Leeline not only took the order — they assigned me a dedicated engineer who improved my design."
James Hartwell
Kickstarter Creator
"Leeline made it feel like working with a neighbor. They cared about my product as much as I did."
Sofia Reyes
Founder, Little Luna Toys
src/components/TestimonialCarousel.astro
ScrollingStrip
Auto-scrolling horizontal image strip. Fades at edges, pauses on hover.
src/components/ScrollingStrip.astro
PlushCustomization
Hub-and-spoke capability wheel. Desktop: 3-column grid with center anchor surrounded by 6 spoke cards. Mobile: 2-column grid with anchor at top. Hover effects on each card with decorative connecting dots.
Embroidery & Stitching
Up to 12 thread colors in a single embroidery run with stitch-level precision.
What This Means for Your Brand
- 2D and 3D embroidery techniques
- Up to 12 thread colors per run
- Digital file archiving for consistency
Up to 12 thread colors in a single embroidery run with stitch-level precision.
src/components/PlushCustomization.astro
TeddyBearShowcase
3-column interactive hover-expand grid. Desktop: hover expands active card while siblings compress. Mobile: vertical stack with tap-to-expand accordion. Each card: image, icon, name, tagline, description, checkmark features, "Best for" label. Props: types: TeddyBearType[], accent?: string.
Personalized Gift Bears
Embroidered names, dates & messages — one bear, one person, one moment.
Custom teddy bears for life's personal moments. Name, date, or message stitched directly into the fabric.
Best For
Gift brands, e-commerce DTC sellers, seasonal holiday launches
Brand Mascot Bears
Your logo, your colors, your character — brought to life in plush.
Turn your 2D brand mascot into a huggable 3D ambassador with Pantone-matched colors.
Best For
Retail chains, brand licensing, sports teams, entertainment IP
Heritage & Collectible Bears
Museum-quality craftsmanship for collectors, luxury retail, and generational gifts.
Traditional jointed teddy bears with mohair, alpaca, and hand-stitched features.
Best For
Luxury gift brands, museum shops, collector editions
Custom teddy bears for life's personal moments. Name, date, or message stitched directly into the fabric.
Best For
Gift brands, e-commerce DTC sellers, seasonal holiday launches
Turn your 2D brand mascot into a huggable 3D ambassador with Pantone-matched colors.
Best For
Retail chains, brand licensing, sports teams, entertainment IP
Traditional jointed teddy bears with mohair, alpaca, and hand-stitched features.
Best For
Luxury gift brands, museum shops, collector editions
src/components/TeddyBearShowcase.astro
PricingTiers
Three horizontal tier cards with proportional colored bars (terracotta/gold/walnut). Each card shows tier name, quantity range, per-unit pricing, includes list, best-for description, and CTA button. Most-popular tier gets a featured badge.
Starter
300 — 1,000 units
Best for
Market testing, Kickstarter fulfillment, limited collections
Includes
- Basic material options
- Standard embroidery (up to 6 colors)
- 1 revision round
- Basic hang tag & label
Growth
1,000 — 5,000 units
Best for
Growing brands, retail chains, recurring e-commerce orders
Includes
- Premium fabrics
- Advanced embroidery (up to 12 colors)
- 3 revision rounds
- Custom packaging design
- Setup fee waived
Volume
5,000 — 50,000+ units
Best for
Established brands, major retail programs
Includes
- All fabric options + custom dye-matching
- Full embroidery & printing integration
- Unlimited revision rounds
- Premium packaging
- Dedicated production line
src/components/PricingTiers.astro
CertBadgeWall
Varied-size certification badge grid. Uses CSS Grid with intentionally varied col-spans (col-span-1 and col-span-2). Each badge has a centered icon, name, and description with hover effects and a gradient accent bar.
EN71
European toy safety standard for EU market access.
ASTM F963
U.S. toy safety specification.
CPSIA
Lead content, phthalates, and third-party testing.
ISO 9001
Certified quality management system.
ISO 8124
International toy safety standard.
SGS
Third-party testing partner for independent verification.
src/components/CertBadgeWall.astro
FooterSection
Full site footer — logo, link columns, contact info, social icons, bottom bar.
FooterSection · continued
src/components/FooterSection.astro