0
Click to Enlarge
Botanical Organic Design System
Use when integrating a botanical/organic serif design system into an existing codebase. Triggers when building, redesigning, or refactoring components, pages, or features with a nature-inspired, soft and sophisticated aesthetic (Playfair Display headings, sage/earth-tone color palette, arched imagery, paper-grain texture overlay).
README
Botanical Organic Design System
A frontend design system skill that helps you integrate a nature-inspired, editorial-serif aesthetic into an existing codebase — visually consistent, accessible, and idiomatic to your stack.
What this skill does
When triggered, this skill turns Claude into an expert frontend engineer / UI-UX designer that:
- Analyzes your current tech stack, design tokens, and component architecture before writing any code.
- Asks focused questions to scope the work (single component redesign, full refactor, or new pages built from scratch).
- Proposes an implementation plan centered on reusable, composable components and centralized design tokens.
- Applies the Botanical / Organic Serif visual language consistently: earthy color palette, Playfair Display headlines, soft rounded shapes, arch-style imagery, paper-grain texture, and slow, graceful motion.
- Preserves accessibility and responsive behavior throughout.
When to use it
Use this skill whenever you're:
- Building a new landing page, marketing site, or product UI with a warm, organic, high-end wellness / editorial feel.
- Refactoring existing components to match a botanical design system.
- Need consistent design tokens (colors, typography, radius, shadows, motion) applied across a codebase instead of one-off styling.
Design system highlights
| Category | Key values |
|---|---|
| Background | #F9F8F4 (Warm Alabaster) |
| Foreground | #2D3A31 (Deep Forest Green) |
| Primary | #8C9A84 (Sage Green) |
| Secondary | #DCCFC2 (Soft Clay) |
| Accent / Interactive | #C27B66 (Terracotta) |
| Headings | Playfair Display (serif, 600/700) |
| Body | Source Sans 3 (400/500) |
| Radius | rounded-3xl cards, rounded-full buttons |
| Motion | duration-500–duration-1000, ease-out |
Non-generic signature elements
- Arch imagery — images cropped into Roman-arch shapes via
border-radius/clip-path - Paper grain overlay — mandatory subtle SVG noise texture on the base background
- Staggered grid — every second card offset vertically for organic rhythm
- Italic emphasis — Playfair Display italics on key words within headlines
Notes
- Mobile-first responsive strategy included (breakpoints, spacing scale-down, touch target sizing).
- Icons follow Lucide React with thin stroke weight (
1.5) in Forest Green or Sage. - Accessibility: soft Sage-green focus rings (
ring-[#8C9A84]), no harsh blue defaults, minimum 44px touch targets on all interactive elements.