happycapy-design

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, indicators
• assets/happycapy-tokens.css -- Standalone CSS file with all tokens, import directly into any project