laowang/awesome-design-md
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
necatiozmen
2026-03-31 19:37:25 +03:00
commit 1145c998a1
128 changed files with 51549 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
design-md/opencode.ai/DESIGN.md Normal file
View File

@@ -0,0 +1,281 @@
# Design System: OpenCode
## 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.

25
design-md/opencode.ai/README.md Normal file
View File

@@ -0,0 +1,25 @@
# Opencode.ai — Design System
> Design.md extracted from the public [opencode.ai](https://opencode.ai.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
| File | Description |
|------|-------------|
| `DESIGN.md` | Complete design system documentation (9 sections) |
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Opencode.ai design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Opencode.ai Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/opencode.ai/preview-dark-screenshot.png)
### Light Mode
![Opencode.ai Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/opencode.ai/preview-screenshot.png)

368
design-md/opencode.ai/preview-dark.html Normal file
View File

@@ -0,0 +1,368 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: OpenCode (Dark)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--oc-dark: #fdfcfc;
--oc-light: #201d1d;
--oc-gray: #9a9898;
--oc-dark-surface: #302c2c;
--oc-border-gray: #646262;
--oc-light-surface: #2a2626;
--oc-input-bg: #302c2c;
--accent: #4da3ff;
--accent-hover: #007aff;
--accent-active: #0056b3;
--danger: #ff6961;
--danger-hover: #ff3b30;
--danger-active: #d70015;
--success: #5de882;
--warning: #ffb840;
--warning-hover: #ff9f0a;
--warning-active: #cc7f08;
--text-primary: #fdfcfc;
--text-secondary: #9a9898;
--text-muted: #6e6e73;
--text-caption: #9a9898;
--border-warm: rgba(253, 252, 252, 0.12);
--border-tab: #9a9898;
--border-outline: #646262;
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--oc-light);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 16px; font-weight: 400; line-height: 1.50;
-webkit-font-smoothing: antialiased;
}
.dark-badge {
position: fixed; top: 12px; right: 12px; z-index: 200;
background: var(--accent); color: #ffffff;
padding: 4px 12px; border-radius: 9999px;
font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
}
/* NAV */
.nav {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 12px 32px;
background: var(--oc-light);
border-bottom: 1px solid var(--border-warm);
}
.nav-brand { font-size: 14px; font-weight: 700; color: var(--text-primary); text-decoration: none; }
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }
.nav-links a:hover { color: var(--accent); }
.nav-cta {
display: inline-block; background: var(--oc-dark); color: var(--oc-light);
padding: 4px 20px; border-radius: 4px; font-size: 14px; font-weight: 500;
text-decoration: none; font-family: var(--font-mono); transition: opacity 0.15s;
}
.nav-cta:hover { opacity: 0.85; }
/* HERO */
.hero { padding: 96px 32px 80px; text-align: center; }
.hero h1 {
font-size: 38px; font-weight: 700; line-height: 1.50;
color: var(--text-primary); margin-bottom: 16px;
}
.hero p { font-size: 16px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); max-width: 600px; margin: 0 auto 32px; }
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
display: inline-block; background: var(--oc-dark); color: var(--oc-light);
padding: 4px 20px; border-radius: 4px; border: none;
font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 2.00;
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-secondary {
display: inline-block; background: transparent; color: var(--text-primary);
padding: 4px 20px; border-radius: 4px; border: 1px solid var(--border-outline);
font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 2.00;
text-decoration: none; cursor: pointer; transition: all 0.15s;
}
.btn-secondary:hover { border-color: var(--text-primary); }
.btn-accent {
display: inline-block; background: var(--accent); color: #ffffff;
padding: 4px 20px; border-radius: 4px; border: none;
font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 2.00;
text-decoration: none; cursor: pointer; transition: background 0.15s;
}
.btn-accent:hover { background: var(--accent-hover); }
.btn-danger {
display: inline-block; background: var(--danger); color: #ffffff;
padding: 4px 20px; border-radius: 4px; border: none;
font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 2.00;
text-decoration: none; cursor: pointer; transition: background 0.15s;
}
.btn-danger:hover { background: var(--danger-hover); }
/* SECTIONS */
.section { padding: 64px 32px; max-width: 1000px; margin: 0 auto; }
.section-label { font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
.section-title { font-size: 38px; font-weight: 700; line-height: 1.50; margin-bottom: 32px; }
.section-divider { border: none; border-top: 1px solid var(--border-warm); margin: 0; }
/* COLORS */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
.color-swatch { border-radius: 4px; overflow: hidden; border: 1px solid var(--border-warm); background: var(--oc-dark-surface); }
.color-swatch-block { height: 72px; width: 100%; }
.color-swatch-info { padding: 10px 12px; }
.color-swatch-name { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.color-swatch-hex { font-size: 12px; color: var(--text-secondary); }
.color-swatch-role { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.color-group-label { font-size: 14px; font-weight: 700; color: var(--text-secondary); margin: 24px 0 10px; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-warm); }
.type-sample:last-child { border-bottom: none; }
.type-meta { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 8px; }
/* BUTTONS */
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.button-item { text-align: center; }
.button-label { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 8px; }
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card { background: var(--oc-dark-surface); border-radius: 4px; padding: 24px; border: 1px solid var(--border-warm); transition: border-color 0.15s; }
.card:hover { border-color: var(--border-outline); }
.card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--text-secondary); line-height: 1.50; }
.card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 4px; margin-bottom: 12px; }
/* FORMS */
.form-group { margin-bottom: 20px; max-width: 400px; }
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
.form-input {
width: 100%; background: var(--oc-input-bg); color: var(--text-primary);
border: 1px solid var(--border-warm); padding: 20px; border-radius: 6px;
font-family: var(--font-mono); font-size: 14px; outline: none;
transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--accent); }
.form-input--focus { border-color: var(--accent); }
.form-input--error { border-color: var(--danger); }
.form-state-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
/* SPACING */
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.spacing-item { text-align: center; }
.spacing-block { background: var(--oc-dark); border-radius: 2px; margin-bottom: 6px; height: 28px; }
.spacing-value { font-size: 11px; font-weight: 500; color: var(--text-muted); }
/* RADIUS */
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.radius-item { text-align: center; }
.radius-box { width: 64px; height: 64px; background: var(--oc-dark); margin-bottom: 6px; }
.radius-label { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.radius-context { font-size: 10px; color: var(--text-muted); }
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.elevation-card { background: var(--oc-dark-surface); border-radius: 4px; padding: 20px; text-align: center; }
.elevation-label { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.elevation-desc { font-size: 11px; color: var(--text-muted); }
/* FOOTER */
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-warm); font-size: 14px; color: var(--text-secondary); }
.footer a { color: var(--accent); text-decoration: underline; }
@media (max-width: 768px) {
.hero h1 { font-size: 28px; }
.nav-links { display: none; }
.section { padding: 48px 20px; }
.section-title { font-size: 28px; }
.card-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="dark-badge">Dark Mode</div>
<nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a>
<ul class="nav-links">
<li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#cards">Cards</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#spacing">Spacing</a></li>
</ul>
<a class="nav-cta" href="#">Get Started</a>
</nav>
<section class="hero">
<h1>Design System<br>Inspired by OpenCode</h1>
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized in monospace precision.</p>
<div class="hero-buttons">
<a class="btn-primary" href="#">Install OpenCode</a>
<a class="btn-secondary" href="#">View on GitHub</a>
</div>
</section>
<hr class="section-divider">
<section class="section" id="colors">
<div class="section-label">01 / Colors</div>
<h2 class="section-title">Color Palette</h2>
<div class="color-group-label">Primary</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#201d1d"></div><div class="color-swatch-info"><div class="color-swatch-name">OpenCode Dark</div><div class="color-swatch-hex">#201d1d</div><div class="color-swatch-role">Background, buttons</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#fdfcfc"></div><div class="color-swatch-info"><div class="color-swatch-name">OpenCode Light</div><div class="color-swatch-hex">#fdfcfc</div><div class="color-swatch-role">Primary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#9a9898"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Gray</div><div class="color-swatch-hex">#9a9898</div><div class="color-swatch-role">Secondary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#302c2c"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Surface</div><div class="color-swatch-hex">#302c2c</div><div class="color-swatch-role">Elevated surface</div></div></div>
</div>
<div class="color-group-label">Surface & Border</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#f1eeee"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Surface</div><div class="color-swatch-hex">#f1eeee</div><div class="color-swatch-role">Light background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#f8f7f7"></div><div class="color-swatch-info"><div class="color-swatch-name">Input BG</div><div class="color-swatch-hex">#f8f7f7</div><div class="color-swatch-role">Form inputs</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#646262"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Gray</div><div class="color-swatch-hex">#646262</div><div class="color-swatch-role">Outline borders</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#6e6e73"></div><div class="color-swatch-info"><div class="color-swatch-name">Text Muted</div><div class="color-swatch-hex">#6e6e73</div><div class="color-swatch-role">Muted labels</div></div></div>
</div>
<div class="color-group-label">Accent</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#007aff"></div><div class="color-swatch-info"><div class="color-swatch-name">Accent Blue</div><div class="color-swatch-hex">#007aff</div><div class="color-swatch-role">Primary accent</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#0056b3"></div><div class="color-swatch-info"><div class="color-swatch-name">Accent Hover</div><div class="color-swatch-hex">#0056b3</div><div class="color-swatch-role">Hover state</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#004085"></div><div class="color-swatch-info"><div class="color-swatch-name">Accent Active</div><div class="color-swatch-hex">#004085</div><div class="color-swatch-role">Active state</div></div></div>
</div>
<div class="color-group-label">Semantic</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff3b30"></div><div class="color-swatch-info"><div class="color-swatch-name">Danger</div><div class="color-swatch-hex">#ff3b30</div><div class="color-swatch-role">Error, destructive</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#30d158"></div><div class="color-swatch-info"><div class="color-swatch-name">Success</div><div class="color-swatch-hex">#30d158</div><div class="color-swatch-role">Success state</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff9f0a"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ff9f0a</div><div class="color-swatch-role">Caution, alerts</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#424245"></div><div class="color-swatch-info"><div class="color-swatch-name">Text Secondary</div><div class="color-swatch-hex">#424245</div><div class="color-swatch-role">Captions on light</div></div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="typography">
<div class="section-label">02 / Typography</div>
<h2 class="section-title">Typography Scale</h2>
<div class="type-sample"><div style="font-size:38px; font-weight:700; line-height:1.50;">Heading 1 -- Hero</div><div class="type-meta">Heading 1 -- 38px / 700 / 1.50 / Berkeley Mono</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:700; line-height:1.50;">Heading 2 -- Section Title</div><div class="type-meta">Heading 2 -- 16px / 700 / 1.50 / Berkeley Mono</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.50;">Body Medium -- Navigation links, interactive text, and button labels live here.</div><div class="type-meta">Body Medium -- 16px / 500 / 1.50 / Berkeley Mono</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50;">Body Regular -- Standard paragraph text for descriptions, documentation, and general content across the interface.</div><div class="type-meta">Body Regular -- 16px / 400 / 1.50 / Berkeley Mono</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.00;">Body Tight -- Compact Labels</div><div class="type-meta">Body Tight -- 16px / 500 / 1.00 / Berkeley Mono</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:2.00;">Caption -- Footnotes, metadata, and small supplementary text with relaxed line-height for readability.</div><div class="type-meta">Caption -- 14px / 400 / 2.00 / Berkeley Mono</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.50; font-family:var(--font-mono);">$ opencode --help</div><div class="type-meta">Code -- 14px / 400 / 1.50 / Berkeley Mono (monospace)</div></div>
</section>
<hr class="section-divider">
<section class="section" id="buttons">
<div class="section-label">03 / Buttons</div>
<h2 class="section-title">Button Variants</h2>
<div class="button-row">
<div class="button-item"><a class="btn-primary" href="#">Install OpenCode</a><div class="button-label">Primary Dark</div></div>
<div class="button-item"><a class="btn-secondary" href="#">View on GitHub</a><div class="button-label">Secondary Outline</div></div>
<div class="button-item"><a class="btn-accent" href="#">Learn More</a><div class="button-label">Accent Blue</div></div>
<div class="button-item"><a class="btn-danger" href="#">Delete</a><div class="button-label">Danger</div></div>
<div class="button-item"><span style="display:inline-block; background:var(--success); color:#ffffff; padding:4px 20px; border-radius:4px; font-size:16px; font-weight:500; font-family:var(--font-mono);">Success</span><div class="button-label">Success</div></div>
<div class="button-item"><span style="display:inline-block; background:var(--warning); color:#ffffff; padding:4px 20px; border-radius:4px; font-size:16px; font-weight:500; font-family:var(--font-mono);">Warning</span><div class="button-label">Warning</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="cards">
<div class="section-label">04 / Cards</div>
<h2 class="section-title">Card Examples</h2>
<div class="card-grid">
<div class="card">
<div class="card-badge" style="background:rgba(77,163,255,0.15); color:var(--accent);">AI Agent</div>
<h3>Terminal-Native Coding</h3>
<p>An open source AI coding agent that runs in your terminal. No IDE required -- just you, your code, and the command line.</p>
</div>
<div class="card" style="border-color: var(--border-outline);">
<div class="card-badge" style="background:rgba(93,232,130,0.15); color:var(--success);">Open Source</div>
<h3>Multi-Provider Support</h3>
<p>Works with Anthropic, OpenAI, and other LLM providers. Choose the model that fits your workflow and budget.</p>
</div>
<div class="card">
<div class="card-badge" style="background:rgba(255,184,64,0.15); color:var(--warning);">CLI</div>
<h3>Context-Aware Editing</h3>
<p>Understands your entire codebase context. Make changes across multiple files with natural language instructions.</p>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="forms">
<div class="section-label">05 / Forms</div>
<h2 class="section-title">Form Elements</h2>
<div class="form-group"><label class="form-label">Email Address</label><input class="form-input" type="text" placeholder="you@example.com"><div class="form-state-label">Default (warm border, 20px padding)</div></div>
<div class="form-group"><label class="form-label">API Key</label><input class="form-input form-input--focus" type="text" value="sk-ant-..."><div class="form-state-label">Focus (accent blue border)</div></div>
<div class="form-group"><label class="form-label">Invalid Key</label><input class="form-input form-input--error" type="text" value="invalid-key-format"><div class="form-state-label">Error (danger red border)</div></div>
</section>
<hr class="section-divider">
<section class="section" id="spacing">
<div class="section-label">06 / Spacing</div>
<h2 class="section-title">Spacing Scale</h2>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-block" style="width:1px"></div><div class="spacing-value">1</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:64px"></div><div class="spacing-value">64</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="radius">
<div class="section-label">07 / Radius</div>
<h2 class="section-title">Border Radius Scale</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Default (buttons, cards)</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div><div class="radius-context">Inputs</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="elevation">
<div class="section-label">08 / Elevation</div>
<h2 class="section-title">Elevation &amp; Depth</h2>
<div class="elevation-grid">
<div class="elevation-card" style="border: none; background: var(--oc-light-surface);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No border, no shadow</div></div>
<div class="elevation-card" style="border: 1px solid var(--border-warm);"><div class="elevation-label">Level 1: Subtle</div><div class="elevation-desc">1px rgba(253,252,252,0.12)</div></div>
<div class="elevation-card" style="border-bottom: 2px solid var(--border-tab);"><div class="elevation-label">Level 2: Tab</div><div class="elevation-desc">2px solid #9a9898</div></div>
<div class="elevation-card" style="border: 1px solid var(--border-outline);"><div class="elevation-label">Level 3: Outline</div><div class="elevation-desc">1px solid #646262</div></div>
</div>
</section>
<footer class="footer">
Generated from <a href="https://opencode.ai/">opencode.ai</a> DESIGN.md -- awesome-design-md
</footer>
</body>
</html>

359
design-md/opencode.ai/preview.html Normal file
View File

@@ -0,0 +1,359 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: OpenCode (Light)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--oc-dark: #201d1d;
--oc-light: #fdfcfc;
--oc-gray: #9a9898;
--oc-dark-surface: #302c2c;
--oc-border-gray: #646262;
--oc-light-surface: #f1eeee;
--oc-input-bg: #f8f7f7;
--accent: #007aff;
--accent-hover: #0056b3;
--accent-active: #004085;
--danger: #ff3b30;
--danger-hover: #d70015;
--danger-active: #a50011;
--success: #30d158;
--warning: #ff9f0a;
--warning-hover: #cc7f08;
--warning-active: #995f06;
--text-primary: #201d1d;
--text-secondary: #9a9898;
--text-muted: #6e6e73;
--text-caption: #424245;
--border-warm: rgba(15, 0, 0, 0.12);
--border-tab: #9a9898;
--border-outline: #646262;
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--oc-light);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 16px; font-weight: 400; line-height: 1.50;
-webkit-font-smoothing: antialiased;
}
/* NAV */
.nav {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 12px 32px;
background: var(--oc-light);
border-bottom: 1px solid var(--border-warm);
}
.nav-brand { font-size: 14px; font-weight: 700; color: var(--text-primary); text-decoration: none; }
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }
.nav-links a:hover { color: var(--accent); }
.nav-cta {
display: inline-block; background: var(--oc-dark); color: var(--oc-light);
padding: 4px 20px; border-radius: 4px; font-size: 14px; font-weight: 500;
text-decoration: none; font-family: var(--font-mono); transition: opacity 0.15s;
}
.nav-cta:hover { opacity: 0.85; }
/* HERO */
.hero { padding: 96px 32px 80px; text-align: center; }
.hero h1 {
font-size: 38px; font-weight: 700; line-height: 1.50;
color: var(--text-primary); margin-bottom: 16px;
}
.hero p { font-size: 16px; font-weight: 400; line-height: 1.50; color: var(--text-secondary); max-width: 600px; margin: 0 auto 32px; }
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
display: inline-block; background: var(--oc-dark); color: var(--oc-light);
padding: 4px 20px; border-radius: 4px; border: none;
font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 2.00;
text-decoration: none; cursor: pointer; transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-secondary {
display: inline-block; background: transparent; color: var(--text-primary);
padding: 4px 20px; border-radius: 4px; border: 1px solid var(--border-outline);
font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 2.00;
text-decoration: none; cursor: pointer; transition: all 0.15s;
}
.btn-secondary:hover { border-color: var(--text-primary); }
.btn-accent {
display: inline-block; background: var(--accent); color: #ffffff;
padding: 4px 20px; border-radius: 4px; border: none;
font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 2.00;
text-decoration: none; cursor: pointer; transition: background 0.15s;
}
.btn-accent:hover { background: var(--accent-hover); }
.btn-danger {
display: inline-block; background: var(--danger); color: #ffffff;
padding: 4px 20px; border-radius: 4px; border: none;
font-family: var(--font-mono); font-size: 16px; font-weight: 500; line-height: 2.00;
text-decoration: none; cursor: pointer; transition: background 0.15s;
}
.btn-danger:hover { background: var(--danger-hover); }
/* SECTIONS */
.section { padding: 64px 32px; max-width: 1000px; margin: 0 auto; }
.section-label { font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
.section-title { font-size: 38px; font-weight: 700; line-height: 1.50; margin-bottom: 32px; }
.section-divider { border: none; border-top: 1px solid var(--border-warm); margin: 0; }
/* COLORS */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
.color-swatch { border-radius: 4px; overflow: hidden; border: 1px solid var(--border-warm); background: #ffffff; }
.color-swatch-block { height: 72px; width: 100%; }
.color-swatch-info { padding: 10px 12px; }
.color-swatch-name { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.color-swatch-hex { font-size: 12px; color: var(--text-secondary); }
.color-swatch-role { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.color-group-label { font-size: 14px; font-weight: 700; color: var(--text-caption); margin: 24px 0 10px; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-warm); }
.type-sample:last-child { border-bottom: none; }
.type-meta { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 8px; }
/* BUTTONS */
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.button-item { text-align: center; }
.button-label { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 8px; }
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card { background: #ffffff; border-radius: 4px; padding: 24px; border: 1px solid var(--border-warm); transition: border-color 0.15s; }
.card:hover { border-color: var(--border-outline); }
.card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--text-secondary); line-height: 1.50; }
.card-badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 4px; margin-bottom: 12px; }
/* FORMS */
.form-group { margin-bottom: 20px; max-width: 400px; }
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
.form-input {
width: 100%; background: var(--oc-input-bg); color: var(--text-primary);
border: 1px solid var(--border-warm); padding: 20px; border-radius: 6px;
font-family: var(--font-mono); font-size: 14px; outline: none;
transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--accent); }
.form-input--focus { border-color: var(--accent); }
.form-input--error { border-color: var(--danger); }
.form-state-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
/* SPACING */
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.spacing-item { text-align: center; }
.spacing-block { background: var(--oc-dark); border-radius: 2px; margin-bottom: 6px; height: 28px; }
.spacing-value { font-size: 11px; font-weight: 500; color: var(--text-muted); }
/* RADIUS */
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.radius-item { text-align: center; }
.radius-box { width: 64px; height: 64px; background: var(--oc-dark); margin-bottom: 6px; }
.radius-label { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.radius-context { font-size: 10px; color: var(--text-muted); }
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.elevation-card { background: #ffffff; border-radius: 4px; padding: 20px; text-align: center; }
.elevation-label { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.elevation-desc { font-size: 11px; color: var(--text-muted); }
/* FOOTER */
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border-warm); font-size: 14px; color: var(--text-secondary); }
.footer a { color: var(--accent); text-decoration: underline; }
@media (max-width: 768px) {
.hero h1 { font-size: 28px; }
.nav-links { display: none; }
.section { padding: 48px 20px; }
.section-title { font-size: 28px; }
.card-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<nav class="nav">
<a class="nav-brand" href="#">awesome-design-md</a>
<ul class="nav-links">
<li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#cards">Cards</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#spacing">Spacing</a></li>
</ul>
<a class="nav-cta" href="#">Get Started</a>
</nav>
<section class="hero">
<h1>Design System<br>Inspired by OpenCode</h1>
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized in monospace precision.</p>
<div class="hero-buttons">
<a class="btn-primary" href="#">Install OpenCode</a>
<a class="btn-secondary" href="#">View on GitHub</a>
</div>
</section>
<hr class="section-divider">
<section class="section" id="colors">
<div class="section-label">01 / Colors</div>
<h2 class="section-title">Color Palette</h2>
<div class="color-group-label">Primary</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#201d1d"></div><div class="color-swatch-info"><div class="color-swatch-name">OpenCode Dark</div><div class="color-swatch-hex">#201d1d</div><div class="color-swatch-role">Background, buttons</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#fdfcfc"></div><div class="color-swatch-info"><div class="color-swatch-name">OpenCode Light</div><div class="color-swatch-hex">#fdfcfc</div><div class="color-swatch-role">Primary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#9a9898"></div><div class="color-swatch-info"><div class="color-swatch-name">Mid Gray</div><div class="color-swatch-hex">#9a9898</div><div class="color-swatch-role">Secondary text</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#302c2c"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Surface</div><div class="color-swatch-hex">#302c2c</div><div class="color-swatch-role">Elevated surface</div></div></div>
</div>
<div class="color-group-label">Surface & Border</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#f1eeee"></div><div class="color-swatch-info"><div class="color-swatch-name">Light Surface</div><div class="color-swatch-hex">#f1eeee</div><div class="color-swatch-role">Light background</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#f8f7f7"></div><div class="color-swatch-info"><div class="color-swatch-name">Input BG</div><div class="color-swatch-hex">#f8f7f7</div><div class="color-swatch-role">Form inputs</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#646262"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Gray</div><div class="color-swatch-hex">#646262</div><div class="color-swatch-role">Outline borders</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#6e6e73"></div><div class="color-swatch-info"><div class="color-swatch-name">Text Muted</div><div class="color-swatch-hex">#6e6e73</div><div class="color-swatch-role">Muted labels</div></div></div>
</div>
<div class="color-group-label">Accent</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#007aff"></div><div class="color-swatch-info"><div class="color-swatch-name">Accent Blue</div><div class="color-swatch-hex">#007aff</div><div class="color-swatch-role">Primary accent</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#0056b3"></div><div class="color-swatch-info"><div class="color-swatch-name">Accent Hover</div><div class="color-swatch-hex">#0056b3</div><div class="color-swatch-role">Hover state</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#004085"></div><div class="color-swatch-info"><div class="color-swatch-name">Accent Active</div><div class="color-swatch-hex">#004085</div><div class="color-swatch-role">Active state</div></div></div>
</div>
<div class="color-group-label">Semantic</div>
<div class="color-grid">
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff3b30"></div><div class="color-swatch-info"><div class="color-swatch-name">Danger</div><div class="color-swatch-hex">#ff3b30</div><div class="color-swatch-role">Error, destructive</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#30d158"></div><div class="color-swatch-info"><div class="color-swatch-name">Success</div><div class="color-swatch-hex">#30d158</div><div class="color-swatch-role">Success state</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#ff9f0a"></div><div class="color-swatch-info"><div class="color-swatch-name">Warning</div><div class="color-swatch-hex">#ff9f0a</div><div class="color-swatch-role">Caution, alerts</div></div></div>
<div class="color-swatch"><div class="color-swatch-block" style="background:#424245"></div><div class="color-swatch-info"><div class="color-swatch-name">Text Secondary</div><div class="color-swatch-hex">#424245</div><div class="color-swatch-role">Captions on light</div></div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="typography">
<div class="section-label">02 / Typography</div>
<h2 class="section-title">Typography Scale</h2>
<div class="type-sample"><div style="font-size:38px; font-weight:700; line-height:1.50;">Heading 1 -- Hero</div><div class="type-meta">Heading 1 -- 38px / 700 / 1.50 / Berkeley Mono</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:700; line-height:1.50;">Heading 2 -- Section Title</div><div class="type-meta">Heading 2 -- 16px / 700 / 1.50 / Berkeley Mono</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.50;">Body Medium -- Navigation links, interactive text, and button labels live here.</div><div class="type-meta">Body Medium -- 16px / 500 / 1.50 / Berkeley Mono</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50;">Body Regular -- Standard paragraph text for descriptions, documentation, and general content across the interface.</div><div class="type-meta">Body Regular -- 16px / 400 / 1.50 / Berkeley Mono</div></div>
<div class="type-sample"><div style="font-size:16px; font-weight:500; line-height:1.00;">Body Tight -- Compact Labels</div><div class="type-meta">Body Tight -- 16px / 500 / 1.00 / Berkeley Mono</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:2.00;">Caption -- Footnotes, metadata, and small supplementary text with relaxed line-height for readability.</div><div class="type-meta">Caption -- 14px / 400 / 2.00 / Berkeley Mono</div></div>
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.50; font-family:var(--font-mono);">$ opencode --help</div><div class="type-meta">Code -- 14px / 400 / 1.50 / Berkeley Mono (monospace)</div></div>
</section>
<hr class="section-divider">
<section class="section" id="buttons">
<div class="section-label">03 / Buttons</div>
<h2 class="section-title">Button Variants</h2>
<div class="button-row">
<div class="button-item"><a class="btn-primary" href="#">Install OpenCode</a><div class="button-label">Primary Dark</div></div>
<div class="button-item"><a class="btn-secondary" href="#">View on GitHub</a><div class="button-label">Secondary Outline</div></div>
<div class="button-item"><a class="btn-accent" href="#">Learn More</a><div class="button-label">Accent Blue</div></div>
<div class="button-item"><a class="btn-danger" href="#">Delete</a><div class="button-label">Danger</div></div>
<div class="button-item"><span style="display:inline-block; background:var(--success); color:#ffffff; padding:4px 20px; border-radius:4px; font-size:16px; font-weight:500; font-family:var(--font-mono);">Success</span><div class="button-label">Success</div></div>
<div class="button-item"><span style="display:inline-block; background:var(--warning); color:#ffffff; padding:4px 20px; border-radius:4px; font-size:16px; font-weight:500; font-family:var(--font-mono);">Warning</span><div class="button-label">Warning</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="cards">
<div class="section-label">04 / Cards</div>
<h2 class="section-title">Card Examples</h2>
<div class="card-grid">
<div class="card">
<div class="card-badge" style="background:rgba(0,122,255,0.1); color:var(--accent);">AI Agent</div>
<h3>Terminal-Native Coding</h3>
<p>An open source AI coding agent that runs in your terminal. No IDE required -- just you, your code, and the command line.</p>
</div>
<div class="card" style="border-color: var(--border-outline);">
<div class="card-badge" style="background:rgba(48,209,88,0.1); color:var(--success);">Open Source</div>
<h3>Multi-Provider Support</h3>
<p>Works with Anthropic, OpenAI, and other LLM providers. Choose the model that fits your workflow and budget.</p>
</div>
<div class="card">
<div class="card-badge" style="background:rgba(255,159,10,0.1); color:var(--warning-hover);">CLI</div>
<h3>Context-Aware Editing</h3>
<p>Understands your entire codebase context. Make changes across multiple files with natural language instructions.</p>
</div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="forms">
<div class="section-label">05 / Forms</div>
<h2 class="section-title">Form Elements</h2>
<div class="form-group"><label class="form-label">Email Address</label><input class="form-input" type="text" placeholder="you@example.com"><div class="form-state-label">Default (warm border, 20px padding)</div></div>
<div class="form-group"><label class="form-label">API Key</label><input class="form-input form-input--focus" type="text" value="sk-ant-..."><div class="form-state-label">Focus (accent blue border)</div></div>
<div class="form-group"><label class="form-label">Invalid Key</label><input class="form-input form-input--error" type="text" value="invalid-key-format"><div class="form-state-label">Error (danger red border)</div></div>
</section>
<hr class="section-divider">
<section class="section" id="spacing">
<div class="section-label">06 / Spacing</div>
<h2 class="section-title">Spacing Scale</h2>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-block" style="width:1px"></div><div class="spacing-value">1</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:40px"></div><div class="spacing-value">40</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div>
<div class="spacing-item"><div class="spacing-block" style="width:64px"></div><div class="spacing-value">64</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="radius">
<div class="section-label">07 / Radius</div>
<h2 class="section-title">Border Radius Scale</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Default (buttons, cards)</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div><div class="radius-context">Inputs</div></div>
</div>
</section>
<hr class="section-divider">
<section class="section" id="elevation">
<div class="section-label">08 / Elevation</div>
<h2 class="section-title">Elevation &amp; Depth</h2>
<div class="elevation-grid">
<div class="elevation-card" style="border: none; background: var(--oc-light-surface);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No border, no shadow</div></div>
<div class="elevation-card" style="border: 1px solid var(--border-warm);"><div class="elevation-label">Level 1: Subtle</div><div class="elevation-desc">1px rgba(15,0,0,0.12)</div></div>
<div class="elevation-card" style="border-bottom: 2px solid var(--border-tab);"><div class="elevation-label">Level 2: Tab</div><div class="elevation-desc">2px solid #9a9898</div></div>
<div class="elevation-card" style="border: 1px solid var(--border-outline);"><div class="elevation-label">Level 3: Outline</div><div class="elevation-desc">1px solid #646262</div></div>
</div>
</section>
<footer class="footer">
Generated from <a href="https://opencode.ai/">opencode.ai</a> DESIGN.md -- awesome-design-md
</footer>
</body>
</html>