skills.rest
yunior123
yunior123COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-tokens

Provides color, typography, spacing, and radius tokens for Flutter UI styling.

Updated Mar 9, 2026
Search Tags:#typography#theming#color palette#design tokens#flutter#dart#ui styling
One-click install
npx skills add https://github.com/yunior123/origna_gta_firebase --skill design-tokens-yunior123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-tokens
Source: https://github.com/yunior123/origna_gta_firebase/tree/main/.claude/skills/design-tokens
Command: npx skills add https://github.com/yunior123/origna_gta_firebase --skill design-tokens-yunior123

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers working on the OrignaGTA Flutter app often hardcode colors or guess hex values, leading to inconsistent UI across screens and email templates. This Skill centralizes the official design tokens so styling decisions stay consistent. ## Core Features & Use Cases - Color Palette Reference: Lists primary, secondary, tertiary, accent, surface, and semantic colors (success, warning, error) with exact hex values. - Gradient Definitions: Documents the background gradient (#1F235A → #2F3B8F → #764BA2) used across screens. - Use Case: When building a new Flutter screen or updating an email template, consult this Skill to apply the correct token values instead of inventing new colors. ## Quick Start Ask the AI to style a new Flutter widget using the design tokens from design_tokens.dart.

Frequently Asked Questions about design-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use design tokens in a Flutter app?▼

Import the design_tokens.dart file from origna_gta/lib/utils and reference its constants for colors, spacing, and radius values. Never hardcode hex values directly in widgets; always use the token constants.

What are the primary brand colors for this Flutter project?▼

The primary color is #667EEA, secondary is #764BA2, tertiary is #FF6B6B, and accent is #5CE1E6. The dark surface color is #1A1A2E, and the background gradient runs from #1F235A through #2F3B8F to #764BA2.

Do email templates use the same design tokens as the app?▼

Yes, email templates mirror the same color tokens defined in design_tokens.dart. This keeps branding consistent between the Flutter app UI and transactional emails.

Why should I avoid hardcoding colors in Flutter widgets?▼

Hardcoded colors cause visual inconsistency when the palette changes and make theme updates error-prone. Referencing tokens from design_tokens.dart ensures every screen updates from a single source of truth.

What semantic colors are defined for success, warning, and error states?▼

Success is #10B981 (green), warning is #F59E0B (amber), and error is #EF4444 (red). Use these for status indicators, validation messages, and alerts throughout the app.

Related Skills

Explore More Design & Creative Skills→
EzioPeterEzioPeter
1

brand-guidelines

Enforce Anthropic brand styling on documents, presentations, and UI mockups.

Community
Intermediate
archview-aiarchview-ai

openwebf-host-theming-sync

Synchronize Flutter and WebF theming via CSS variables and prefers-color-scheme.

Official
Intermediate
zivtechzivtech

design-token-critic

Audit design token systems for naming consistency and cross-platform parity.

Official
Advanced
tiantangcao1980-webtiantangcao1980-web
4

tdesign-flutter

Configure Flutter apps with Tencent TDesign widgets and ThemeData extensions.

Community
Intermediate