775 lines
20 KiB
Markdown
775 lines
20 KiB
Markdown
---
|
|
name: docs-design
|
|
description: Design system skill for docs. Activate when building UI components, pages, or any visual elements. Provides exact color tokens, typography scale, spacing grid, component patterns, and craft rules. Read references/DESIGN.md before writing any CSS or JSX.
|
|
---
|
|
|
|
# docs Design System
|
|
|
|
You are building UI for **docs**. Light-themed, neutral palette, sans-serif typography (Product Sans), compact density on a 4px grid.
|
|
|
|
## Visual Reference
|
|
|
|
**IMPORTANT**: Study ALL screenshots below before writing any UI. Match colors, typography, spacing, layout, and motion exactly as shown.
|
|
|
|
### Homepage
|
|
|
|
|
|
|
|
> Read `references/DESIGN.md` for full token details.
|
|
|
|
## Design Philosophy
|
|
|
|
- **Layered depth** — use shadow tokens to create a sense of physical layering. Each elevation level has a specific shadow.
|
|
- **Gradient accents** — gradients are used thoughtfully for emphasis, not decoration.
|
|
- **Single typeface** — Product Sans carries all text. Hierarchy comes from size, weight, and color — never font mixing.
|
|
- **compact density** — 4px base grid. Every dimension is a multiple of 4.
|
|
- **neutral palette** — the color temperature runs neutral, matching the sans-serif typography.
|
|
- **Subtle motion** — transitions smooth state changes. Keep durations under 300ms, use ease-out curves.
|
|
|
|
## Color System
|
|
|
|
### Core Palette
|
|
|
|
| Role | Token | Hex | Use |
|
|
|------|-------|-----|-----|
|
|
| Background | `--background` | `#f6f8fa` | Page/app background |
|
|
| Surface | `--surface` | `#393a34` | Cards, panels, modals |
|
|
| Text Primary | `--text-primary` | `#1c1e21` | Headings, body text |
|
|
| Text Muted | `--text-muted` | `#ebedf0` | Captions, placeholders |
|
|
| Border | `--border` | `#2b3137` | Dividers, card borders |
|
|
|
|
### Status Colors
|
|
|
|
| Status | Hex | Use |
|
|
|--------|-----|-----|
|
|
| Success | `#00a400` | Confirmations, positive trends |
|
|
| Warning | `#ffba00` | Caution states, pending items |
|
|
| Danger | `#fa383e` | Errors, destructive actions |
|
|
|
|
### Extended Palette
|
|
|
|
- **docsearch-container-background:** `#090a11` — Deep background layer or shadow color
|
|
- **ifm-color-black:** `#000000` — Deep background layer or shadow color
|
|
- **ifm-footer-background-color:** `#303846`
|
|
- **sidebar-hover-bg-color:** `#4b39ef`
|
|
- **ifm-color-primary:** `#3578e5`
|
|
- **ifm-color-info:** `#54c7ec`
|
|
- **ifm-color-primary-dark:** `#306cce`
|
|
|
|
### CSS Variable Tokens
|
|
|
|
```css
|
|
--ifm-card-border-color: var(--ifm-color-primary);
|
|
--ifm-contrast-background-value: 90%;
|
|
--ifm-contrast-foreground-value: 70%;
|
|
--ifm-contrast-background-dark-value: 70%;
|
|
--ifm-contrast-foreground-dark-value: 90%;
|
|
--ifm-color-primary: #3578e5;
|
|
--ifm-color-secondary: #ebedf0;
|
|
--ifm-color-primary-dark: #306cce;
|
|
--ifm-color-primary-darker: #2d66c3;
|
|
--ifm-color-primary-darkest: #2554a0;
|
|
--ifm-color-primary-light: #538ce9;
|
|
--ifm-color-primary-lighter: #72a1ed;
|
|
--ifm-color-primary-lightest: #9abcf2;
|
|
--ifm-color-primary-contrast-background: #ebf2fc;
|
|
--ifm-color-primary-contrast-foreground: #102445;
|
|
--ifm-color-secondary-dark: #d4d5d8;
|
|
--ifm-color-secondary-darker: #c8c9cc;
|
|
--ifm-color-secondary-darkest: #a4a6a8;
|
|
--ifm-color-secondary-light: #eef0f2;
|
|
--ifm-color-secondary-lighter: #f1f2f5;
|
|
```
|
|
|
|
## Typography
|
|
|
|
### Font Stack
|
|
|
|
- **Product Sans** — Heading 1, Heading 2, Heading 3, Body, Caption
|
|
|
|
### Font Sources
|
|
|
|
```css
|
|
@font-face {
|
|
font-family: "Product Sans";
|
|
src: url("fonts/ProductSans-Regular.ttf") format("truetype");
|
|
font-weight: 400;
|
|
}
|
|
```
|
|
|
|
### Type Scale
|
|
|
|
| Role | Family | Size | Weight |
|
|
|------|--------|------|--------|
|
|
| Heading 1 | Product Sans | 3rem | 700 |
|
|
| Heading 2 | Product Sans | 2.5rem | 700 |
|
|
| Heading 3 | Product Sans | 2rem | 700 |
|
|
| Body | Product Sans | 14px | 400 |
|
|
| Caption | Product Sans | .9rem | 400 |
|
|
|
|
### Typography Rules
|
|
|
|
- All text uses **Product Sans** — never add another font family
|
|
- Max 3-4 font sizes per screen
|
|
- Headings: weight 600-700, body: weight 400
|
|
- Use color and opacity for text hierarchy, not additional font sizes
|
|
- Line height: 1.5 for body, 1.2 for headings
|
|
|
|
## Spacing & Layout
|
|
|
|
### Base Grid: 4px
|
|
|
|
Every dimension (margin, padding, gap, width, height) must be a multiple of **4px**.
|
|
|
|
### Spacing Scale
|
|
|
|
`2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 36, 48` px
|
|
|
|
### Spacing as Meaning
|
|
|
|
| Spacing | Use |
|
|
|---------|-----|
|
|
| 4-8px | Tight: related items (icon + label, avatar + name) |
|
|
| 12-16px | Medium: between groups within a section |
|
|
| 24-32px | Wide: between distinct sections |
|
|
| 48px+ | Vast: major page section breaks |
|
|
|
|
### Border Radius
|
|
|
|
Scale: `.2rem, .25rem, .5rem, 1em, 2rem, 2px, 3px, 4px, 6px, 8px, 10px, 20px, 40px, inherit`
|
|
Default: `4px`
|
|
|
|
### Container
|
|
|
|
Max-width: `996px`, centered with auto margins.
|
|
|
|
### Breakpoints
|
|
|
|
| Name | Value |
|
|
|------|-------|
|
|
| sm | 576px |
|
|
| md | 768px |
|
|
| lg | 996px |
|
|
| lg | 997px |
|
|
| lg | 1024px |
|
|
| 2xl | 1440px |
|
|
|
|
Mobile-first: design for small screens, layer on responsive overrides.
|
|
|
|
## Component Patterns
|
|
|
|
### Card
|
|
|
|
```css
|
|
.card {
|
|
background: #393a34;
|
|
border: 1px solid #2b3137;
|
|
border-radius: 4px;
|
|
padding: 16px;
|
|
box-shadow: var(--ifm-blockquote-shadow);
|
|
}
|
|
```
|
|
|
|
```html
|
|
<div class="card">
|
|
<h3>Card Title</h3>
|
|
<p>Card content goes here.</p>
|
|
</div>
|
|
```
|
|
|
|
### Button
|
|
|
|
```css
|
|
/* Primary */
|
|
.btn-primary {
|
|
background: #cccccc;
|
|
color: #1c1e21;
|
|
border-radius: 4px;
|
|
padding: 8px 16px;
|
|
font-weight: 500;
|
|
transition: opacity 150ms ease;
|
|
}
|
|
.btn-primary:hover { opacity: 0.9; }
|
|
|
|
/* Ghost */
|
|
.btn-ghost {
|
|
background: transparent;
|
|
border: 1px solid #2b3137;
|
|
color: #1c1e21;
|
|
border-radius: 4px;
|
|
padding: 8px 16px;
|
|
}
|
|
```
|
|
|
|
```html
|
|
<button class="btn-primary">Get Started</button>
|
|
<button class="btn-ghost">Learn More</button>
|
|
```
|
|
|
|
### Input
|
|
|
|
```css
|
|
.input {
|
|
background: #f6f8fa;
|
|
border: 1px solid #2b3137;
|
|
border-radius: 4px;
|
|
padding: 8px 12px;
|
|
color: #1c1e21;
|
|
font-size: 14px;
|
|
}
|
|
.input:focus { border-color: var(--accent); outline: none; }
|
|
```
|
|
|
|
```html
|
|
<input class="input" type="text" placeholder="Search..." />
|
|
```
|
|
|
|
### Badge / Chip
|
|
|
|
```css
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 8px;
|
|
border-radius: 9999px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
background: #393a34;
|
|
color: #ebedf0;
|
|
}
|
|
```
|
|
|
|
```html
|
|
<span class="badge">New</span>
|
|
<span class="badge">Beta</span>
|
|
```
|
|
|
|
### Modal / Dialog
|
|
|
|
```css
|
|
.modal-backdrop { background: rgba(0, 0, 0, 0.6); }
|
|
.modal {
|
|
background: #393a34;
|
|
border: 1px solid #2b3137;
|
|
border-radius: inherit;
|
|
padding: 24px;
|
|
max-width: 480px;
|
|
width: 90vw;
|
|
box-shadow: 0 0 10px var(--docusaurus-progress-bar-color),0 0 5px var(--docusaurus-progress-bar-color);
|
|
}
|
|
```
|
|
|
|
```html
|
|
<div class="modal-backdrop">
|
|
<div class="modal">
|
|
<h2>Dialog Title</h2>
|
|
<p>Dialog content.</p>
|
|
<button class="btn-primary">Confirm</button>
|
|
<button class="btn-ghost">Cancel</button>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Table
|
|
|
|
```css
|
|
.table { width: 100%; border-collapse: collapse; }
|
|
.table th {
|
|
text-align: left;
|
|
padding: 8px 12px;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
color: #ebedf0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
border-bottom: 1px solid #2b3137;
|
|
}
|
|
.table td {
|
|
padding: 12px;
|
|
border-bottom: 1px solid #2b3137;
|
|
}
|
|
```
|
|
|
|
```html
|
|
<table class="table">
|
|
<thead><tr><th>Name</th><th>Status</th><th>Date</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>Item One</td><td>Active</td><td>Jan 1</td></tr>
|
|
<tr><td>Item Two</td><td>Pending</td><td>Jan 2</td></tr>
|
|
</tbody>
|
|
</table>
|
|
```
|
|
|
|
### Navigation
|
|
|
|
```css
|
|
.nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #2b3137;
|
|
}
|
|
.nav-link {
|
|
color: #ebedf0;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
transition: color 150ms;
|
|
}
|
|
.nav-link:hover { color: #1c1e21; }
|
|
```
|
|
|
|
```html
|
|
<nav class="nav">
|
|
<a href="/" class="nav-link active">Home</a>
|
|
<a href="/about" class="nav-link">About</a>
|
|
<a href="/pricing" class="nav-link">Pricing</a>
|
|
<button class="btn-primary" style="margin-left: auto">Get Started</button>
|
|
</nav>
|
|
```
|
|
|
|
### Extracted Components
|
|
|
|
These components were found in the codebase:
|
|
|
|
**Button** (`html`)
|
|
|
|
**Navigation** (`html`)
|
|
|
|
## Page Structure
|
|
|
|
The following page sections were detected:
|
|
|
|
- **Navigation** — Top navigation bar (5 items)
|
|
- **Hero** — Hero section (detected from heading structure)
|
|
- **Footer** — Page footer with links and info (4 items)
|
|
- **Faq** — FAQ/accordion section
|
|
|
|
When building pages, follow this section order and structure.
|
|
|
|
## Animation & Motion
|
|
|
|
This project uses **subtle motion**. Transitions smooth state changes without calling attention.
|
|
|
|
### CSS Animations
|
|
|
|
- `a`
|
|
- `b`
|
|
|
|
### Motion Tokens
|
|
|
|
- **Duration scale:** `100ms`, `200ms`, `250ms`, `300ms`
|
|
- **Easing functions:** `ease-in-out`, `linear`, `ease-in`, `ease`
|
|
- **Animated properties:** `color`
|
|
|
|
### Motion Guidelines
|
|
|
|
- **Duration:** Use values from the duration scale above. Short (100ms) for micro-interactions, long (300ms) for page transitions
|
|
- **Easing:** Use `ease-in-out` as the default easing curve
|
|
- **Direction:** Elements enter from bottom/right, exit to top/left
|
|
- **Reduced motion:** Always respect `prefers-reduced-motion` — disable animations when set
|
|
|
|
## Depth & Elevation
|
|
|
|
### Shadow Tokens
|
|
|
|
- Subtle: `inset 0-1px 0 var(--ifm-color-emphasis-400)`
|
|
- Raised (cards, buttons): `var(--ifm-blockquote-shadow)`
|
|
- Raised (cards, buttons): `var(--ifm-global-shadow-lw)`
|
|
- Raised (cards, buttons): `var(--ifm-global-shadow-md)`
|
|
- Raised (cards, buttons): `var(--ifm-global-shadow-tl)`
|
|
- Raised (cards, buttons): `var(--ifm-alert-shadow)`
|
|
|
|
### Z-Index Scale
|
|
|
|
`10, 200, 300, 1031`
|
|
|
|
Use these exact values — never invent z-index values.
|
|
|
|
## Anti-Patterns (Never Do)
|
|
|
|
- **No blur effects** — no backdrop-blur, no filter: blur()
|
|
- **No zebra striping** — tables and lists use borders for separation
|
|
- **No invented colors** — every hex value must come from the palette above
|
|
- **No arbitrary spacing** — every dimension is a multiple of 4px
|
|
- **No extra fonts** — only Product Sans are allowed
|
|
- **No arbitrary border-radius** — use the scale: .2rem, .25rem, .5rem, 1em, 2rem, 2px, 3px, 4px, 6px, 8px
|
|
- **No opacity for disabled states** — use muted colors instead
|
|
|
|
## Workflow
|
|
|
|
1. **Read** `references/DESIGN.md` before writing any UI code
|
|
2. **Pick colors** from the Color System section — never invent new ones
|
|
3. **Set typography** — Product Sans only, using the type scale
|
|
4. **Build layout** on the 4px grid — check every margin, padding, gap
|
|
5. **Match components** to patterns above before creating new ones
|
|
6. **Apply elevation** — use shadow tokens
|
|
7. **Validate** — every value traces back to a design token. No magic numbers.
|
|
|
|
## Brand Spec
|
|
|
|
- **Favicon:** `/logos/favicon.png`
|
|
- **Site URL:** `https://docs.flutterflow.io/designer/`
|
|
- **Brand typeface:** Product Sans
|
|
|
|
## Quick Reference
|
|
|
|
```
|
|
Background: #f6f8fa
|
|
Surface: #393a34
|
|
Text: #1c1e21 / #ebedf0
|
|
Accent: (not extracted)
|
|
Border: #2b3137
|
|
Font: Product Sans
|
|
Spacing: 4px grid
|
|
Radius: 4px
|
|
Components: 7 detected
|
|
```
|
|
|
|
## When to Trigger
|
|
|
|
Activate this skill when:
|
|
- Creating new components, pages, or visual elements for docs
|
|
- Writing CSS, Tailwind classes, styled-components, or inline styles
|
|
- Building page layouts, templates, or responsive designs
|
|
- Reviewing UI code for design consistency
|
|
- The user mentions "docs" design, style, UI, or theme
|
|
- Generating mockups, wireframes, or visual prototypes
|
|
|
|
---
|
|
|
|
# Full Reference Files
|
|
|
|
> Every output file is embedded below. Claude has full design system context from /skills alone.
|
|
|
|
## Design System Tokens (DESIGN.md)
|
|
|
|
# docs DESIGN.md
|
|
|
|
> Auto-generated design system — reverse-engineered via static analysis by skillui.
|
|
> Frameworks: None detected
|
|
> Colors: 20 · Fonts: 1 · Components: 7
|
|
> Icon library: not detected · State: not detected
|
|
> Primary theme: light · Dark mode toggle: no · Motion: subtle
|
|
|
|
## Visual Reference
|
|
|
|
**Match this design exactly** — study colors, fonts, spacing, and component shapes before writing any UI code.
|
|
|
|
|
|
|
|
---
|
|
|
|
## 1. Visual Theme & Atmosphere
|
|
|
|
This is a **light-themed** interface with a neutral, approachable feel. The light background emphasizes content clarity. Typography uses **Product Sans** throughout — a clean, modern choice that maintains consistency. Spacing follows a **4px base grid** (compact density), with scale: 2, 4, 6, 8, 10, 12, 16, 20px. Motion is subtle — smooth transitions (150-300ms) ease state changes without drawing attention.
|
|
|
|
---
|
|
|
|
## 2. Color Palette & Roles
|
|
|
|
| Token | Hex | Role | Use |
|
|
|---|---|---|---|
|
|
| ifm-color-primary-contrast-background | `#f6f8fa` | background | Page background, darkest surface |
|
|
| ifm-card-text-color | `#393a34` | surface | Card and panel backgrounds |
|
|
| ifm-color-warning-contrast-background | `#fff8e6` | surface | Card and panel backgrounds |
|
|
| ifm-color-gray-900 | `#1c1e21` | text-primary | Headings and body text |
|
|
| ifm-color-secondary | `#ebedf0` | text-muted | Captions, placeholders, secondary info |
|
|
| ifm-color-secondary-contrast-foreground | `#474748` | text-muted | Captions, placeholders, secondary info |
|
|
| ifm-color-gray-700 | `#606770` | text-muted | Captions, placeholders, secondary info |
|
|
| ifm-color-secondary-dark | `#d4d5d8` | text-muted | Captions, placeholders, secondary info |
|
|
| ifm-color-secondary-darker | `#c8c9cc` | text-muted | Captions, placeholders, secondary info |
|
|
| ifm-footer-background-color | `#2b3137` | border | Dividers, card borders, outlines |
|
|
| ifm-color-danger | `#fa383e` | danger | Error states, destructive actions |
|
|
| ifm-color-success | `#00a400` | success | Success states, positive indicators |
|
|
| ifm-color-warning | `#ffba00` | warning | Warning states, caution indicators |
|
|
| docsearch-container-background | `#090a11` | info | Informational highlights |
|
|
| ifm-color-black | `#000000` | unknown | Palette color |
|
|
| ifm-footer-background-color | `#303846` | unknown | Palette color |
|
|
| sidebar-hover-bg-color | `#4b39ef` | unknown | Palette color |
|
|
| ifm-color-primary | `#3578e5` | unknown | Palette color |
|
|
| ifm-color-info | `#54c7ec` | unknown | Palette color |
|
|
| ifm-color-primary-dark | `#306cce` | unknown | Palette color |
|
|
|
|
### CSS Variable Tokens
|
|
|
|
```css
|
|
--ifm-card-border-color: var(--ifm-color-primary);
|
|
--ifm-contrast-background-value: 90%;
|
|
--ifm-contrast-foreground-value: 70%;
|
|
--ifm-contrast-background-dark-value: 70%;
|
|
--ifm-contrast-foreground-dark-value: 90%;
|
|
--ifm-color-primary: #3578e5;
|
|
--ifm-color-secondary: #ebedf0;
|
|
--ifm-color-primary-dark: #306cce;
|
|
--ifm-color-primary-darker: #2d66c3;
|
|
--ifm-color-primary-darkest: #2554a0;
|
|
--ifm-color-primary-light: #538ce9;
|
|
--ifm-color-primary-lighter: #72a1ed;
|
|
--ifm-color-primary-lightest: #9abcf2;
|
|
--ifm-color-primary-contrast-background: #ebf2fc;
|
|
--ifm-color-primary-contrast-foreground: #102445;
|
|
--ifm-color-secondary-dark: #d4d5d8;
|
|
--ifm-color-secondary-darker: #c8c9cc;
|
|
--ifm-color-secondary-darkest: #a4a6a8;
|
|
--ifm-color-secondary-light: #eef0f2;
|
|
--ifm-color-secondary-lighter: #f1f2f5;
|
|
```
|
|
|
|
|
|
---
|
|
|
|
## 3. Typography Rules
|
|
|
|
**Font Stack:**
|
|
- **Product Sans** — Heading 1, Heading 2, Heading 3, Body, Caption
|
|
|
|
**Font Sources:**
|
|
|
|
```css
|
|
@font-face {
|
|
font-family: "Product Sans";
|
|
src: url("fonts/ProductSans-Regular.ttf") format("truetype");
|
|
font-weight: 400;
|
|
}
|
|
```
|
|
|
|
| Role | Font | Size | Weight |
|
|
|---|---|---|---|
|
|
| Heading 1 | Product Sans | 3rem | 700 |
|
|
| Heading 2 | Product Sans | 2.5rem | 700 |
|
|
| Heading 3 | Product Sans | 2rem | 700 |
|
|
| Body | Product Sans | 14px | 400 |
|
|
| Caption | Product Sans | .9rem | 400 |
|
|
|
|
**Typographic Rules:**
|
|
- Use **Product Sans** for all text — do not mix font families
|
|
- Maintain consistent hierarchy: no more than 3-4 font sizes per screen
|
|
- Headings use bold (600-700), body uses regular (400)
|
|
- Line height: 1.5 for body text, 1.2 for headings
|
|
- Use color and opacity for secondary hierarchy, not additional font sizes
|
|
|
|
|
|
---
|
|
|
|
## 4. Component Stylings
|
|
|
|
### Layout (1)
|
|
|
|
**Footer** — `html`
|
|
|
|
### Navigation (1)
|
|
|
|
**Navigation** — `html`
|
|
|
|
### Data Display (1)
|
|
|
|
**List** — `html`
|
|
|
|
### Data Input (1)
|
|
|
|
**Button** — `html`
|
|
- Animation:
|
|
|
|
### Media (3)
|
|
|
|
**Image** — `html`
|
|
|
|
**Icon** — `html`
|
|
|
|
**Map/Canvas** — `html`
|
|
|
|
|
|
|
|
---
|
|
|
|
## 5. Layout Principles
|
|
|
|
- **Base spacing unit:** 4px
|
|
- **Spacing scale:** 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 36, 48
|
|
- **Border radius:** .2rem, .25rem, .5rem, 1em, 2rem, 2px, 3px, 4px, 6px, 8px, 10px, 20px, 40px, inherit
|
|
- **Max content width:** 996px
|
|
|
|
**Spacing as Meaning:**
|
|
| Spacing | Use |
|
|
|---|---|
|
|
| 4-8px | Tight: related items within a group |
|
|
| 12-16px | Medium: between groups |
|
|
| 24-32px | Wide: between sections |
|
|
| 48px+ | Vast: major section breaks |
|
|
|
|
|
|
---
|
|
|
|
## 6. Depth & Elevation
|
|
|
|
### Flat — subtle depth hints
|
|
|
|
- `inset 0-1px 0 var(--ifm-color-emphasis-400)`
|
|
|
|
### Raised — cards, buttons, interactive elements
|
|
|
|
- `var(--ifm-blockquote-shadow)`
|
|
- `var(--ifm-global-shadow-lw)`
|
|
- `var(--ifm-global-shadow-md)`
|
|
|
|
### Floating — dropdowns, popovers, modals
|
|
|
|
- `0 0 10px var(--docusaurus-progress-bar-color),0 0 5px var(--docusaurus-progress-bar-color)`
|
|
- `0 4px 12px #0000001a`
|
|
- `0 4px 12px #ffffff1a`
|
|
|
|
### Z-Index Scale
|
|
|
|
`10, 200, 300, 1031`
|
|
|
|
|
|
|
|
---
|
|
|
|
## 7. Animation & Motion
|
|
|
|
This project uses **subtle motion**. Transitions smooth state changes without demanding attention.
|
|
|
|
### CSS Animations
|
|
|
|
- `@keyframes a`
|
|
- `@keyframes b`
|
|
|
|
### Animated Components
|
|
|
|
- **Button**:
|
|
|
|
### Motion Guidelines
|
|
|
|
- Duration: 150-300ms for micro-interactions, 300-500ms for page transitions
|
|
- Easing: `ease-out` for enters, `ease-in` for exits
|
|
- Always respect `prefers-reduced-motion`
|
|
|
|
|
|
---
|
|
|
|
## 8. Do's and Don'ts
|
|
|
|
### Do's
|
|
|
|
- Use `#f6f8fa` as the primary page background
|
|
- Use **Product Sans** for all UI text
|
|
- Follow the **4px** spacing grid for all margins, padding, and gaps
|
|
- Use the defined shadow tokens for elevation — see Section 6
|
|
- Use border-radius from the scale: .2rem, .25rem, .5rem, 1em, 2rem
|
|
- Reuse existing components from Section 4 before creating new ones
|
|
|
|
### Don'ts
|
|
|
|
- Don't introduce colors outside this palette — extend the design tokens first
|
|
- Don't mix font families — use Product Sans consistently
|
|
- Don't use arbitrary spacing values — stick to multiples of 4px
|
|
- Don't create custom box-shadow values outside the system tokens
|
|
- Don't use arbitrary border-radius values — pick from the defined scale
|
|
- Don't duplicate component patterns — check Section 4 first
|
|
- Don't use backdrop-blur or blur effects
|
|
|
|
### Anti-Patterns (detected from codebase)
|
|
|
|
- No blur or backdrop-blur effects
|
|
- No zebra striping on tables/lists
|
|
|
|
|
|
---
|
|
|
|
## 9. Responsive Behavior
|
|
|
|
| Name | Value | Source |
|
|
|---|---|---|
|
|
| sm | 576px | css |
|
|
| md | 768px | css |
|
|
| lg | 996px | css |
|
|
| lg | 997px | css |
|
|
| lg | 1024px | css |
|
|
| 2xl | 1440px | css |
|
|
|
|
**Approach:** Use `@media (min-width: ...)` queries matching the breakpoints above.
|
|
|
|
|
|
---
|
|
|
|
## 10. Agent Prompt Guide
|
|
|
|
Use these as starting points when building new UI:
|
|
|
|
### Build a Card
|
|
|
|
```
|
|
Background: #393a34
|
|
Border: 1px solid #2b3137
|
|
Radius: 4px
|
|
Padding: 16px
|
|
Font: Product Sans
|
|
Use shadow tokens from Section 6.
|
|
```
|
|
|
|
### Build a Button
|
|
|
|
```
|
|
Primary: bg var(--accent), text white
|
|
Ghost: bg transparent, border #2b3137
|
|
Padding: 8px 16px
|
|
Radius: 4px
|
|
Hover: opacity 0.9 or lighter shade
|
|
Focus: ring with var(--accent)
|
|
```
|
|
|
|
### Build a Page Layout
|
|
|
|
```
|
|
Background: #f6f8fa
|
|
Max-width: 996px, centered
|
|
Grid: 4px base
|
|
Responsive: mobile-first, breakpoints from Section 9
|
|
```
|
|
|
|
### Build a Stats Card
|
|
|
|
```
|
|
Surface: #393a34
|
|
Label: #ebedf0 (muted, 12px, uppercase)
|
|
Value: #1c1e21 (primary, 24-32px, bold)
|
|
Status: use success/warning/danger from Section 2
|
|
```
|
|
|
|
### Build a Form
|
|
|
|
```
|
|
Input bg: #f6f8fa
|
|
Input border: 1px solid #2b3137
|
|
Focus: border-color var(--accent)
|
|
Label: #ebedf0 12px
|
|
Spacing: 16px between fields
|
|
Radius: 4px
|
|
```
|
|
|
|
### General Component
|
|
|
|
```
|
|
1. Read DESIGN.md Sections 2-6 for tokens
|
|
2. Colors: only from palette
|
|
3. Font: Product Sans, type scale from Section 3
|
|
4. Spacing: 4px grid
|
|
5. Components: match patterns from Section 4
|
|
6. Elevation: shadow tokens
|
|
```
|
|
|
|
## Bundled Fonts (fonts/)
|
|
|
|
The following font files are bundled in the `fonts/` directory:
|
|
|
|
- `fonts/ProductSans-Regular.ttf`
|
|
|
|
Use these local font files in `@font-face` declarations instead of fetching from Google Fonts.
|
|
|
|
## Homepage Screenshots (screenshots/)
|
|
|
|
|
|
|