calvyn-code 0.14.0

package/skills/creative/popular-web-designs/templates/cohere.md

@@ -0,0 +1,279 @@
+# Design System: Cohere
+
+
+> **Hermes Agent — Implementation Notes**
+>
+> The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:
+> - **Primary:** `Inter` | **Mono:** `JetBrains Mono`
+> - **Font stack (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **Mono stack (CSS):** `font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> Use `write_file` to create HTML, serve via `generative-widgets` skill (cloudflared tunnel).
+> Verify visual accuracy with `browser_vision` after generating.
+
+## 1. Visual Theme & Atmosphere
+
+Cohere's interface is a polished enterprise command deck — confident, clean, and designed to make AI feel like serious infrastructure rather than a consumer toy. The experience lives on a bright white canvas where content is organized into generously rounded cards (22px radius) that create an organic, cloud-like containment language. This is a site that speaks to CTOs and enterprise architects: professional without being cold, sophisticated without being intimidating.
+
+The design language bridges two worlds with a dual-typeface system: CohereText, a custom display serif with tight tracking, gives headlines the gravitas of a technology manifesto, while Unica77 Cohere Web handles all body and UI text with geometric Swiss precision. This serif/sans pairing creates a "confident authority meets engineering clarity" personality that perfectly reflects an enterprise AI platform.
+
+Color is used with extreme restraint — the interface is almost entirely black-and-white with cool gray borders (`#d9d9dd`, `#e5e7eb`). Purple-violet appears only in photographic hero bands, gradient sections, and the interactive blue (`#1863dc`) that signals hover and focus states. This chromatic restraint means that when color DOES appear — in product screenshots, enterprise photography, and the deep purple section — it carries maximum visual weight.
+
+**Key Characteristics:**
+- Bright white canvas with cool gray containment borders
+- 22px signature border-radius — the distinctive "Cohere card" roundness
+- Dual custom typeface: CohereText (display serif) + Unica77 (body sans)
+- Enterprise-grade chromatic restraint: black, white, cool grays, minimal purple-blue accent
+- Deep purple/violet hero sections providing dramatic contrast
+- Ghost/transparent buttons that shift to blue on hover
+- Enterprise photography showing diverse real-world applications
+- CohereMono for code and technical labels with uppercase transforms
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Cohere Black** (`#000000`): Primary headline text and maximum-emphasis elements.
+- **Near Black** (`#212121`): Standard body link color — slightly softer than pure black.
+- **Deep Dark** (`#17171c`): A blue-tinted near-black for navigation and dark-section text.
+
+### Secondary & Accent
+- **Interaction Blue** (`#1863dc`): The primary interactive accent — appears on button hover, focus states, and active links. The sole chromatic action color.
+- **Ring Blue** (`#4c6ee6` at 50%): Tailwind ring color for keyboard focus indicators.
+- **Focus Purple** (`#9b60aa`): Input focus border color — a muted violet.
+
+### Surface & Background
+- **Pure White** (`#ffffff`): The primary page background and card surface.
+- **Snow** (`#fafafa`): Subtle elevated surfaces and light-section backgrounds.
+- **Lightest Gray** (`#f2f2f2`): Card borders and the softest containment lines.
+
+### Neutrals & Text
+- **Muted Slate** (`#93939f`): De-emphasized footer links and tertiary text — a cool-toned gray with a slight blue-violet tint.
+- **Border Cool** (`#d9d9dd`): Standard section and list-item borders — a cool, slightly purple-tinted gray.
+- **Border Light** (`#e5e7eb`): Lighter border variant — Tailwind's standard gray-200.
+
+### Gradient System
+- **Purple-Violet Hero Band**: Deep purple gradient sections that create dramatic contrast against the white canvas. These appear as full-width bands housing product screenshots and key messaging.
+- **Dark Footer Gradient**: The page transitions through deep purple/charcoal to the black footer, creating a "dusk" effect.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display**: `CohereText`, with fallbacks: `Space Grotesk, Inter, ui-sans-serif, system-ui`
+- **Body / UI**: `Unica77 Cohere Web`, with fallbacks: `Inter, Arial, ui-sans-serif, system-ui`
+- **Code**: `CohereMono`, with fallbacks: `Arial, ui-sans-serif, system-ui`
+- **Icons**: `CohereIconDefault` (custom icon font)
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (tight) | -1.44px | Maximum impact, serif authority |
+| Display Secondary | CohereText | 60px (3.75rem) | 400 | 1.00 (tight) | -1.2px | Large section headings |
+| Section Heading | Unica77 | 48px (3rem) | 400 | 1.20 (tight) | -0.48px | Feature section titles |
+| Sub-heading | Unica77 | 32px (2rem) | 400 | 1.20 (tight) | -0.32px | Card headings, feature names |
+| Feature Title | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Smaller section titles |
+| Body Large | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Intro paragraphs |
+| Body / Button | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Standard body, button text |
+| Button Medium | Unica77 | 14px (0.88rem) | 500 | 1.71 (relaxed) | normal | Smaller buttons, emphasized labels |
+| Caption | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Metadata, descriptions |
+| Uppercase Label | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Uppercase section labels |
+| Small | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Smallest text, footer links |
+| Code Micro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Tiny uppercase code labels |
+
+### Principles
+- **Serif for declaration, sans for utility**: CohereText carries the brand voice at display scale — its serif terminals give headlines the authority of published research. Unica77 handles everything functional with Swiss-geometric neutrality.
+- **Negative tracking at scale**: CohereText uses -1.2px to -1.44px letter-spacing at 60–72px, creating dense, impactful text blocks.
+- **Single body weight**: Nearly all Unica77 usage is weight 400. Weight 500 appears only for small button emphasis. The system relies on size and spacing, not weight contrast.
+- **Uppercase code labels**: CohereMono uses uppercase with positive letter-spacing (0.16–0.28px) for technical tags and section markers.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Ghost / Transparent**
+- Background: transparent (`rgba(255, 255, 255, 0)`)
+- Text: Cohere Black (`#000000`)
+- No border visible
+- Hover: text shifts to Interaction Blue (`#1863dc`), opacity 0.8
+- Focus: solid 2px outline in Interaction Blue
+- The primary button style — invisible until interacted with
+
+**Dark Solid**
+- Background: dark/black
+- Text: Pure White
+- For CTA on light surfaces
+- Pill-shaped or standard radius
+
+**Outlined**
+- Border-based containment
+- Used in secondary actions
+
+### Cards & Containers
+- Background: Pure White (`#ffffff`)
+- Border: thin solid Lightest Gray (`1px solid #f2f2f2`) for subtle cards; Cool Border (`#d9d9dd`) for emphasized
+- Radius: **22px** — the signature Cohere radius for primary cards, images, and dialog containers. Also 4px, 8px, 16px, 20px for smaller elements
+- Shadow: minimal — Cohere relies on background color and borders rather than shadows
+- Special: `0px 0px 22px 22px` radius (bottom-only rounding) for section containers
+- Dialog: 8px radius for modal/dialog boxes
+
+### Inputs & Forms
+- Text: white on dark input, black on light
+- Focus border: Focus Purple (`#9b60aa`) with `1px solid`
+- Focus shadow: red ring (`rgb(179, 0, 0) 0px 0px 0px 2px`) — likely for error state indication
+- Focus outline: Interaction Blue solid 2px
+
+### Navigation
+- Clean horizontal nav on white or dark background
+- Logo: Cohere wordmark (custom SVG)
+- Links: Dark text at 16px Unica77
+- CTA: Dark solid button
+- Mobile: hamburger collapse
+
+### Image Treatment
+- Enterprise photography with diverse subjects and environments
+- Purple-tinted hero photography for dramatic sections
+- Product UI screenshots on dark surfaces
+- Images with 22px radius matching card system
+- Full-bleed purple gradient sections
+
+### Distinctive Components
+
+**22px Card System**
+- The 22px border-radius is Cohere's visual signature
+- All primary cards, images, and containers use this radius
+- Creates a cloud-like, organic softness that's distinctive from the typical 8–12px
+
+**Enterprise Trust Bar**
+- Company logos displayed in a horizontal strip
+- Demonstrates enterprise adoption
+- Clean, monochrome logo treatment
+
+**Purple Hero Bands**
+- Full-width deep purple sections housing product showcases
+- Create dramatic visual breaks in the white page flow
+- Product screenshots float within the purple environment
+
+**Uppercase Code Tags**
+- CohereMono in uppercase with letter-spacing
+- Used as section markers and categorization labels
+- Creates a technical, structured information hierarchy
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
+- Button padding varies by variant
+- Card internal padding: approximately 24–32px
+- Section vertical spacing: generous (56–60px between sections)
+
+### Grid & Container
+- Max container width: up to 2560px (very wide) with responsive scaling
+- Hero: centered with dramatic typography
+- Feature sections: multi-column card grids
+- Enterprise sections: full-width purple bands
+- 26 breakpoints detected — extremely granular responsive system
+
+### Whitespace Philosophy
+- **Enterprise clarity**: Each section presents one clear proposition with breathing room between.
+- **Photography as hero**: Large photographic sections provide visual interest without requiring decorative design elements.
+- **Card grouping**: Related content is grouped into 22px-rounded cards, creating natural information clusters.
+
+### Border Radius Scale
+- Sharp (4px): Navigation elements, small tags, pagination
+- Comfortable (8px): Dialog boxes, secondary containers, small cards
+- Generous (16px): Featured containers, medium cards
+- Large (20px): Large feature cards
+- Signature (22px): Primary cards, hero images, main containers — THE Cohere radius
+- Pill (9999px): Buttons, tags, status indicators
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, no border | Page background, text blocks |
+| Bordered (Level 1) | `1px solid #f2f2f2` or `#d9d9dd` | Standard cards, list separators |
+| Purple Band (Level 2) | Full-width dark purple background | Hero sections, feature showcases |
+
+**Shadow Philosophy**: Cohere is nearly shadow-free. Depth is communicated through **background color contrast** (white cards on purple bands, white surface on snow), **border containment** (cool gray borders), and the dramatic **light-to-dark section alternation**. When elements need elevation, they achieve it through being white-on-dark rather than through shadow casting.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use 22px border-radius on all primary cards and containers — it's the visual signature
+- Use CohereText for display headings (72px, 60px) with negative letter-spacing
+- Use Unica77 for all body and UI text at weight 400
+- Keep the palette black-and-white with cool gray borders
+- Use Interaction Blue (#1863dc) only for hover/focus interactive states
+- Use deep purple sections for dramatic visual breaks and product showcases
+- Apply uppercase + letter-spacing on CohereMono for section labels
+- Maintain enterprise-appropriate photography with diverse subjects
+
+### Don't
+- Don't use border-radius other than 22px on primary cards — the signature radius matters
+- Don't introduce warm colors — the palette is strictly cool-toned
+- Don't use heavy shadows — depth comes from color contrast and borders
+- Don't use bold (700+) weight on body text — 400–500 is the range
+- Don't skip the serif/sans hierarchy — CohereText for headlines, Unica77 for body
+- Don't use purple as a surface color for cards — purple is reserved for full-width sections
+- Don't reduce section spacing below 40px — enterprise layouts need breathing room
+- Don't use decoration on buttons by default — ghost/transparent is the base state
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Small Mobile | <425px | Compact layout, minimal spacing |
+| Mobile | 425–640px | Single column, stacked cards |
+| Large Mobile | 640–768px | Minor spacing adjustments |
+| Tablet | 768–1024px | 2-column grids begin |
+| Desktop | 1024–1440px | Full multi-column layout |
+| Large Desktop | 1440–2560px | Maximum container width |
+
+*26 breakpoints detected — one of the most granularly responsive sites in the dataset.*
+
+### Touch Targets
+- Buttons adequately sized for touch interaction
+- Navigation links with comfortable spacing
+- Card surfaces as touch targets
+
+### Collapsing Strategy
+- **Navigation**: Full nav collapses to hamburger
+- **Feature grids**: Multi-column → 2-column → single column
+- **Hero text**: 72px → 48px → 32px progressive scaling
+- **Purple sections**: Maintain full-width, content stacks
+- **Card grids**: 3 → 2 → 1 column
+
+### Image Behavior
+- Photography scales proportionally within 22px-radius containers
+- Product screenshots maintain aspect ratio
+- Purple sections scale background proportionally
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Text: "Cohere Black (#000000)"
+- Page Background: "Pure White (#ffffff)"
+- Secondary Text: "Near Black (#212121)"
+- Hover Accent: "Interaction Blue (#1863dc)"
+- Muted Text: "Muted Slate (#93939f)"
+- Card Borders: "Lightest Gray (#f2f2f2)"
+- Section Borders: "Border Cool (#d9d9dd)"
+
+### Example Component Prompts
+- "Create a hero section on Pure White (#ffffff) with CohereText at 72px weight 400, line-height 1.0, letter-spacing -1.44px. Cohere Black text. Subtitle in Unica77 at 18px weight 400, line-height 1.4."
+- "Design a feature card with 22px border-radius, 1px solid Lightest Gray (#f2f2f2) border on white. Title in Unica77 at 32px, letter-spacing -0.32px. Body in Unica77 at 16px, Muted Slate (#93939f)."
+- "Build a ghost button: transparent background, Cohere Black text in Unica77 at 16px. On hover, text shifts to Interaction Blue (#1863dc) with 0.8 opacity. Focus: 2px solid Interaction Blue outline."
+- "Create a deep purple full-width section with white text. CohereText at 60px for the heading. Product screenshot floats within using 22px border-radius."
+- "Design a section label using CohereMono at 14px, uppercase, letter-spacing 0.28px. Muted Slate (#93939f) text."
+
+### Iteration Guide
+1. Focus on ONE component at a time
+2. Always use 22px radius for primary cards — "the Cohere card roundness"
+3. Specify the typeface — CohereText for headlines, Unica77 for body, CohereMono for labels
+4. Interactive elements use Interaction Blue (#1863dc) on hover only
+5. Keep surfaces white with cool gray borders — no warm tones
+6. Purple is for full-width sections, never card backgrounds

package/skills/creative/popular-web-designs/templates/coinbase.md

@@ -0,0 +1,142 @@
+# Design System: Coinbase
+
+
+> **Hermes Agent — Implementation Notes**
+>
+> The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:
+> - **Primary:** `DM Sans` | **Mono:** `system monospace stack`
+> - **Font stack (CSS):** `font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **Mono stack (CSS):** `font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
+> ```
+> Use `write_file` to create HTML, serve via `generative-widgets` skill (cloudflared tunnel).
+> Verify visual accuracy with `browser_vision` after generating.
+
+## 1. Visual Theme & Atmosphere
+
+Coinbase's website is a clean, trustworthy crypto platform that communicates financial reliability through a blue-and-white binary palette. The design uses Coinbase Blue (`#0052ff`) — a deep, saturated blue — as the singular brand accent against white and near-black surfaces. The proprietary font family includes CoinbaseDisplay for hero headlines, CoinbaseSans for UI text, CoinbaseText for body reading, and CoinbaseIcons for iconography — a comprehensive four-font system.
+
+The button system uses a distinctive 56px radius for pill-shaped CTAs with hover transitions to a lighter blue (`#578bfa`). The design alternates between white content sections and dark (`#0a0b0d`, `#282b31`) feature sections, creating a professional, financial-grade interface.
+
+**Key Characteristics:**
+- Coinbase Blue (`#0052ff`) as singular brand accent
+- Four-font proprietary family: Display, Sans, Text, Icons
+- 56px radius pill buttons with blue hover transition
+- Near-black (`#0a0b0d`) dark sections + white light sections
+- 1.00 line-height on display headings — ultra-tight
+- Cool gray secondary surface (`#eef0f3`) with blue tint
+- `text-transform: lowercase` on some button labels — unusual
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Coinbase Blue** (`#0052ff`): Primary brand, links, CTA borders
+- **Pure White** (`#ffffff`): Primary light surface
+- **Near Black** (`#0a0b0d`): Text, dark section backgrounds
+- **Cool Gray Surface** (`#eef0f3`): Secondary button background
+
+### Interactive
+- **Hover Blue** (`#578bfa`): Button hover background
+- **Link Blue** (`#0667d0`): Secondary link color
+- **Muted Blue** (`#5b616e`): Border color at 20% opacity
+
+### Surface
+- **Dark Card** (`#282b31`): Dark button/card backgrounds
+- **Light Surface** (`rgba(247,247,247,0.88)`): Subtle surface
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `CoinbaseDisplay` — hero headlines
+- **UI / Sans**: `CoinbaseSans` — buttons, headings, nav
+- **Body**: `CoinbaseText` — reading text
+- **Icons**: `CoinbaseIcons` — icon font
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Notes |
+|------|------|------|--------|-------------|-------|
+| Display Hero | CoinbaseDisplay | 80px | 400 | 1.00 (tight) | Maximum impact |
+| Display Secondary | CoinbaseDisplay | 64px | 400 | 1.00 | Sub-hero |
+| Display Third | CoinbaseDisplay | 52px | 400 | 1.00 | Third tier |
+| Section Heading | CoinbaseSans | 36px | 400 | 1.11 (tight) | Feature sections |
+| Card Title | CoinbaseSans | 32px | 400 | 1.13 | Card headings |
+| Feature Title | CoinbaseSans | 18px | 600 | 1.33 | Feature emphasis |
+| Body Bold | CoinbaseSans | 16px | 700 | 1.50 | Strong body |
+| Body Semibold | CoinbaseSans | 16px | 600 | 1.25 | Buttons, nav |
+| Body | CoinbaseText | 18px | 400 | 1.56 | Standard reading |
+| Body Small | CoinbaseText | 16px | 400 | 1.50 | Secondary reading |
+| Button | CoinbaseSans | 16px | 600 | 1.20 | +0.16px tracking |
+| Caption | CoinbaseSans | 14px | 600–700 | 1.50 | Metadata |
+| Small | CoinbaseSans | 13px | 600 | 1.23 | Tags |
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Pill (56px radius)**
+- Background: `#eef0f3` or `#282b31`
+- Radius: 56px
+- Border: `1px solid` matching background
+- Hover: `#578bfa` (light blue)
+- Focus: `2px solid black` outline
+
+**Full Pill (100000px radius)**
+- Used for maximum pill shape
+
+**Blue Bordered**
+- Border: `1px solid #0052ff`
+- Background: transparent
+
+### Cards & Containers
+- Radius: 8px–40px range
+- Borders: `1px solid rgba(91,97,110,0.2)`
+
+## 5. Layout Principles
+
+### Spacing System
+- Base: 8px
+- Scale: 1px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 25px, 32px, 48px
+
+### Border Radius Scale
+- Small (4px–8px): Article links, small cards
+- Standard (12px–16px): Cards, menus
+- Large (24px–32px): Feature containers
+- XL (40px): Large buttons/containers
+- Pill (56px): Primary CTAs
+- Full (100000px): Maximum pill
+
+## 6. Depth & Elevation
+
+Minimal shadow system — depth from color contrast between dark/light sections.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Coinbase Blue (#0052ff) for primary interactive elements
+- Apply 56px radius for all CTA buttons
+- Use CoinbaseDisplay for hero headings only
+- Alternate dark (#0a0b0d) and white sections
+
+### Don't
+- Don't use the blue decoratively — it's functional only
+- Don't use sharp corners on CTAs — 56px minimum
+
+## 8. Responsive Behavior
+
+Breakpoints: 400px, 576px, 640px, 768px, 896px, 1280px, 1440px, 1600px
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand: Coinbase Blue (`#0052ff`)
+- Background: White (`#ffffff`)
+- Dark surface: `#0a0b0d`
+- Secondary surface: `#eef0f3`
+- Hover: `#578bfa`
+- Text: `#0a0b0d`
+
+### Example Component Prompts
+- "Create hero: white background. CoinbaseDisplay 80px, line-height 1.00. Pill CTA (#eef0f3, 56px radius). Hover: #578bfa."
+- "Build dark section: #0a0b0d background. CoinbaseDisplay 64px white text. Blue accent link (#0052ff)."