picasso-skill 1.2.0 → 1.3.0

package/skills/picasso/references/style-presets.md

@@ -0,0 +1,502 @@
+# Style Presets Reference
+
+22 curated visual presets for AI agents building frontend interfaces. Each preset is a complete design direction with specific values ready to apply.
+
+---
+
+## Dark Themes
+
+### 1. Bold Signal
+
+**Mood:** Confident, high-impact, modern SaaS.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#0a0a0a` to `#1a1a2e` gradient | Page background |
+| Primary | `#ff6b35` | CTAs, highlights |
+| Text | `#f5f5f5` | Headings, body |
+| Muted | `#8a8a8a` | Secondary text |
+| Surface | `#1e1e2e` | Cards, panels |
+
+**Fonts:** Archivo Black (headings) + Space Grotesk (body)
+**Border Radius:** `8px`
+**Signature Element:** Full-bleed orange gradient bar across the top of hero sections. Oversized display type (80px+) with tight letter-spacing (-0.03em).
+
+---
+
+### 2. Electric Studio
+
+**Mood:** Bold, professional, design studio portfolio.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#0d1117` | Main background |
+| Primary | `#2563eb` | Accent, links |
+| Secondary | `#ffffff` | Split panel, text on dark |
+| Surface | `#161b22` | Cards |
+| Border | `#30363d` | Dividers |
+
+**Fonts:** Manrope (all weights, 300-800)
+**Border Radius:** `12px`
+**Signature Element:** Split-panel layout with white left panel and dark blue right panel. Asymmetric grid with large imagery.
+
+---
+
+### 3. Creative Voltage
+
+**Mood:** Energetic, retro-modern, creative agency.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#0f0f0f` | Base |
+| Primary | `#3b82f6` | Electric blue accents |
+| Accent | `#facc15` | Neon yellow highlights |
+| Text | `#e4e4e7` | Body copy |
+| Surface | `#1a1a1a` | Cards, code blocks |
+
+**Fonts:** Syne (headings, 700-800) + Space Mono (body, code)
+**Border Radius:** `4px` (sharp, technical feel)
+**Signature Element:** Monospace body text with electric blue underlines on links. Yellow highlight markers on key phrases. Visible grid lines in backgrounds.
+
+---
+
+### 4. Dark Botanical
+
+**Mood:** Elegant, sophisticated, luxury editorial.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#1a1a1a` | Base |
+| Primary | `#c9a96e` | Gold accents |
+| Secondary | `#8b6f4e` | Warm brown |
+| Text | `#e8e0d5` | Warm white body text |
+| Surface | `#242424` | Cards |
+| Accent | `#4a6741` | Subtle green touches |
+
+**Fonts:** Cormorant (headings, italic for emphasis) + IBM Plex Sans (body, 300-400)
+**Border Radius:** `2px` (near-square, editorial)
+**Signature Element:** Thin gold horizontal rules between sections. Large italic serif pull quotes. Generous line-height (1.8) for body text.
+
+---
+
+## Light Themes
+
+### 5. Notebook Tabs
+
+**Mood:** Editorial, organized, content-heavy layouts.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#faf7f2` | Cream paper |
+| Primary | `#2d2d2d` | Text |
+| Tab Blue | `#3b82f6` | Active tab |
+| Tab Green | `#22c55e` | Category tab |
+| Tab Orange | `#f97316` | Category tab |
+| Tab Purple | `#a855f7` | Category tab |
+| Border | `#e5e0d8` | Dividers, card edges |
+
+**Fonts:** Bodoni Moda (headings, display) + DM Sans (body, UI)
+**Border Radius:** `8px` body, `20px` tabs
+**Signature Element:** Colored tab navigation at the top of content sections. Each tab is a rounded pill with its category color. Paper-texture background (subtle noise overlay at 3% opacity).
+
+---
+
+### 6. Pastel Geometry
+
+**Mood:** Friendly, approachable, startup SaaS.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#ffffff` | Base |
+| Primary | `#6366f1` | Indigo CTAs |
+| Surface | `#f0f0ff` | Light indigo cards |
+| Accent Pink | `#f9a8d4` | Badges, tags |
+| Accent Green | `#86efac` | Success states |
+| Accent Yellow | `#fde68a` | Warnings, highlights |
+| Text | `#1e1b4b` | Dark indigo headings |
+| Body | `#4b5563` | Gray body text |
+
+**Fonts:** Plus Jakarta Sans (all, 400-700)
+**Border Radius:** `16px` cards, `999px` pills/badges
+**Signature Element:** Rounded pill-shaped buttons and badges. Pastel-tinted cards with no visible border (background color differentiation only). Geometric shapes as decorative accents (circles, rounded rectangles) in pastel colors.
+
+---
+
+### 7. Split Pastel
+
+**Mood:** Playful, modern, creative product.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Left Panel | `#fde8e0` | Peach |
+| Right Panel | `#e8e0fd` | Lavender |
+| Primary | `#4f46e5` | CTAs on both panels |
+| Text Dark | `#1e1b4b` | Headings |
+| Text Body | `#6b7280` | Body copy |
+| White | `#ffffff` | Cards, inputs |
+
+**Fonts:** Outfit (all, 300-700)
+**Border Radius:** `12px`
+**Signature Element:** Vertical 50/50 split layout with two pastel background colors. Content floats in white cards on top of the colored panels. Smooth transitions between panels on scroll.
+
+---
+
+### 8. Vintage Editorial
+
+**Mood:** Witty, personality-driven, magazine/blog.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#faf5eb` | Cream/parchment |
+| Primary | `#c41e3a` | Red accents |
+| Text | `#1a1a1a` | Headlines |
+| Body | `#3d3d3d` | Body copy |
+| Accent | `#2a5a8c` | Links |
+| Geometric | `#f4c542` | Decorative shapes |
+
+**Fonts:** Fraunces (headings, optical-size variable) + Work Sans (body, 400-500)
+**Border Radius:** `0px` (sharp edges, editorial grid)
+**Signature Element:** Geometric shapes (triangles, circles) as decorative elements overlapping content. Visible column grid. Drop caps on article openings. Red horizontal rules.
+
+---
+
+## Specialty Themes
+
+### 9. Neon Cyber
+
+**Mood:** Futuristic, cyberpunk, tech-forward.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#0a0a0f` | Near-black |
+| Primary | `#00ffff` | Cyan neon |
+| Secondary | `#ff00ff` | Magenta neon |
+| Accent | `#ffff00` | Yellow highlights |
+| Text | `#e0e0e0` | Body text |
+| Surface | `#12121a` | Cards |
+
+**Fonts:** Clash Display (headings, 600-700) + Satoshi (body, 400-500)
+**Border Radius:** `4px`
+**Signature Element:** Neon glow effects via `box-shadow: 0 0 20px rgba(0, 255, 255, 0.3)`. Particle or grid backgrounds using CSS or canvas. Glitch-effect text on hover. Thin cyan borders on cards.
+
+---
+
+### 10. Terminal Green
+
+**Mood:** Developer, hacker, retro terminal.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#0d1117` | Terminal black |
+| Primary | `#00ff41` | Terminal green |
+| Dimmed | `#008f11` | Inactive green |
+| Text | `#00ff41` | All text |
+| Cursor | `#00ff41` | Blinking cursor |
+| Surface | `#161b22` | Code blocks |
+
+**Fonts:** JetBrains Mono (everything, 400-700)
+**Border Radius:** `0px`
+**Signature Element:** Scan-line overlay (repeating 2px transparent/1px rgba(0,0,0,0.1) gradient). Blinking cursor animation on headings. All text is monospace. `> ` prefix on list items. Commands styled as terminal input with `$` prompt.
+
+```css
+.scanlines {
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.1) 2px,
+    rgba(0, 0, 0, 0.1) 3px
+  );
+}
+.cursor::after {
+  content: '|';
+  animation: blink 1s step-end infinite;
+}
+```
+
+---
+
+### 11. Swiss Modern
+
+**Mood:** Minimal, Bauhaus-inspired, design systems.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#ffffff` | Clean white |
+| Primary | `#000000` | Text, lines |
+| Accent | `#e63946` | Red, used sparingly |
+| Gray | `#6b7280` | Secondary text |
+| Light | `#f3f4f6` | Backgrounds, cards |
+
+**Fonts:** Archivo (headings, 500-700) + Nunito (body, 400-600)
+**Border Radius:** `0px`
+**Signature Element:** Visible grid system (light gray grid lines as background). Bold red accent used for one element per section only. Large whitespace. Strong typographic hierarchy with 4:1+ size ratio between heading and body. Left-aligned everything.
+
+---
+
+### 12. Paper & Ink
+
+**Mood:** Literary, editorial, long-form reading.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#fefdfb` | Off-white paper |
+| Text | `#2c2c2c` | Rich black |
+| Accent | `#8b4513` | Saddle brown links |
+| Muted | `#9ca3af` | Captions, metadata |
+| Rule | `#d1cdc7` | Horizontal rules |
+| Drop Cap | `#1a1a1a` | Initial letter |
+
+**Fonts:** Cormorant Garamond (headings, italic/bold) + Source Serif 4 (body, 400)
+**Border Radius:** `0px`
+**Signature Element:** Large drop caps (first letter of opening paragraph, 4-line height, float left). Pull quotes in oversized italic serif with thin top/bottom rules. Wide margins (max-width: 680px for body text). Generous vertical rhythm (margin-bottom: 1.5em on paragraphs).
+
+---
+
+## Theme Factory Collection
+
+### 13. Ocean Depths
+
+**Mood:** Calm, professional, data-focused.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#1a2332` | Deep navy |
+| Primary | `#2d8b8b` | Teal actions |
+| Secondary | `#a8dadc` | Seafoam highlights |
+| Text | `#e8edf2` | Light body text |
+| Surface | `#223044` | Cards |
+
+**Fonts:** DejaVu Sans (all)
+**Border Radius:** `8px`
+**Signature Element:** Subtle wave-pattern dividers between sections using SVG. Teal-to-seafoam gradient on primary buttons.
+
+---
+
+### 14. Sunset Boulevard
+
+**Mood:** Warm, cinematic, lifestyle/travel.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#fffaf5` | Warm white |
+| Primary | `#e76f51` | Burnt orange CTAs |
+| Secondary | `#f4a261` | Coral accents |
+| Dark | `#264653` | Deep teal text |
+| Surface | `#fff5ed` | Warm tinted cards |
+
+**Fonts:** DejaVu Serif (headings) + DejaVu Sans (body)
+**Border Radius:** `12px`
+**Signature Element:** Warm gradient overlays on images (orange to transparent). Rounded image frames. Sunset-warm color temperature across all neutrals.
+
+---
+
+### 15. Forest Canopy
+
+**Mood:** Natural, sustainable, organic brand.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#faf9f6` | Ivory |
+| Primary | `#2d4a2b` | Forest green |
+| Secondary | `#7d8471` | Sage |
+| Text | `#2d4a2b` | Dark green |
+| Surface | `#f0efe8` | Muted green-gray cards |
+
+**Fonts:** FreeSerif (headings) + DejaVu Sans (body)
+**Border Radius:** `6px`
+**Signature Element:** Leaf/botanical line-art illustrations as section dividers. Green duotone image treatment. Linen texture overlay at 2% opacity.
+
+---
+
+### 16. Golden Hour
+
+**Mood:** Artisan, craft, handmade marketplace.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#faf6f0` | Warm cream |
+| Primary | `#f4a900` | Mustard |
+| Secondary | `#c1666b` | Terracotta/rose |
+| Dark | `#4a403a` | Chocolate text |
+| Surface | `#f5f0e6` | Warm cards |
+
+**Fonts:** FreeSans (all)
+**Border Radius:** `8px`
+**Signature Element:** Mustard-yellow highlight strips behind headings (like marker highlight). Terracotta badges and tags. Warm photography filters.
+
+---
+
+### 17. Arctic Frost
+
+**Mood:** Clean, precise, corporate/fintech.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#f8fafc` | Cold white |
+| Primary | `#4a6fa5` | Steel blue |
+| Secondary | `#d4e4f7` | Ice blue surfaces |
+| Neutral | `#c0c0c0` | Silver borders |
+| Text | `#1e293b` | Slate text |
+
+**Fonts:** DejaVu Sans (all)
+**Border Radius:** `6px`
+**Signature Element:** Frosted glass cards (`backdrop-filter: blur(10px); background: rgba(255,255,255,0.7)`). Thin silver borders. Blue-tinted shadows.
+
+---
+
+### 18. Desert Rose
+
+**Mood:** Feminine, wellness, beauty brand.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#fdf8f6` | Rose white |
+| Primary | `#d4a5a5` | Dusty rose |
+| Secondary | `#b87d6d` | Clay |
+| Dark | `#5d2e46` | Burgundy text |
+| Surface | `#f9f0ed` | Blush cards |
+
+**Fonts:** FreeSans (all)
+**Border Radius:** `16px`
+**Signature Element:** Soft rounded shapes everywhere. Dusty rose gradient backgrounds. Generous padding and whitespace. Floating circular image crops.
+
+---
+
+### 19. Tech Innovation
+
+**Mood:** Cutting-edge, AI/ML product, developer tool.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#1e1e1e` | Dark gray |
+| Primary | `#0066ff` | Electric blue |
+| Accent | `#00ffff` | Neon cyan highlights |
+| Text | `#e0e0e0` | Light gray body |
+| Surface | `#2a2a2a` | Cards |
+| Success | `#00ff88` | Green accents |
+
+**Fonts:** Inter (all, variable weight)
+**Border Radius:** `8px`
+**Signature Element:** Electric blue glow on interactive elements. Cyan code syntax highlighting. Dark glass morphism cards. Animated gradient borders on featured sections.
+
+```css
+.glow-card {
+  border: 1px solid rgba(0, 102, 255, 0.3);
+  box-shadow: 0 0 15px rgba(0, 102, 255, 0.1),
+              inset 0 0 15px rgba(0, 102, 255, 0.05);
+}
+```
+
+---
+
+### 20. Botanical Garden
+
+**Mood:** Fresh, educational, nature-forward.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#f5f3ed` | Cream |
+| Primary | `#4a7c59` | Fern green |
+| Accent | `#f9a620` | Marigold |
+| Text | `#2c3e2d` | Dark green |
+| Surface | `#eceade` | Muted cream cards |
+
+**Fonts:** DejaVu Serif (headings) + DejaVu Sans (body)
+**Border Radius:** `10px`
+**Signature Element:** Marigold accent buttons on green backgrounds. Botanical illustration style for icons (line weight 1.5px, single color). Cream-on-green inverted sections.
+
+---
+
+### 21. Midnight Galaxy
+
+**Mood:** Mystical, creative, entertainment/music.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#2b1e3e` | Deep purple |
+| Primary | `#4a4e8f` | Cosmic blue |
+| Secondary | `#a490c2` | Lavender |
+| Accent | `#e8b4f8` | Light purple glow |
+| Text | `#e8e0f0` | Pale lavender text |
+| Surface | `#352848` | Cards |
+
+**Fonts:** FreeSans (all)
+**Border Radius:** `12px`
+**Signature Element:** Purple-to-blue gradient backgrounds. Star-field particle effect or subtle dot pattern. Lavender glow on hover states. Cosmic radial gradients on hero sections.
+
+```css
+.galaxy-bg {
+  background: radial-gradient(ellipse at 30% 50%, #4a4e8f33, transparent 50%),
+              radial-gradient(ellipse at 70% 30%, #a490c233, transparent 40%),
+              #2b1e3e;
+}
+```
+
+---
+
+### 22. Warm Editorial
+
+**Mood:** Refined, readable, modern magazine.
+**Colors:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| Background | `#faf8f5` | Warm cream |
+| Primary | `#1a1a1a` | Black text |
+| Accent | `#c1666b` | Muted red links/accents |
+| Muted | `#8c8c8c` | Metadata, captions |
+| Surface | `#f0ede8` | Cards, asides |
+| Rule | `#d4cfc8` | Horizontal dividers |
+
+**Fonts:** Instrument Serif (headings, display) + Source Sans 3 (body, 400-600)
+**Border Radius:** `4px`
+**Signature Element:** Generous whitespace (120px+ section spacing). Thin 1px horizontal rules between content blocks. Large serif headings (48-64px) with tight line-height (1.1). Byline and date metadata in small caps.
+
+---
+
+## Feeling-to-Preset Quick Lookup
+
+Find the right preset by the feeling you want to communicate.
+
+| Feeling / Intent | Recommended Presets |
+|-----------------|-------------------|
+| Professional, trustworthy | Arctic Frost (17), Swiss Modern (11), Electric Studio (2) |
+| Warm, inviting | Sunset Boulevard (14), Golden Hour (16), Warm Editorial (22) |
+| Bold, high-energy | Bold Signal (1), Creative Voltage (3), Neon Cyber (9) |
+| Calm, focused | Ocean Depths (13), Forest Canopy (15), Dark Botanical (4) |
+| Playful, friendly | Pastel Geometry (6), Split Pastel (7), Botanical Garden (20) |
+| Elegant, luxury | Dark Botanical (4), Paper & Ink (12), Desert Rose (18) |
+| Technical, developer | Terminal Green (10), Tech Innovation (19), Creative Voltage (3) |
+| Creative, artistic | Midnight Galaxy (21), Neon Cyber (9), Vintage Editorial (8) |
+| Editorial, content-first | Warm Editorial (22), Paper & Ink (12), Notebook Tabs (5) |
+| Feminine, wellness | Desert Rose (18), Split Pastel (7), Pastel Geometry (6) |
+| Nature, sustainability | Forest Canopy (15), Botanical Garden (20), Dark Botanical (4) |
+| Futuristic, sci-fi | Neon Cyber (9), Tech Innovation (19), Midnight Galaxy (21) |
+| Minimal, clean | Swiss Modern (11), Arctic Frost (17), Warm Editorial (22) |
+| Magazine, personality | Vintage Editorial (8), Notebook Tabs (5), Paper & Ink (12) |
+| Startup SaaS | Pastel Geometry (6), Electric Studio (2), Bold Signal (1) |
+| E-commerce, marketplace | Golden Hour (16), Sunset Boulevard (14), Pastel Geometry (6) |
+| Portfolio, showcase | Electric Studio (2), Dark Botanical (4), Bold Signal (1) |
+| Dashboard, data | Arctic Frost (17), Ocean Depths (13), Swiss Modern (11) |