| name | happycapy-design |
| description | HappyCapy Design System - a capybara-inspired UI design language for building warm, organic, nature-themed interfaces. Use this skill whenever building any frontend UI, web page, dashboard, component, or application that should follow the HappyCapy visual identity. Triggers include: (1) building a new web UI, dashboard, or page with the HappyCapy/capybara theme, (2) styling or theming any HTML/CSS/JS project with the HappyCapy design language, (3) needing color palettes, typography, spacing, or component patterns from HappyCapy, (4) creating status indicators, cards, badges, progress bars, or layouts in the capybara style, (5) applying light/dark mode theming consistent with the HappyCapy aesthetic, (6) any request mentioning "happycapy design", "capybara design", "capybara theme", or "happycapy style".
|
HappyCapy Design System
A nature-inspired, warm, organic UI design language drawn from capybara aesthetics: earth tones, wetland greens, river teals, and coral accents on a parchment-warm canvas.
Philosophy
- Warm, not sterile. Backgrounds use parchment tones (
#F9F6F1), not pure white.
- Nature palette. Colors named after natural elements: Coral, Wetland Moss, River Teal, Terra Cotta, Sandy Brown.
- Elegant serif headings + clean sans body.
Instrument Serif for display; system sans-serif for readability.
- Zero-dependency. Pure HTML/CSS/JS. No frameworks required. All styles via CSS custom properties.
- Progressive enhancement. Light mode default, dark mode via
[data-theme="dark"]. Reduced-motion respected.
Quick Start
Add Google Fonts and paste the CSS variables from references/tokens.md into :root. Or copy assets/happycapy-tokens.css directly.
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Courier+Prime&display=swap" rel="stylesheet">
Color Palette
| Name | Hex | Role |
|---|
| Coral | #FF6B4A | Primary accent, running/active, focus borders, CTA buttons |
| Coral Light | #FF7A5C | Hover variant, gradient end |
| Coral Hover | #e55a3a | Active/pressed state |
| Wetland Moss | #7D9B76 | Success, completed, connected |
| River Teal | #7BA3A8 | Idle, informational, secondary accent |
| Terra Cotta | #C67A6B | Error, failed, blocked, destructive actions |
| Sandy Brown | #9B8B7A | Pending, neutral, muted status |
| Warm Sand | #D4A76A | Warning, caution |
| Leader Purple | #8B5CF6 | Role indicator (leader/admin) |
| Teammate Blue | #3B82F6 | Role indicator (member/contributor) |
Backgrounds & Surfaces
| Token | Light | Dark |
|---|
| bg-primary | #F9F6F1 | #121212 |
| bg-secondary | #F0EEE7 | #1a1a1a |
| bg-card | #FFFFFF | #2a2a2a |
Text
| Token | Light | Dark |
|---|
| text-primary | #111827 | #ffffff |
| text-secondary | #6b7280 | #9ca3af |
| text-muted | #9ca3af | #6b7280 |
Borders
| Token | Light | Dark |
|---|
| border | #e5e7eb | #374151 |
| border-muted | #d1d5db | #4b5563 |
| border-focus | #FF6B4A | #FF6B4A |
Typography
- Headings:
'Instrument Serif', Georgia, serif -- weight 400, line-height 1.25
- Body:
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif -- line-height 1.5
- Monospace:
'Courier Prime', 'SF Mono', Monaco, 'Courier New', monospace
Scale: xs 0.75rem, sm 0.875rem, base 1rem, lg 1.125rem, xl 1.25rem, 2xl 1.5rem, 3xl 1.875rem, 4xl 2.25rem.
Labels/badges: uppercase + letter-spacing: 0.5px.
Spacing
8-point grid: 1 0.25rem, 2 0.5rem, 3 0.75rem, 4 1rem, 5 1.25rem, 6 1.5rem, 8 2rem, 10 2.5rem, 12 3rem.
Shadows
| Token | Value |
|---|
| shadow-sm | 0 1px 2px 0 rgb(0 0 0 / 0.05) |
| shadow-md | 0 4px 6px -1px rgb(0 0 0 / 0.1) |
| shadow-lg | 0 10px 15px -3px rgb(0 0 0 / 0.1) |
| shadow-xl | 0 20px 25px -5px rgb(0 0 0 / 0.1) |
| shadow-card | 0 1px 3px rgba(0,0,0,0.03) (dark: 0.1) |
| shadow-card-hover | 0 8px 24px rgba(0,0,0,0.1) (dark: 0.3) |
Radius
sm 0.125rem, md 0.375rem, lg 0.5rem, xl 0.75rem, 2xl 1rem, full 9999px.
Gradients
coral: linear-gradient(135deg, #FF6B4A 0%, #FF8A6B 100%)
success: linear-gradient(135deg, #7D9B76 0%, #8FAD82 50%, #9AAD7A 100%)
idle: linear-gradient(135deg, #7BA3A8 0%, #8EB3B8 100%)
warm-bg: linear-gradient(180deg, #F9F6F1 0%, #F0EEE7 100%)
progress: linear-gradient(90deg, #FF6B4A 0%, #7D9B76 100%)
Title text gradient: background: linear-gradient(135deg, coral, coral-light); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
Animations
- Transitions: fast 150ms, default 200ms, slow 300ms (all ease).
- Pulse ring: scale(1->2), opacity 0.4->0, 2s infinite. Active status dots.
- Pulse opacity: 1->0.5->1, 2s infinite. Running badges.
- Progress shimmer: translateX(-100%->100%), white gradient overlay, 1.5s infinite.
- Reduced motion: All collapse to 0.01ms via
prefers-reduced-motion: reduce.
Component Patterns (Summary)
For full specs see references/components.md.
- Cards: White surface, 1px border,
shadow-card, 4px left-border accent by status. Hover: translateY(-2px) + shadow-card-hover.
- Status Badges: Pill (
radius-full), uppercase, xs font, 10-15% opacity bg matching text color.
- Progress Bars:
radius-full, gradient fill (coral default, success on complete). Active shimmer overlay.
- Avatars: 36px circle, role-colored bg (purple=leader, blue=teammate), white initials.
- Buttons:
radius-lg, border, hover with bg-secondary + coral border.
Responsive
- Desktop: Max-width 1400px. Grid
repeat(auto-fill, minmax(320px, 1fr)).
- Tablet (<=1024px): Grid min 280px, panels 400px, reduced padding.
- Mobile (<=768px): Single column, full-width panels, stacked header, horizontal-scroll stats.
Scrollbar
8px, bg-secondary track, border-muted thumb, coral on hover. All radius-full.
Reference Files
references/tokens.md -- Copy-paste CSS custom properties for :root and [data-theme="dark"]references/components.md -- Full component specs: cards, badges, progress bars, avatars, panels, feeds, indicatorsassets/happycapy-tokens.css -- Standalone CSS file with all tokens, import directly into any project
