16 days ago•

Create a comprehensive design system documentation layout with component previews

Views

4.2K

Copies

913

Likes

664

Comments

Copy rate

22.0%

Prompt

Generate a visual layout for a design system documentation page. The system is called "[system_name]" for a [product_context].

The documentation page should show:
- A clean header with the system name and version number
- Component grid showing button variants (primary, secondary, ghost, destructive) in all states (default, hover, pressed, disabled)
- Color token visualization with semantic mapping (surface, text, border, accent)
- Typography scale showing the full hierarchy from display to caption
- Spacing grid showing the 4px base unit system
- Icon grid with a selection of system icons at multiple sizes
- A "kitchen sink" card showing all components composed together

Style: clean, technical, professional — like a Figma component page rendered as a beautiful poster. Light background, structured grid layout, subtle annotations. Think "Radix UI documentation meets Swiss design poster."

Aspect ratio: 3:4, portrait orientation for print-friendly documentation.

Customise this prompt

Fill in 2 variables to personalise this prompt

Preview

Generate a visual layout for a design system documentation page. The system is called "[system_name]" for a [product_context]. The documentation page should show: - A clean header with the system name and version number - Component grid showing button variants (primary, secondary, ghost, destructive) in all states (default, hover, pressed, disabled) - Color token visualization with semantic mapping (surface, text, border, accent) - Typography scale showing the full hierarchy from display to caption - Spacing grid showing the 4px base unit system - Icon grid with a selection of system icons at multiple sizes - A "kitchen sink" card showing all components composed together Style: clean, technical, professional — like a Figma component page rendered as a beautiful poster. Light background, structured grid layout, subtle annotations. Think "Radix UI documentation meets Swiss design poster." Aspect ratio: 3:4, portrait orientation for print-friendly documentation.

Example output

A meticulously organized design system documentation poster for "Horizon DS v2.4" — a design system for a fintech trading platform. The layout follows a strict 12-column grid on a warm off-white (#FAFAF8) background with hairline grid lines visible at 10% opacity. Top section: the header reads "horizon" in a clean geometric sans-serif at 64px, with "design system" in lighter weight below it, and "v2.4 — april 2026" in a monospace font aligned right. A thin charcoal rule separates it from the content. Left column (spanning 7 columns): a component showcase organized in labeled rows. Button row shows 16 buttons in a 4x4 grid — four variants (solid indigo, outlined, ghost, red destructive) each in four states (default, hover with subtle background shift, pressed with scale-down, disabled at 40% opacity). Each button has a tiny annotation below showing the CSS class name in monospace. Below the buttons, an input field section shows text inputs in default, focused (indigo border), error (red border with message), and disabled states, each with proper labels. A card component section shows three card variants: elevated (with shadow), outlined (with border), and flat (background only). Right column (spanning 5 columns): the design tokens section. Color tokens displayed as horizontal strips — each strip shows the color swatch, the token name (like surface.primary, text.secondary, border.default), and the hex value. The palette uses deep indigo (#3730A3) as primary, warm grays for surfaces, and semantic colors for states. Typography scale below shows each level from Display (44px) down to Caption (11px) with the actual text rendered, plus the font-size, line-height, and weight annotated in a lighter color beside each. Spacing section shows squares growing from 4px to 64px, each labeled with the token (space-1 through space-16). Bottom third: a "kitchen sink" composition showing a realistic fintech UI card that combines all the system components — a trading pair header, a price chart area (simplified), action buttons, input fields for amounts, and status badges. This demonstrates how all the individual tokens and components work in harmony. Footer: a thin rule, then "maintained by the horizon design team — last updated april 2026" in small monospace text. The entire poster has a quiet, confident professionalism — dense with information but never cluttered, every element precisely placed on the grid.

Prompt

Customise this prompt

Example output

Related prompts