Design Library
Brand tokens, type specimens, UI components, and accessibility guidelines for PetalsWings.
Logo Suite
All approved logo variants for PetalsWings. Each variant has a specific use case — use the right one for the context.
Primary Logo
The full circle lockup — iris, "Petals WINGS", and tagline. Default for most uses.
Brandmark
The iris illustration alone — watermarks, small placements, patterns, merchandise.
Wordmark
Text-only — "Petals WINGS" with the knockout overlap preserved. For footers, horizontal layouts, invoices.
Stacked Badge
Self-contained circle badge with iris + text inside. For signage, t-shirts, stickers, embroidery.
Monogram & Badge
The "PW" monogram — standalone and in a circle badge. For favicons, social profiles, watermarks, tiny placements.
Social & Favicon
Pre-sized assets for social media profiles, OG cards, and browser favicons.
Color Palette
Monochromatic purple with botanical green accents — extracted directly from the P&W logo.
How colors pair in real UI contexts — all combinations below pass WCAG AA.
Typography
Lora for warm editorial elegance, DM Sans for modern readability.
Weights: 400 Regular · 500 Medium · 600 Semi-Bold · 700 Bold + Italics
Use for: Hero headings, section titles, pull quotes, product names, prices
Why: Contemporary serif with calligraphic roots — warm, readable, and approachable. Balances elegance with friendliness, perfect for a family farm brand.
Weights: 400 Regular · 500 Medium · 600 Semi-Bold · 700 Bold
Use for: Body text, navigation, buttons, labels, tags, captions
Why: Clean geometric sans — pairs perfectly with Lora, great readability at all sizes.
Voice & Tone
How PetalsWings speaks — rooted in Bonnie's passion, earned through two decades of growing.
The Origin
"Inspired after 9/11, I began growing bearded iris to create a red, white, and blue garden. What started with 3 plants has grown into 700+ varieties of Bearded Iris. With 20,000+ orders filled, I proudly maintain a 5-star rating."
— Bonnie, Founder
Brand Voice
PetalsWings is Bonnie — warm, knowledgeable, and genuinely proud of what she grows. Not corporate. Not trendy. Earned.
Bonnie loves irises. That love comes through in every word — not as hype, but as genuine enthusiasm from someone who's been in the dirt for 20+ years.
700+ varieties doesn't happen by accident. She knows irises inside-out — growth habits, soil needs, bloom times, fragrance profiles. Share that expertise generously.
This isn't a faceless farm. It's Bonnie, her family, and her friends — real people who work the garden together. Write like you're talking to a neighbor.
20,000+ orders. 5-star rating. 700+ varieties. Let the numbers speak — don't oversell. The track record IS the trust signal.
Tone Spectrum
The same voice adapts to context — warmer for storytelling, crisper for product info.
Do & Don't
- ✓ "What started with 3 plants has grown into 700+ varieties"
- ✓ "We've been growing together for over two decades"
- ✓ "This variety reblooms in fall — twice the beauty in one garden"
- ✓ "Bonnie hand-selects every rhizome before it ships"
- ✓ Use "we" and "our garden" — it's a family operation
- ✓ Share real growing tips — this is expertise, not marketing
- ✗ "Premium luxury botanical curations" — too corporate
- ✗ "Shop our exclusive collection!" — too salesy
- ✗ "Best irises on the internet" — unearned claims
- ✗ Trendy millennial/Gen-Z slang — doesn't fit the heritage
- ✗ Overly formal academic tone — Bonnie talks to neighbors
- ✗ Generic placeholder copy — every word should feel like PetalsWings
Trust Numbers
These aren't marketing claims — they're Bonnie's real track record. Use them.
Sample Copy
Reference copy in the PetalsWings voice — use these as starting points.
Where Heritage Blooms
Inspired by a red, white, and blue garden after 9/11 — Bonnie turned three iris plants into 700+ varieties and a family farm loved by thousands.
It started with a moment of hope. After September 11th, Bonnie planted her first irises — red, white, and blue, a small garden of resilience. Those three plants became a calling. Two decades later, PetalsWings is home to over 700 bearded iris varieties, tended by Bonnie, her family, and her friends. With 20,000 orders shipped and a 5-star rating earned one garden at a time, this is still what it always was — a labor of love.
Tall Bearded Iris stand 27½ inches and above — the queens of the iris garden. These are the classic showstoppers that stop neighbors mid-walk. Plant them in full sun, well-drained soil, and give them room to breathe. They'll reward you every spring.
Headings
Heading scale using Lora display font — consistent sizing from hero down to sub-sections.
Weight: 400
Line-h: 1.1
Weight: 400
Line-h: 1.2
Weight: 500
Line-h: 1.3
Weight: 600
Line-h: 1.35
Weight: 600
Line-h: 1.4
Weight: 700
Letter-sp: 1px
Paragraphs
Body text styles at actual sizes — DM Sans across all paragraph roles.
Line-h: 1.78
Weight: 400
Line-h: 1.6
Weight: 400
Letter-sp: 2px
Weight: 600 · Caps
Line-h: 1.65
Weight: 400
Links
Four link patterns — hover each to see the interaction state.
Rich Text
A sample rich text block showing how body copy, headings, lists, and blockquotes look together in the PetalsWings voice.
About Our Iris Farm
PetalsWings began in 1985 when the Hartley family planted their first hundred iris rhizomes on a small plot in central Ohio. What started as a weekend hobby quickly grew into a passion — and then, quietly, into something more. Today we grow over 200 named varieties of bearded irises across twelve acres of gently rolling farmland.
"There's nothing quite like watching an iris open for the first time. It's patient work, but the reward is extraordinary."
— Carol Hartley, Co-Founder
What Makes Us Different
Every rhizome we ship is hand-dug from our fields, trimmed, inspected, and labeled by our family and a small seasonal crew. We don't warehouse inventory — your order ships fresh from the farm, which means better establishment rates and healthier plants in your garden.
- Over 200 registered iris varieties, including rare heritage cultivars
- All orders ship July through September — peak planting season
- Free shipping on orders over $75
- Satisfaction guaranteed — we stand behind every rhizome
Growing Guides & Support
New to growing irises? Our free growing guides cover everything from planting depth to dividing mature clumps. We also offer a seasonal newsletter with bloom reports, new variety announcements, and care reminders timed to your growing zone.
- Choose your varieties and add to cart
- We confirm your order and schedule harvest
- Rhizomes ship fresh in late summer
- Plant in late August or early September
- Enjoy blooms the following spring
Forms
Styled inputs, textareas, selects, and checkboxes — all production-ready and brand-consistent. Focus states use Primary purple ring.
We'll reply within 1–2 business days.
Bloom reports, new arrivals, and care reminders. Unsubscribe anytime.
Testimonial Components
Carousel-style testimonials with botanical vine accent, slide animation, and arrow navigation. Use for customer reviews on Homepage and About page.
Anatomy
| Element | Token / Value |
|---|---|
| Section background | var(--color-surface) — #F3EEF7 |
| Author name | Lora 600, 1.5rem, var(--color-text) |
| Author meta (zone/title) | DM Sans 500, 0.875rem, var(--color-text-light) |
| Quote text | Lora italic, 1.125rem, line-height 1.7, var(--color-text). Large ::before curly quote (4rem, var(--color-primary) at 35% opacity). |
| Star rating | #D4A017 (gold), 1.1rem, letter-spacing 0.08em |
| Arrow buttons | 40×40px circle, 2px border var(--color-accent-dark), hover: sage fill + white icon |
| Vine accent | SVG, #8B9E7C, 18% opacity, positioned between author + quote columns. Hidden on mobile. |
| Slide animation | Horizontal slide — outgoing: slides out 40px + fades. Incoming: slides in 40px + fades. Duration 0.45s, ease. |
| Layout | 2-column grid (1fr author / 2fr quote), max-width 800px centered. Stacks to 1-col on ≤600px. |
Preview
Usage Notes
- Minimum 3 testimonials for the carousel to feel balanced
- Include zone/location (not just name) — gardeners trust zone-matched reviews
- Keep quotes under 2 lines on desktop for visual consistency
- Vine SVG is decorative only —
aria-hidden="true", hidden on mobile - Arrow buttons need
aria-labelfor screen readers - Carousel region needs
aria-live="polite"for slide change announcements - Slide animation: Horizontal slide (not fade) — outgoing element translates 40px in direction of travel + opacity 0, incoming translates from 40px + opacity 1. Duration 0.45s ease.
- Do NOT auto-play — gardeners read slowly, auto-advancing frustrates
Icon System
Google Material Symbols Outlined — free, open-source, 2,500+ icons. Curated set below with exact usage locations. White on sage circles. Dev name in mono.
Rule: Never mix icon styles (no Rounded, Sharp, or Filled). If a concept isn't in this curated set, check the full library and add it here first before using.
Spacing Tokens
Consistent rhythm throughout the site — four semantic spacing values cover every layout need.
Component Previews
How the design system comes together in real components — navigation, hero, trust bar, and product cards.
Navigation
Trust Bar
Hero Section
Where Heritage
Blooms
Hand-selected bearded irises grown with generations of care. From our fields to your garden.
Product Cards
Contrast Ratios
WCAG 2.1 AA compliance audit — only passing combinations shown. Failed pairs (sage green on light backgrounds) have been removed from the approved palette usage.
| Preview | Foreground | Background | Ratio | AA Normal | AA Large | Notes |
|---|---|---|---|---|---|---|
| Aa | Text #1A1A2E | Background #FAFAF8 | 16.32:1 | Pass | Pass | Excellent — main body text |
| Aa | Text #1A1A2E | Surface #F3EEF7 | 14.93:1 | Pass | Pass | Excellent — card text on surface |
| Aa | Text #1A1A2E | White #FFFFFF | 17.06:1 | Pass | Pass | Maximum — white card body text |
| Aa | Text Light #6B6B80 | Background #FAFAF8 | 4.97:1 | Pass | Pass | Good — captions, meta text |
| Aa | Text Light #6B6B80 | Surface #F3EEF7 | 4.55:1 | Pass | Pass | Marginal pass — avoid tiny text |
| Aa | Text Light #6B6B80 | White #FFFFFF | 5.20:1 | Pass | Pass | Good — muted text on white cards |
| Aa | Primary #7B5EA7 | Background #FAFAF8 | 5.02:1 | Pass | Pass | Good — links and UI on page bg |
| Aa | Primary #7B5EA7 | White #FFFFFF | 5.25:1 | Pass | Pass | Good — links on white cards |
| Aa | Primary Dark #5C4580 | Background #FAFAF8 | 7.68:1 | Pass | Pass | Strong — headings on page bg |
| Aa | Primary Dark #5C4580 | Surface #F3EEF7 | 7.02:1 | Pass | Pass | Strong — headings on surface cards |
| Aa | White #FFFFFF | Primary #7B5EA7 | 5.25:1 | Pass | Pass | Good — white text on purple buttons |
| Aa | White #FFFFFF | Primary Dark #5C4580 | 8.02:1 | Pass | Pass | Strong — header, dark UI elements |
| Aa | White #FFFFFF | Accent Dark #6B7E5C | 4.41:1 | Large Only | Pass | Large text / headings / icons only — use Accent Dark for all green text |
| Aa | Secondary #C4A8D8 | Navy #1A1A2E | 8.07:1 | Pass | Pass | Excellent — footer lavender on dark |
| – | Border #E2D8EC | Background #FAFAF8 | 1.32:1 | Decorative | Decorative | Border color — never used for text, purely structural |
CSS Variables
Copy-paste ready — these power the entire design system
/* ===== PetalsWings Design Tokens ===== */
:root {
/* Colors */
--color-primary: #7B5EA7; /* iris bloom violet */
--color-primary-dark: #5C4580; /* hover, headings */
--color-secondary: #C4A8D8; /* soft lavender */
--color-accent: #8B9E7C; /* sage — decorative only */
--color-accent-dark: #6B7E5C; /* sage — large text / icons */
--color-text: #1A1A2E; /* navy-black body copy */
--color-text-light: #6B6B80; /* muted captions */
--color-bg: #FAFAF8; /* warm white canvas */
--color-surface: #F3EEF7; /* lavender card bg */
--color-border: #E2D8EC; /* dividers / outlines */
/* Typography */
--font-display: 'Lora', Georgia, serif;
--font-body: 'DM Sans', system-ui, sans-serif;
/* Type Scale */
--text-hero: 4rem; /* 64px */
--text-section: 2.5rem; /* 40px */
--text-card: 1.5rem; /* 24px */
--text-body: 1.125rem; /* 18px */
--text-small: 0.875rem; /* 14px */
--text-label: 0.75rem; /* 12px */
/* Spacing */
--space-section: 80px; /* between sections */
--space-card: 32px; /* card padding */
--space-grid: 24px; /* grid gaps */
--space-component: 16px; /* inline spacing */
}