ChatGPT Prompt for Design Systems
Architect a design token system for a playful/whimsical product in the drone-services space.
More prompts for Design Systems.
Define a complete component library spec with atomic design hierarchy, props, variants, states, and implementation guidelines for a scalable design system.
Create a detailed icon set brief that ensures visual consistency, appropriate metaphors, and production-ready specifications for a custom icon library.
Document the Collapsible Sidebar Navigation design pattern for use in a survey builder design system.
Define a detailed component specification for Pagination in a monochromatic design system.
Document the Split-Button Dropdown design pattern for use in a chat application design system.
Define a detailed component specification for Alert Banner in a skeuomorphic design system.
You are an expert design technologist with deep expertise in design tokens. Architect a comprehensive design token system for a playful/whimsical product serving the drone-services industry. **Target users:** CMOs **Framework:** Svelte **Design tool:** Style Dictionary **Goal:** build partnerships ## Token Architecture Philosophy - Multi-tier token strategy: global (primitive) -> semantic (alias) -> component tokens - Naming convention rationale and rules - Theme support strategy (light, dark, high-contrast, brand themes) - Token format: JSON structure with $value, $type, and $description ## Global / Primitive Tokens ### Color Primitives - Define a base color ramp for 8 hues (primary, secondary, accent, neutral, success, warning, error, info) - Each hue: 12 steps (50 through 950) with HEX values - Pure black and white tokens ### Spacing Primitives - Base unit (e.g., 4px) - Spacing scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24 (in base units) - Provide pixel values for each ### Typography Primitives - Font family tokens (primary, secondary, mono) - Font size tokens (12 steps from xs to 5xl with px/rem values) - Font weight tokens (thin through black, numeric values) - Line height tokens (tight, snug, normal, relaxed, loose with decimal values) - Letter spacing tokens (tighter, tight, normal, wide, wider) ### Border Primitives - Border width: 0, 1, 2, 4 (px values) - Border radius: none, sm, md, lg, xl, 2xl, full (px values) ### Shadow Primitives - Elevation levels: 0 through 5 (CSS box-shadow values) - Inner shadow for inset elements ### Motion Primitives - Duration: instant, fast, normal, slow, slower (ms values) - Easing: ease-in, ease-out, ease-in-out, spring (CSS timing functions) ## Semantic / Alias Tokens Map primitives to meaningful semantic names: - surface.background, surface.foreground, surface.border - interactive.default, interactive.hover, interactive.active, interactive.disabled - feedback.success, feedback.warning, feedback.error, feedback.info - text.primary, text.secondary, text.tertiary, text.disabled, text.inverse - spacing.inline, spacing.stack, spacing.inset (sm, md, lg for each) - typography.heading, typography.body, typography.label, typography.caption ## Component Tokens (3 example components) Show how semantic tokens compose into component-level tokens for: 1. Button component tokens 2. Input field component tokens 3. Card component tokens ## Theme Definitions - Light theme: full semantic token overrides - Dark theme: full semantic token overrides - Explain the mapping rules between light and dark (e.g., 100 maps to 900) ## Implementation Guide - Token file format (JSON, YAML, or JS module) - Build pipeline: tokens to CSS custom properties, Tailwind config, and Svelte theme - Token syncing between Style Dictionary and code - Versioning and changelog strategy for token updates Organize your output using a clear framework with labeled sections. Each section should build on the previous one.