Create a multi-page UI style system board with an 8px grid, color tokens, typography scale, component states, and aligned layout examples.
Image Prompt
Seedream 5.0 Lite
Image prompt template
Preview
Image Prompt
Preview for UI Style System Board, focused on system consistency, grid alignment, editable tokens, and product-ready UI examples.
Full prompt
Multi-page UI style system board with 8px grid, color tokens, typography scale, components, and responsive layouts.
Create a polished multi-page UI style system board for [PRODUCT_OR_BRAND]. Present the system as a cohesive set of design pages on one clean preview canvas. Use a strict 8px spacing grid, consistent margins, precise alignment, and a clear hierarchy across every page. Include a color token panel with primary, secondary, neutral, semantic, and background swatches; a typography scale with heading, body, caption, and numeric styles; a component sheet with buttons, inputs, cards, navigation, badges, and empty states; and two responsive layout examples showing desktop and mobile proportions. Keep the system visually consistent, editable, and suitable for a SaaS product, creator tool, ecommerce brand, or internal dashboard. Use realistic placeholder copy only where needed, and keep labels short enough to remain readable. Avoid real logos, copied design systems, brand names not supplied by the user, distorted typography, inconsistent spacing, mismatched shadows, decorative clutter, inaccessible contrast, and component examples that break the grid.
Usage notes
Replace the product type, brand tone, palette direction, component list, layout examples, and accessibility requirements before running.
Prompt FAQ
Quick checks for inputs, model fit, and how to adapt the template without weakening the result.
Define the product type, brand tone, base palette, typography personality, component scope, and whether the examples should feel marketing-led or dashboard-led.
It creates a visual style-system board for exploration and presentation. Review spacing, contrast, typography, and component behavior before converting it into production UI tokens.
Check that labels are readable, color swatches are distinct, type hierarchy is clear, components share the same spacing logic, and no real brand system was copied.
More prompts in this mode
