vndangkhoa/open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-06-01 03:14:35 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 1
open-design/design-systems/energetic/DESIGN.md
Zoltán Szőgyényi abaae96eb2
update: add 57 DESIGN.md files from awesome-design-skills (#92) 
* update: add 57 DESIGN.md files from awesome-design-skills

* Update i18n coverage for added design systems

---------

Co-authored-by: mrcfps <mrc@powerformer.com>
2026-05-01 16:57:25 +08:00

3.1 KiB
Raw Permalink Blame History

Design System Inspired by Energetic

Category: Bold & Expressive Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.

1. Visual Theme & Atmosphere

Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.

  • Visual style: bold, geometric, vibrant, thick-bordered
  • Color stance: primary, secondary, neutral
  • Design intent: Keep outputs recognizable to this style family while preserving usability and readability.

2. Color

  • Primary: #EA580B — Token from style foundations.

  • Secondary: #F59E0B — Token from style foundations.

  • Success: #16A34A — Token from style foundations.

  • Warning: #D97706 — Token from style foundations.

  • Danger: #DC2626 — Token from style foundations.

  • Background: #FFEDD5 — Token from style foundations.

  • Surface: #FDBA74 — Token from style foundations.

  • Text: #EA580C — Token from style foundations.

  • Neutral: #FDBA74 — Derived from the surface token for official format compatibility.

  • Favor Primary (#EA580B) for CTA emphasis.

  • Use Surface (#FDBA74) for large backgrounds and cards.

  • Keep body copy on Text (#EA580C) for legibility.

3. Typography

  • Scale: 12/14/16/20/24/32/48
  • Families: primary=Limelight, display=Limelight, mono=JetBrains Mono
  • Weights: 400
  • Headings should carry the style personality; body text should optimize scanability and contrast.

4. Spacing & Grid

  • Spacing scale: 4/8/12/16/24/32/48/64
  • 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 #EA580B; 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 (#EA580B) 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.