Skip to content

08 — DESIGN

Design resources

Official assets, tokens, and guidance for building with Gn8.

SEC.1 — RESOURCE REGISTER

Public resources

All design values originate in @libs/design/tokens/src/design-token.ts. Downloads are generated from the same source.

  1. 08.1 — GUIDE Style guide Gn8 visual principles for logos, color, typography, spacing, and composition, with applications to websites, native apps, slides, and print.
  2. 08.3 — TOKEN Token The complete manifest for color, spacing, typography, and motion.
  3. 08.2 — LOGO Logo Four official SVG assets and the terms governing their use.
08.4 —Color palette Approved colors and usage across both themes

SEC.2 — START BY TASK

Start by task

  • Understand the rules

    Read the principles, writing, visual design, and application chapters.

  • Review accessibility

    Work through the accessibility checklist for visual information. This is a manual review, not an automated check.

  • Follow the review workflow

    Check the source and the rendered result, then detect, fix, and verify per medium.

  • Try the sample dashboard

    Compare one dashboard in shadcn/ui, Appica UI, and Arc UI across the four palettes.

  • Check color pairs

    Open a color role to see the contrast ratio and verdict for its defined foreground/background pairs.

  • Use token values

    Search, copy, and export token values as CSS, JSON, or VS Code files.

Tokens are available under the MIT License. Separate terms apply to logo use.