c12c816a44
- Introduced comprehensive design documentation and JSON configurations for multiple design systems, including Agentic, Airtable, Ant, Apple, Application, Arc, and Artistic. - Each design system includes detailed guidelines on visual themes, color palettes, typography, spacing, layout, components, and interaction principles. - Enhanced the overall design framework to support diverse user interfaces and improve consistency across applications. This update significantly enriches the design resources available for developers, enabling them to create visually cohesive and user-friendly applications.
3 KiB
Design System Inspired by Expressive
Category: Bold & Expressive Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.
1. Visual Theme & Atmosphere
Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.
- Visual style: modern, playful
- Color stance: primary, secondary, neutral, success, warning, danger
- Design intent: Keep outputs recognizable to this style family while preserving usability and readability.
2. Color
-
Primary:
#DB2777— Token from style foundations. -
Secondary:
#2563EB— Token from style foundations. -
Success:
#16A34A— Token from style foundations. -
Warning:
#D97706— Token from style foundations. -
Danger:
#DC2626— Token from style foundations. -
Surface:
#FFFFFF— Token from style foundations. -
Text:
#111827— Token from style foundations. -
Neutral:
#FFFFFF— Derived from the surface token for official format compatibility. -
Favor Primary (#DB2777) for CTA emphasis.
-
Use Surface (#FFFFFF) for large backgrounds and cards.
-
Keep body copy on Text (#111827) for legibility.
3. Typography
- Scale: 14/16/18/24/32/40
- Families: primary=IBM Plex Mono, display=IBM Plex Mono, mono=IBM Plex Mono
- Weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
- Headings should carry the style personality; body text should optimize scanability and contrast.
4. Spacing & Grid
- Spacing scale: 4/8/12/16/24/32
- Keep vertical rhythm consistent across sections and components.
- Align columns and modules to a predictable grid; avoid ad-hoc offsets.
5. Layout & Composition
- Prefer clear content blocks with consistent internal padding.
- Keep hierarchy obvious: headline → support text → primary action.
- Use whitespace to separate concerns before adding borders or shadows.
6. Components
- Buttons: primary action uses
#DB2777; secondary actions stay neutral. - Inputs: strong focus-visible states, clear labels, and predictable error messaging.
- Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
7. Motion & Interaction
- Use subtle transitions that emphasize Primary (#DB2777) as the interaction signal.
- Default to short, purposeful transitions (150–250ms) with stable easing.
- Ensure hover, focus-visible, active, disabled, and loading states are explicit.
8. Voice & Brand
- Tone should reflect the visual style: concise, confident, and product-specific.
- Keep microcopy action-oriented and avoid generic filler language.
- Preserve the style identity in headlines while keeping UI labels literal and clear.
9. Anti-patterns
- Do not introduce off-palette colors when an existing token can solve the problem.
- Do not flatten hierarchy by using the same type size/weight for all text.
- Do not add decorative effects that reduce readability or accessibility.
- Do not mix unrelated visual metaphors in the same interface.