skills.rest
Bumh3rr
Bumh3rrCOMMUNITY
Explore all skills by this author →
GitHub

solvyx-design-tokens

Provides Solvyx design tokens for colors, typography, spacing, shapes, and elevation in Kotlin Compose.

Updated May 9, 2026
Search Tags:#typography#design system#color palette#design tokens#kotlin#jetpack compose#dark theme
One-click install
npx skills add https://github.com/Bumh3rr/solvyx-app --skill solvyx-design-tokens-bumh3rr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: solvyx-design-tokens
Source: https://github.com/Bumh3rr/solvyx-app/tree/main/.opencode/skill/solvyx-design-tokens
Command: npx skills add https://github.com/Bumh3rr/solvyx-app --skill solvyx-design-tokens-bumh3rr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Android developers on the Solvyx project risk hardcoding colors, spacing, and typography values, which breaks visual consistency and complicates light/dark theme support. This Skill centralizes every approved design token so UI code always references a single source of truth. ## Core Features & Use Cases - Complete Token Reference: Teal color palette, support colors, Nunito typography scale, shapes, spacing, touch targets, elevation, icon/avatar sizes, and animation timings, each with light and dark variants. - Berto Mascot Guidelines: Emotional-state assets and context-specific sizes for the Berto character across home, dialogs, empty states, and bottom navigation. - Governance Rules: Anti-patterns to avoid (hardcoded hex colors, literal dp values) and a documented process for extending tokens safely. - Use Case: When building a new Jetpack Compose screen, look up MaterialTheme.colorScheme.primary instead of Color(0xFF0F766E) and use SolvyxSpacing.md for item separation, guaranteeing theme consistency. ## Quick Start Ask the assistant to apply the Solvyx design tokens when styling a new Compose screen so all colors, spacing, and typography come from the documented tokens.

Frequently Asked Questions about solvyx-design-tokens

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

FAQPage Schema
How do I use Solvyx design tokens in Jetpack Compose?▼

Reference semantic tokens like MaterialTheme.colorScheme.primary instead of raw hex values, and use the SolvyxSpacing object for dimensions such as Arrangement.spacedBy(SolvyxSpacing.md). Every token has light and dark variants defined in Color.kt and Theme.kt.

What color palette does the Solvyx app use?▼

Solvyx uses a Teal palette with TealPrimary (#0F766E light, #5BAF9E dark) plus support colors like BackgroundApp, SOSRed, WarningAmber, SuccessGreen, and InfoBlue. Each token includes both light and dark theme values.

When should I create a new design token?▼

Create a new token only when no existing token covers the case, then add it to Color.kt with light and dark variants, update Theme.kt if needed, and document it. One-off values can be hardcoded temporarily with a comment.

Which Berto asset should I use for each screen state?▼

Use berto_saludando for onboarding and home, berto_preocupado for craving or anxiety states, berto_feliz for celebrations, and berto_sin_internet for offline states. Sizes range from 44dp in guide cards to 130dp on the home screen.

What are the minimum touch target sizes for accessibility?▼

The minimum accessible touch target is 48dp x 48dp, with 56dp x 56dp recommended for primary buttons and 64dp x 64dp for the main SOS call-to-action. These values ensure accessible interaction targets across the app.

Related Skills

Explore More Design & Creative Skills→
bcwgamesbcwgames

branding-generator

Generate three brand identity directions with naming, color, typography, and guidelines.

Community
Advanced
igorescodroigorescodro
1.6k

write-design-system-component

Implements theme-aware Kuvio Compose Multiplatform components for the Alkaa design system.

Community
Intermediate
launchapp-devlaunchapp-dev
38

design-token-audit

Audit design token usage across multi-project design systems to identify inconsistencies and gaps.

Official
Advanced
flutterflutter
2.8k

flutter-theming-apps

Customize Flutter app appearance using Material 3 theming and adaptive design.

Official
Intermediate