Internal · Development Reference
Lucky Cat Gardens Design System
The visual source of truth extracted from the approved homepage. This page is for development consistency only — it does not appear in public navigation.
01
Color Tokens
The approved Lucky Cat palette. Use these Tailwind tokens — never hardcode hex values in JSX.
bg-brand
Primary green — headings, dark sections, primary CTA
bg-brand-light
Hover state for primary buttons
bg-brand-sage
Readable sage — eyebrow TEXT, labels, accents, focus rings (WCAG AA on cream/white)
bg-brand-sageLight
Light sage — backgrounds, fills, sage button backgrounds, decorative tints
bg-brand-muted
Muted sage — secondary text only where contrast is sufficient
bg-brand-cream
Cream background — page surface, light cards
bg-white
White — card surfaces
Two-tier sage system: brand-sage (#62733D) is for text and functional accents — eyebrows, labels, focus rings. brand-sageLight (#B8CC84) is for backgrounds and fills — sage buttons, tints, decorative areas. Never use the light sage for small text on cream/white.
ON CREAM (#FFFEFA)
ON WHITE (#FFFFFF)
02
Typography
Two-font system: Newsreader for display/editorial headings, Inter for body, UI, and functional elements. Utility classes defined in index.css.
Two-font system: Newsreader (warm editorial serif) for hero, H1, H2, and editorial H3. Inter (clean sans-serif) for body, navigation, buttons, cards, forms, and metadata. The serif provides personality; the sans-serif provides clarity.
text-displayFinding Peace in the Garden
Newsreader 500 · 42px → 68px · leading 1.05 · tracking tight
text-h1Start Here
Newsreader 500 · 38px → 52px · leading 1.1
text-h2What do you want to do?
Newsreader 600 · 30px → 40px · leading 1.15
text-h3-editorialA real garden, shared honestly
Newsreader 500 · 26px → 28px · leading 1.25
text-h3Cool-Season Planting Guide
Inter 600 · 20px → 24px · leading 1.3
text-body-lgPractical help for growing food, building a productive garden, solving problems, and enjoying what you harvest.
Inter 400 · 18px · leading 1.6
text-bodyJoin the newsletter for seasonal tips, new guides, and free resources — sent now and then, never spam. Long-form articles stay comfortable at this size and line height.
Inter 400 · 17px · leading 1.7
text-body-smNo spam, ever. Unsubscribe anytime.
Inter 400 · 14px · leading 1.55
text-eyebrowLUCKY CAT GARDENS
Inter 600 · 12px · uppercase · tracking 0.25em · brand-sage
Article Typography Example
My Attack on Aphids
Grow Food · September 12, 2025 · 8 min read
Aphids are one of the most common garden pests, and dealing with them doesn't have to mean reaching for harsh chemicals. Here's the action plan I use in my own garden.
Identify the Problem Early
The sooner you spot aphids, the easier they are to manage. Check the undersides of leaves on new growth — that's where they congregate. Look for curled or distorted leaves, sticky residue, or ants climbing your plants.
Signs to Watch For
Curled leaves, sticky stems, and stunted growth are your early warning system. A strong spray of water can knock aphids off, but for persistent infestations, neem oil and castile soap are your best organic tools.
Recipe Typography Example
Fresh Zucchini Bread
Garden Kitchen · 45 min · Makes 1 loaf
When the garden gives you too much zucchini, this moist, lightly sweetened bread is the answer. It freezes well and makes a great gift.
Ingredients
- 2 cups grated zucchini (about 2 medium)
- 1½ cups all-purpose flour
- ¾ cup sugar
- ⅓ cup melted butter
- 2 large eggs
Instructions
- Preheat oven to 350°F. Grease a 9×5 loaf pan.
- Grate zucchini and squeeze out excess moisture.
- Mix dry ingredients in one bowl, wet in another.
- Combine, fold in zucchini, pour into pan.
- Bake 50–60 minutes until a toothpick comes out clean.
03
Buttons
Consistent height, padding, radius, and type treatment. Same component for internal links, external links, and <button>.
On light background
On dark background
States & sizes
04
Cards
Same visual language, varied by content type. Hover lift + border highlight. Photography-forward.
Grow Food
My Attack on Aphids
A practical action plan for dealing with aphids in your garden.
Grow Food
Vegetables, herbs, and fruits you can grow at home.
Cool-Season Planting Guide
Zone-specific planting calendar.
DownloadGarden Projects
DIY Raised Garden Bed
Fresh Zucchini Bread
A simple harvest recipe.
05
Forms
Matching the approved Contact and Garden Club patterns. Accessible labels, honeypot protection, inline error/success states.
We'll never share your email.
Thank you! Your message has been received.
06
Section Patterns
A small library of strong, reusable layout patterns — not a bespoke layout per page.
Section Header (left)
Seasonal
Cool-Season Planting Guide
Everything you need to know about fall and winter gardens in Zone 9b.
CTASection — dark variant
CTASection — cream variant
07
Editorial Split
Image/text two-column. Image left or right. Protects focal points with focalPointX/Y.
Why Lucky Cat
A real garden, authentic photography
Lucky Cat Gardens is built around a real garden. Every guide, recipe, and project comes from hands-in-the-dirt experience.
Read our story08
Spacing & Content Widths
Consistent rhythm without excessive gaps. Article text stays at a comfortable reading width.
Spacing Scale
py-16 md:py-2464 / 96pxpx-624pxgap-6 md:gap-824 / 32pxmb-3 → mb-612 → 24pxmb-7 → mb-828 → 32pxp-5 → p-820 → 32pxContent Widths
.container-siteLanding pages, section content
.container-narrowEditorial splits, about pages
.container-readingArticle body, long-form text
.container-formContact form, newsletter signup
09
Photography Rules
Authentic Lucky Cat photos only. No stock, no AI. Protect faces and garden details.
16/9
Wide landscape — heroes, full-width features
4/3
Editorial — splits, pathway cards
3/2
Article featured images
1/1
Square — detail crops, recipe thumbnails
3/4
Portrait — about, personal
Full
Full bleed — hero photography
Focal protection: use object-position or the Image component's focalPointX/Y to keep faces and garden details visible. Never crop a face just to fit a container. Use fittingType="fit" when the full image must be visible (resource graphics); fittingType="fill" for editorial crops.
10
Accessibility & Performance
Accessibility
- One H1 per page; semantic heading hierarchy
- Visible focus ring (brand-sage, 2px, offset)
- All form fields have associated labels
- Descriptive alt text on all content images
- Touch targets ≥ 44px on mobile
- Never rely on color alone for state
Performance
- Use Image component — auto WebP + responsive srcset
- Lazy-load below-the-fold; eager-load LCP hero
- Never serve a 1–6MB master for a 250px card
- Video: thumbnail-first, never autoplay
- No animation libraries; CSS transitions only
- Respect prefers-reduced-motion
11
Reusable Components
Created in src/components/garden/ for Phase 4 and beyond. The homepage is NOT refactored — these are new, ready for use.
Button.jsxGardenButton (6 variants), ArrowLinkSectionHeader.jsxSectionHeader (eyebrow + title + intro)Cards.jsxArticleCard, TopicCard, ResourceCard, VideoCard, RecipeCardCTASection.jsxCTASection (dark / cream / sage variants)EditorialSplit.jsxEditorialSplit (image left/right, aspect ratios)FormFields.jsxGardenInput, GardenTextarea, GardenLabel, FormHelper, FormError, FormSuccess, Honeypot12
Footer Example
Dark green background, light sage section labels, cream body text. Light sage is used selectively for hierarchy — not all copy is sage.
Helping people grow food, slow down, and find peace in the garden.
Explore
- Start Here
- Grow Food
- Garden Projects
- Resources
- Videos
- Blog
Follow Along
We Grow It. We Build It. We Eat It.
© 2026 Lucky Cat Gardens. All rights reserved.
Footer sage treatment: Section labels use text-brand-sageLight (#B8CC84) for readability against the dark green background. Body copy uses text-brand-cream/80 and text-brand-cream/60 for hierarchy. The light sage is used selectively — only for section labels and emphasis, not for all copy.
Lucky Cat Gardens Design System · Phase 3 · Not linked in public navigation
Back to homepage