skills/docs-design/SKILL.md

name	description
docs-design	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

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

@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

.card {
  background: #393a34;
  border: 1px solid #2b3137;
  border-radius: 4px;
  padding: 16px;
  box-shadow: var(--ifm-blockquote-shadow);
}

<div class="card">
  <h3>Card Title</h3>
  <p>Card content goes here.</p>
</div>

Button

/* 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;
}

<button class="btn-primary">Get Started</button>
<button class="btn-ghost">Learn More</button>

Input

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

<input class="input" type="text" placeholder="Search..." />

Badge / Chip

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  background: #393a34;
  color: #ebedf0;
}

<span class="badge">New</span>
<span class="badge">Beta</span>

Modal / Dialog

.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);
}

<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

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

<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

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

<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

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

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