---
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

![docs Homepage](screenshots/homepage.png)

> 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.

![docs Homepage](../screenshots/homepage.png)

---

## 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/)

![homepage.png](screenshots/homepage.png)