calvyn-code 0.14.0

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

@@ -0,0 +1,280 @@
+# Design System: Ollama
+
+
+> **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
+
+Ollama's interface is radical minimalism taken to its logical conclusion — a pure-white void where content floats without decoration, shadow, or color. The design philosophy mirrors the product itself: strip away everything unnecessary until only the essential tool remains. This is the digital equivalent of a Dieter Rams object — every pixel earns its place, and the absence of design IS the design.
+
+The entire page exists in pure grayscale. There is zero chromatic color in the interface — no brand blue, no accent green, no semantic red. The only colors that exist are shades between pure black (`#000000`) and pure white (`#ffffff`), creating a monochrome environment that lets the user's mental model of "open models" remain uncolored by brand opinion. The Ollama llama mascot, rendered in simple black line art, is the only illustration — and even it's monochrome.
+
+What makes Ollama distinctive is the combination of SF Pro Rounded (Apple's rounded system font) with an exclusively pill-shaped geometry (9999px radius on everything interactive). The rounded letterforms + rounded buttons + rounded containers create a cohesive "softness language" that makes a developer CLI tool feel approachable and friendly rather than intimidating. This is minimalism with warmth — not cold Swiss-style grid minimalism, but the kind where the edges are literally softened.
+
+**Key Characteristics:**
+- Pure white canvas with zero chromatic color — completely grayscale
+- SF Pro Rounded headlines creating a distinctively Apple-like softness
+- Binary border-radius system: 12px (containers) or 9999px (everything interactive)
+- Zero shadows — depth comes exclusively from background color shifts and borders
+- Pill-shaped geometry on all interactive elements (buttons, tabs, inputs, tags)
+- The Ollama llama as the sole illustration — black line art, no color
+- Extreme content restraint — the homepage is short, focused, and uncluttered
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Pure Black** (`#000000`): Primary headlines, primary links, and the darkest text. The only "color" that demands attention.
+- **Near Black** (`#262626`): Button text on light surfaces, secondary headline weight.
+- **Darkest Surface** (`#090909`): The darkest possible surface — barely distinguishable from pure black, used for footer or dark containers.
+
+### Surface & Background
+- **Pure White** (`#ffffff`): The primary page background — not off-white, not cream, pure white. Button surfaces for secondary actions.
+- **Snow** (`#fafafa`): The subtlest possible surface distinction from white — used for section backgrounds and barely-elevated containers.
+- **Light Gray** (`#e5e5e5`): Button backgrounds, borders, and the primary containment color. The workhorse neutral.
+
+### Neutrals & Text
+- **Stone** (`#737373`): Secondary body text, footer links, and de-emphasized content. The primary "muted" tone.
+- **Mid Gray** (`#525252`): Emphasized secondary text, slightly darker than Stone.
+- **Silver** (`#a3a3a3`): Tertiary text, placeholders, and deeply de-emphasized metadata.
+- **Button Text Dark** (`#404040`): Specific to white-surface button text.
+
+### Semantic & Accent
+- **Ring Blue** (`#3b82f6` at 50%): The ONLY non-gray color in the entire system — Tailwind's default focus ring, used exclusively for keyboard accessibility. Never visible in normal interaction flow.
+- **Border Light** (`#d4d4d4`): A slightly darker gray for white-surface button borders.
+
+### Gradient System
+- **None.** Ollama uses absolutely no gradients. Visual separation comes from flat color blocks and single-pixel borders. This is a deliberate, almost philosophical design choice.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display**: `SF Pro Rounded`, with fallbacks: `system-ui, -apple-system, system-ui`
+- **Body / UI**: `ui-sans-serif`, with fallbacks: `system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji`
+- **Monospace**: `ui-monospace`, with fallbacks: `SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`
+
+*Note: SF Pro Rounded is Apple's system font — it renders with rounded terminals on macOS/iOS and falls back to the system sans-serif on other platforms.*
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | SF Pro Rounded | 48px (3rem) | 500 | 1.00 (tight) | normal | Maximum impact, rounded letterforms |
+| Section Heading | SF Pro Rounded | 36px (2.25rem) | 500 | 1.11 (tight) | normal | Feature section titles |
+| Sub-heading | SF Pro Rounded / ui-sans-serif | 30px (1.88rem) | 400–500 | 1.20 (tight) | normal | Card headings, feature names |
+| Card Title | ui-sans-serif | 24px (1.5rem) | 400 | 1.33 | normal | Medium emphasis headings |
+| Body Large | ui-sans-serif | 18px (1.13rem) | 400–500 | 1.56 | normal | Hero descriptions, button text |
+| Body / Link | ui-sans-serif | 16px (1rem) | 400–500 | 1.50 | normal | Standard body text, navigation |
+| Caption | ui-sans-serif | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, descriptions |
+| Small | ui-sans-serif | 12px (0.75rem) | 400 | 1.33 | normal | Smallest sans-serif text |
+| Code Body | ui-monospace | 16px (1rem) | 400 | 1.50 | normal | Inline code, commands |
+| Code Caption | ui-monospace | 14px (0.88rem) | 400 | 1.43 | normal | Code snippets, secondary |
+| Code Small | ui-monospace | 12px (0.75rem) | 400–700 | 1.63 | normal | Tags, labels |
+
+### Principles
+- **Rounded display, standard body**: SF Pro Rounded carries display headlines with its distinctive rounded terminals, while the standard system sans handles all body text. The rounded font IS the brand expression.
+- **Weight restraint**: Only two weights matter — 400 (regular) for body and 500 (medium) for headings. No bold, no light, no black weight. This extreme restraint reinforces the minimal philosophy.
+- **Tight display, comfortable body**: Headlines compress to 1.0 line-height, while body text relaxes to 1.43–1.56. The contrast creates clear hierarchy without needing weight contrast.
+- **Monospace for developer identity**: Code blocks and terminal commands appear throughout as primary content, using the system monospace stack.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Gray Pill (Primary)**
+- Background: Light Gray (`#e5e5e5`)
+- Text: Near Black (`#262626`)
+- Padding: 10px 24px
+- Border: thin solid Light Gray (`1px solid #e5e5e5`)
+- Radius: pill-shaped (9999px)
+- The primary action button — understated, grayscale, always pill-shaped
+
+**White Pill (Secondary)**
+- Background: Pure White (`#ffffff`)
+- Text: Button Text Dark (`#404040`)
+- Padding: 10px 24px
+- Border: thin solid Border Light (`1px solid #d4d4d4`)
+- Radius: pill-shaped (9999px)
+- Secondary action — visually lighter than Gray Pill
+
+**Black Pill (CTA)**
+- Background: Pure Black (`#000000`)
+- Text: Pure White (`#ffffff`)
+- Radius: pill-shaped (9999px)
+- Inferred from "Create account" and "Explore" buttons
+- Maximum emphasis — black on white
+
+### Cards & Containers
+- Background: Pure White or Snow (`#fafafa`)
+- Border: thin solid Light Gray (`1px solid #e5e5e5`) when needed
+- Radius: comfortably rounded (12px) — the ONLY non-pill radius in the system
+- Shadow: **none** — zero shadows on any element
+- Hover: likely subtle background shift or border darkening
+
+### Inputs & Forms
+- Background: Pure White
+- Border: `1px solid #e5e5e5`
+- Radius: pill-shaped (9999px) — search inputs and form fields are pill-shaped
+- Focus: Ring Blue (`#3b82f6` at 50%) ring
+- Placeholder: Silver (`#a3a3a3`)
+
+### Navigation
+- Clean horizontal nav with minimal elements
+- Logo: Ollama llama icon + wordmark in black
+- Links: "Models", "Docs", "Pricing" in black at 16px, weight 400
+- Search bar: pill-shaped with placeholder text
+- Right side: "Sign in" link + "Download" black pill CTA
+- No borders, no background — transparent nav on white page
+
+### Image Treatment
+- The Ollama llama mascot is the only illustration — black line art on white
+- Code screenshots/terminal outputs shown in bordered containers (12px radius)
+- Integration logos displayed as simple icons in a grid
+- No photographs, no gradients, no decorative imagery
+
+### Distinctive Components
+
+**Tab Pills**
+- Pill-shaped tab selectors (e.g., "Coding" | "OpenClaw")
+- Active: Light Gray bg; Inactive: transparent
+- All pill-shaped (9999px)
+
+**Model Tags**
+- Small pill-shaped tags (e.g., "ollama", "launch", "claude")
+- Light Gray background, dark text
+- The primary way to browse models
+
+**Terminal Command Block**
+- Monospace code showing `ollama run` commands
+- Minimal styling — just a bordered 12px-radius container
+- Copy button integrated
+
+**Integration Grid**
+- Grid of integration logos (Codex, Claude Code, OpenCode, LangChain, etc.)
+- Each in a bordered pill or card with icon + name
+- Tabbed by category (Coding, Documents & RAG, Automation, Chat)
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 4px, 6px, 8px, 9px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 88px, 112px
+- Button padding: 10px 24px (consistent across all buttons)
+- Card internal padding: approximately 24–32px
+- Section vertical spacing: very generous (88px–112px)
+
+### Grid & Container
+- Max container width: approximately 1024–1280px, centered
+- Hero: centered single-column with llama illustration
+- Feature sections: 2-column layout (text left, code right)
+- Integration grid: responsive multi-column
+- Footer: clean single-row
+
+### Whitespace Philosophy
+- **Emptiness as luxury**: The page is remarkably short and sparse — no feature section overstays its welcome. Each concept gets minimal but sufficient space.
+- **Content density is low by design**: Where other AI companies pack feature after feature, Ollama presents three ideas (run models, use with apps, integrations) and stops.
+- **The white space IS the brand**: Pure white space with zero decoration communicates "this tool gets out of your way."
+
+### Border Radius Scale
+- Comfortably rounded (12px): The sole container radius — code blocks, cards, panels
+- Pill-shaped (9999px): Everything interactive — buttons, tabs, inputs, tags, badges
+
+*This binary system is extreme and distinctive. There is no 4px, no 8px, no gradient of roundness. Elements are either containers (12px) or interactive (pill).*
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, no border | Page background, most content |
+| Bordered (Level 1) | `1px solid #e5e5e5` | Cards, code blocks, buttons |
+
+**Shadow Philosophy**: Ollama uses **zero shadows**. This is not an oversight — it's a deliberate design decision. Every other major AI product site uses at least subtle shadows. Ollama's flat, shadowless approach creates a paper-like experience where elements are distinguished purely by background color and single-pixel borders. Depth is communicated through **content hierarchy and typography weight**, not visual layering.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use pure white (`#ffffff`) as the page background — never off-white or cream
+- Use pill-shaped (9999px) radius on all interactive elements — buttons, tabs, inputs, tags
+- Use 12px radius on all non-interactive containers — code blocks, cards, panels
+- Keep the palette strictly grayscale — no chromatic colors except the blue focus ring
+- Use SF Pro Rounded at weight 500 for display headings — the rounded terminals are the brand expression
+- Maintain zero shadows — depth comes from borders and background shifts only
+- Keep content density low — each section should present one clear idea
+- Use monospace for terminal commands and code — it's primary content, not decoration
+- Keep all buttons at 10px 24px padding with pill shape — consistency is absolute
+
+### Don't
+- Don't introduce any chromatic color — no brand blue, no accent green, no warm tones
+- Don't use border-radius between 12px and 9999px — the system is binary
+- Don't add shadows to any element — the flat aesthetic is intentional
+- Don't use font weights above 500 — no bold, no black weight
+- Don't add decorative illustrations beyond the llama mascot
+- Don't use gradients anywhere — flat blocks and borders only
+- Don't overcomplicate the layout — two columns maximum, no complex grids
+- Don't use borders heavier than 1px — containment is always the lightest possible touch
+- Don't add hover animations or transitions — interactions should feel instant and direct
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, stacked everything, hamburger nav |
+| Small Tablet | 640–768px | Minor adjustments to spacing |
+| Tablet | 768–850px | 2-column layouts begin |
+| Desktop | 850–1024px | Standard layout, expanded features |
+| Large Desktop | 1024–1280px | Maximum content width |
+
+### Touch Targets
+- All buttons are pill-shaped with generous padding (10px 24px)
+- Navigation links at comfortable 16px size
+- Minimum touch area easily exceeds 44x44px
+
+### Collapsing Strategy
+- **Navigation**: Collapses to hamburger menu on mobile
+- **Feature sections**: 2-column → stacked single column
+- **Hero text**: 48px → 36px → 30px progressive scaling
+- **Integration grid**: Multi-column → 2-column → single column
+- **Code blocks**: Horizontal scroll maintained
+
+### Image Behavior
+- Llama mascot scales proportionally
+- Code blocks maintain monospace formatting
+- Integration icons reflow to fewer columns
+- No art direction changes
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Text: "Pure Black (#000000)"
+- Page Background: "Pure White (#ffffff)"
+- Secondary Text: "Stone (#737373)"
+- Button Background: "Light Gray (#e5e5e5)"
+- Borders: "Light Gray (#e5e5e5)"
+- Muted Text: "Silver (#a3a3a3)"
+- Dark Text: "Near Black (#262626)"
+- Subtle Surface: "Snow (#fafafa)"
+
+### Example Component Prompts
+- "Create a hero section on pure white (#ffffff) with an illustration centered above a headline at 48px SF Pro Rounded weight 500, line-height 1.0. Use Pure Black (#000000) text. Below, add a black pill-shaped CTA button (9999px radius, 10px 24px padding) and a gray pill button."
+- "Design a code block with a 12px border-radius, 1px solid Light Gray (#e5e5e5) border on white background. Use ui-monospace at 16px for the terminal command. No shadow."
+- "Build a tab bar with pill-shaped tabs (9999px radius). Active tab: Light Gray (#e5e5e5) background, Near Black (#262626) text. Inactive: transparent background, Stone (#737373) text."
+- "Create an integration card grid. Each card is a bordered pill (9999px radius) or a 12px-radius card with 1px solid #e5e5e5 border. Icon + name inside. Grid of 4 columns on desktop."
+- "Design a navigation bar: transparent background, no border. Ollama logo on the left, 3 text links (Pure Black, 16px, weight 400), pill search input in the center, 'Sign in' text link and black pill 'Download' button on the right."
+
+### Iteration Guide
+1. Focus on ONE component at a time
+2. Keep all values grayscale — "Stone (#737373)" not "use a light color"
+3. Always specify pill (9999px) or container (12px) radius — nothing in between
+4. Shadows are always zero — never add them
+5. Weight is always 400 or 500 — never bold
+6. If something feels too decorated, remove it — less is always more for Ollama

package/skills/creative/popular-web-designs/templates/opencode.ai.md

@@ -0,0 +1,294 @@
+# Design System: OpenCode
+
+
+> **Hermes Agent — Implementation Notes**
+>
+> The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:
+> - **Primary:** `JetBrains Mono` | **Mono:** `JetBrains Mono`
+> - **Font stack (CSS):** `font-family: 'JetBrains Mono', 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=JetBrains+Mono:wght@300;400;500;600;700&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
+
+OpenCode's website embodies a terminal-native, monospace-first aesthetic that reflects its identity as an open source AI coding agent. The entire visual system is built on a stark dark-on-light contrast using a near-black background (`#201d1d`) with warm off-white text (`#fdfcfc`). This isn't a generic dark theme -- it's a warm, slightly reddish-brown dark that feels like a sophisticated terminal emulator rather than a cold IDE. The warm undertone in both the darks and lights (notice the subtle red channel in `#201d1d` -- rgb(32, 29, 29)) creates a cohesive, lived-in quality.
+
+Berkeley Mono is the sole typeface, establishing an unapologetic monospace identity. Every element -- headings, body text, buttons, navigation -- shares this single font family, creating a unified "everything is code" philosophy. The heading at 38px bold with 1.50 line-height is generous and readable, while body text at 16px with weight 500 provides a slightly heavier-than-normal reading weight that enhances legibility on screen. The monospace grid naturally enforces alignment and rhythm across the layout.
+
+The color system is deliberately minimal. The primary palette consists of just three functional tones: the warm near-black (`#201d1d`), a medium warm gray (`#9a9898`), and a bright off-white (`#fdfcfc`). Semantic colors borrow from the Apple HIG palette -- blue accent (`#007aff`), red danger (`#ff3b30`), green success (`#30d158`), orange warning (`#ff9f0a`) -- giving the interface familiar, trustworthy signal colors without adding brand complexity. Borders use a subtle warm transparency (`rgba(15, 0, 0, 0.12)`) that ties into the warm undertone of the entire system.
+
+**Key Characteristics:**
+- Berkeley Mono as the sole typeface -- monospace everywhere, no sans-serif or serif voices
+- Warm near-black primary (`#201d1d`) with reddish-brown undertone, not pure black
+- Off-white text (`#fdfcfc`) with warm tint, not pure white
+- Minimal 4px border radius throughout -- sharp, utilitarian corners
+- 8px base spacing system scaling up to 96px
+- Apple HIG-inspired semantic colors (blue, red, green, orange)
+- Transparent warm borders using `rgba(15, 0, 0, 0.12)`
+- Email input with generous 20px padding and 6px radius -- the most generous component radius
+- Single button variant: dark background, light text, tight vertical padding (4px 20px)
+- Underlined links as default link style, reinforcing the text-centric identity
+
+## 2. Color Palette & Roles
+
+### Primary
+- **OpenCode Dark** (`#201d1d`): Primary background, button fills, link text. A warm near-black with subtle reddish-brown warmth -- rgb(32, 29, 29).
+- **OpenCode Light** (`#fdfcfc`): Primary text on dark surfaces, button text. A barely-warm off-white that avoids clinical pure white.
+- **Mid Gray** (`#9a9898`): Secondary text, muted links. A neutral warm gray that bridges dark and light.
+
+### Secondary
+- **Dark Surface** (`#302c2c`): Slightly lighter than primary dark, used for elevated surfaces and subtle differentiation.
+- **Border Gray** (`#646262`): Stronger borders, outline rings on interactive elements.
+- **Light Surface** (`#f1eeee`): Light mode surface, subtle background variation.
+
+### Accent
+- **Accent Blue** (`#007aff`): Primary accent, links, interactive highlights. Apple system blue.
+- **Accent Blue Hover** (`#0056b3`): Darker blue for hover states.
+- **Accent Blue Active** (`#004085`): Deepest blue for pressed/active states.
+
+### Semantic
+- **Danger Red** (`#ff3b30`): Error states, destructive actions. Apple system red.
+- **Danger Hover** (`#d70015`): Darker red for hover on danger elements.
+- **Danger Active** (`#a50011`): Deepest red for pressed danger states.
+- **Success Green** (`#30d158`): Success states, positive feedback. Apple system green.
+- **Warning Orange** (`#ff9f0a`): Warning states, caution signals. Apple system orange.
+- **Warning Hover** (`#cc7f08`): Darker orange for hover on warning elements.
+- **Warning Active** (`#995f06`): Deepest orange for pressed warning states.
+
+### Text Scale
+- **Text Muted** (`#6e6e73`): Muted labels, disabled text, placeholder content.
+- **Text Secondary** (`#424245`): Secondary text on light backgrounds, captions.
+
+### Border
+- **Border Warm** (`rgba(15, 0, 0, 0.12)`): Primary border color, warm transparent black with red tint.
+- **Border Tab** (`#9a9898`): Tab underline border, 2px solid bottom.
+- **Border Outline** (`#646262`): 1px solid outline border for containers.
+
+## 3. Typography Rules
+
+### Font Family
+- **Universal**: `Berkeley Mono`, with fallbacks: `IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace`
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Notes |
+|------|------|--------|-------------|-------|
+| Heading 1 | 38px (2.38rem) | 700 | 1.50 | Hero headlines, page titles |
+| Heading 2 | 16px (1.00rem) | 700 | 1.50 | Section titles, bold emphasis |
+| Body | 16px (1.00rem) | 400 | 1.50 | Standard body text, paragraphs |
+| Body Medium | 16px (1.00rem) | 500 | 1.50 | Links, button text, nav items |
+| Body Tight | 16px (1.00rem) | 500 | 1.00 (tight) | Compact labels, tab items |
+| Caption | 14px (0.88rem) | 400 | 2.00 (relaxed) | Footnotes, metadata, small labels |
+
+### Principles
+- **One font, one voice**: Berkeley Mono is used exclusively. There is no typographic variation between display, body, and code -- everything speaks in the same monospace register. Hierarchy is achieved through size and weight alone.
+- **Weight as hierarchy**: 700 for headings, 500 for interactive/medium emphasis, 400 for body text. Three weight levels create the entire hierarchy.
+- **Generous line-height**: 1.50 as the standard line-height gives text room to breathe within the monospace grid. The relaxed 2.00 line-height on captions creates clear visual separation.
+- **Tight for interaction**: Interactive elements (tabs, compact labels) use 1.00 line-height for dense, clickable targets.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Dark Fill)**
+- Background: `#201d1d` (OpenCode Dark)
+- Text: `#fdfcfc` (OpenCode Light)
+- Padding: 4px 20px
+- Radius: 4px
+- Font: 16px Berkeley Mono, weight 500, line-height 2.00 (relaxed)
+- Outline: `rgb(253, 252, 252) none 0px`
+- Use: Primary CTAs, main actions
+
+### Inputs
+
+**Email Input**
+- Background: `#f8f7f7` (light neutral)
+- Text: `#201d1d`
+- Border: `1px solid rgba(15, 0, 0, 0.12)`
+- Padding: 20px
+- Radius: 6px
+- Font: Berkeley Mono, standard size
+- Use: Form fields, email capture
+
+### Links
+
+**Default Link**
+- Color: `#201d1d`
+- Decoration: underline 1px
+- Font-weight: 500
+- Use: Primary text links in body content
+
+**Light Link**
+- Color: `#fdfcfc`
+- Decoration: none
+- Use: Links on dark backgrounds, navigation
+
+**Muted Link**
+- Color: `#9a9898`
+- Decoration: none
+- Use: Footer links, secondary navigation
+
+### Tabs
+
+**Tab Navigation**
+- Border-bottom: `2px solid #9a9898` (active tab indicator)
+- Font: 16px, weight 500, line-height 1.00
+- Use: Section switching, content filtering
+
+### Navigation
+- Clean horizontal layout with Berkeley Mono throughout
+- Brand logotype left-aligned in monospace
+- Links at 16px weight 500 with underline decoration
+- Dark background matching page background
+- No backdrop blur or transparency -- solid surfaces only
+
+### Image Treatment
+- Terminal/code screenshots as hero imagery
+- Dark terminal aesthetic with monospace type
+- Minimal borders, content speaks for itself
+
+### Distinctive Components
+
+**Terminal Hero**
+- Full-width dark terminal window as hero element
+- ASCII art / stylized logo within terminal frame
+- Monospace command examples with syntax highlighting
+- Reinforces the CLI-first identity of the product
+
+**Feature List**
+- Bulleted feature items with Berkeley Mono text
+- Weight 500 for feature names, 400 for descriptions
+- Tight vertical spacing between items
+- No cards or borders -- pure text layout
+
+**Email Capture**
+- Light background input (`#f8f7f7`) contrasting dark page
+- Generous 20px padding for comfortable typing
+- 6px radius -- the roundest element in the system
+- Newsletter/waitlist pattern
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Fine scale: 1px, 2px, 4px (sub-8px for borders and micro-adjustments)
+- Standard scale: 8px, 12px, 16px, 20px, 24px
+- Extended scale: 32px, 40px, 48px, 64px, 80px, 96px
+- The system follows a clean 4/8px grid with consistent doubling
+
+### Grid & Container
+- Max content width: approximately 800-900px (narrow, reading-optimized)
+- Single-column layout as the primary pattern
+- Centered content with generous horizontal margins
+- Hero section: full-width dark terminal element
+- Feature sections: single-column text blocks
+- Footer: multi-column link grid
+
+### Whitespace Philosophy
+- **Monospace rhythm**: The fixed-width nature of Berkeley Mono creates a natural vertical grid. Line-heights of 1.50 and 2.00 maintain consistent rhythm.
+- **Narrow and focused**: Content is constrained to a narrow column, creating generous side margins that focus attention on the text.
+- **Sections through spacing**: No decorative dividers. Sections are separated by generous vertical spacing (48-96px) rather than borders or background changes.
+
+### Border Radius Scale
+- Micro (4px): Default for all elements -- buttons, containers, badges
+- Input (6px): Form inputs get slightly more roundness
+- The entire system uses just two radius values, reinforcing the utilitarian aesthetic
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, no border | Default state for most elements |
+| Border Subtle (Level 1) | `1px solid rgba(15, 0, 0, 0.12)` | Section dividers, input borders, horizontal rules |
+| Border Tab (Level 2) | `2px solid #9a9898` bottom only | Active tab indicator |
+| Border Outline (Level 3) | `1px solid #646262` | Container outlines, elevated elements |
+
+**Shadow Philosophy**: OpenCode's depth system is intentionally flat. There are no box-shadows in the extracted tokens -- zero shadow values were detected. Depth is communicated exclusively through border treatments and background color shifts. This flatness is consistent with the terminal aesthetic: terminals don't have shadows, and neither does OpenCode. The three border levels (transparent warm, tab indicator, solid outline) create sufficient visual hierarchy without any elevation illusion.
+
+### Decorative Depth
+- Background color shifts between `#201d1d` and `#302c2c` create subtle surface differentiation
+- Transparent borders at 12% opacity provide barely-visible structure
+- The warm reddish tint in border colors (`rgba(15, 0, 0, 0.12)`) ties borders to the overall warm dark palette
+- No gradients, no blurs, no ambient effects -- pure flat terminal aesthetic
+
+## 7. Interaction & Motion
+
+### Hover States
+- Links: color shift from default to accent blue (`#007aff`) or underline style change
+- Buttons: subtle background lightening or border emphasis
+- Accent blue provides a three-stage hover sequence: `#007aff` → `#0056b3` → `#004085` (default → hover → active)
+- Danger red: `#ff3b30` → `#d70015` → `#a50011`
+- Warning orange: `#ff9f0a` → `#cc7f08` → `#995f06`
+
+### Focus States
+- Border-based focus: increased border opacity or solid border color
+- No shadow-based focus rings -- consistent with the flat, no-shadow aesthetic
+- Keyboard focus likely uses outline or border color shift to accent blue
+
+### Transitions
+- Minimal transitions expected -- terminal-inspired interfaces favor instant state changes
+- Color transitions: 100-150ms for subtle state feedback
+- No scale, rotate, or complex transform animations
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, reduced padding, heading scales down |
+| Tablet | 640-1024px | Content width expands, slight padding increase |
+| Desktop | >1024px | Full content width (~800-900px centered), maximum whitespace |
+
+### Touch Targets
+- Buttons with 4px 20px padding provide adequate horizontal touch area
+- Input fields with 20px padding ensure comfortable mobile typing
+- Tab items at 16px with tight line-height may need mobile adaptation
+
+### Collapsing Strategy
+- Hero heading: 38px → 28px → 24px on smaller screens
+- Navigation: horizontal links → hamburger/drawer on mobile
+- Feature lists: maintain single-column, reduce horizontal padding
+- Terminal hero: maintain full-width, reduce internal padding
+- Footer columns: multi-column → stacked single column
+- Section spacing: 96px → 64px → 48px on mobile
+
+### Image Behavior
+- Terminal screenshots maintain aspect ratio and border treatment
+- Full-width elements scale proportionally
+- Monospace type maintains readability at all sizes due to fixed-width nature
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Page background: `#201d1d` (warm near-black)
+- Primary text: `#fdfcfc` (warm off-white)
+- Secondary text: `#9a9898` (warm gray)
+- Muted text: `#6e6e73`
+- Accent: `#007aff` (blue)
+- Danger: `#ff3b30` (red)
+- Success: `#30d158` (green)
+- Warning: `#ff9f0a` (orange)
+- Button bg: `#201d1d`, button text: `#fdfcfc`
+- Border: `rgba(15, 0, 0, 0.12)` (warm transparent)
+- Input bg: `#f8f7f7`, input border: `rgba(15, 0, 0, 0.12)`
+
+### Example Component Prompts
+- "Create a hero section on `#201d1d` warm dark background. Headline at 38px Berkeley Mono weight 700, line-height 1.50, color `#fdfcfc`. Subtitle at 16px weight 400, color `#9a9898`. Primary CTA button (`#201d1d` bg with `1px solid #646262` border, 4px radius, 4px 20px padding, `#fdfcfc` text at weight 500)."
+- "Design a feature list: single-column on `#201d1d` background. Feature name at 16px Berkeley Mono weight 700, color `#fdfcfc`. Description at 16px weight 400, color `#9a9898`. No cards, no borders -- pure text with 16px vertical gap between items."
+- "Build an email capture form: `#f8f7f7` background input, `1px solid rgba(15, 0, 0, 0.12)` border, 6px radius, 20px padding. Adjacent dark button (`#201d1d` bg, `#fdfcfc` text, 4px radius, 4px 20px padding). Berkeley Mono throughout."
+- "Create navigation: sticky `#201d1d` background. 16px Berkeley Mono weight 500 for links, `#fdfcfc` text. Brand name left-aligned in monospace. Links with underline decoration. No blur, no transparency -- solid dark surface."
+- "Design a footer: `#201d1d` background, multi-column link grid. Links at 16px Berkeley Mono weight 400, color `#9a9898`. Section headers at weight 700. Border-top `1px solid rgba(15, 0, 0, 0.12)` separator."
+
+### Iteration Guide
+1. Berkeley Mono is the only font -- never introduce a second typeface. Size and weight create all hierarchy.
+2. Keep surfaces flat: no shadows, no gradients, no blur effects. Use borders and background shifts only.
+3. The warm undertone matters: use `#201d1d` not `#000000`, use `#fdfcfc` not `#ffffff`. The reddish warmth is subtle but essential.
+4. Border radius is 4px everywhere except inputs (6px). Never use rounded pills or large radii.
+5. Semantic colors follow Apple HIG: `#007aff` blue, `#ff3b30` red, `#30d158` green, `#ff9f0a` orange. Each has hover and active darkened variants.
+6. Three-stage interaction: default → hover (darkened) → active (deeply darkened) for all semantic colors.
+7. Borders use `rgba(15, 0, 0, 0.12)` -- a warm transparent dark, not neutral gray. This ties borders to the warm palette.
+8. Spacing follows an 8px grid: 8, 16, 24, 32, 40, 48, 64, 80, 96px. Use 4px for fine adjustments only.