skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-expo

Apply Expo's design system tokens to generate brand-accurate UI interfaces.

Updated Feb 23, 2026
Search Tags:#typography#frontend#design system#color palette#design tokens#expo#ui generation
One-click install
npx skills add https://github.com/deepparser/skills --skill design-expo-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-expo
Source: https://github.com/deepparser/skills/tree/main/design-expo
Command: npx skills add https://github.com/deepparser/skills --skill design-expo-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Expo's visual identity requires exact design tokens — colors, typography, spacing, and component styles — which are tedious to reverse-engineer manually. This Skill provides the complete Expo design system so generated UI matches the brand precisely. ## Core Features & Use Cases - Complete Design Tokens: Exact hex colors (Cloud Gray #f0f0f3, Expo Black #000000, Slate Gray #60646c), typography scale (Inter 400–900, JetBrains Mono), spacing, radius, and elevation values. - Component Specifications: Detailed styling rules for buttons, cards, navigation, forms, code blocks, and status badges, including pill-shaped geometry and whisper-soft shadows. - Light & Dark Previews: Bundled HTML preview files (preview.html, preview-dark.html) showing the full token catalog rendered in both themes for visual verification. - Use Case: When asked to build a landing page styled like Expo, the Skill supplies the exact 64px headline with -3px letter-spacing, black pill CTA, and gallery-like 96px+ section spacing that define Expo's look. ## Quick Start Use the design-expo skill to create a hero section styled like Expo's website with a black pill CTA button.

Frequently Asked Questions about design-expo

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

FAQPage Schema
How do I build a UI that looks like Expo's website?▼

Use this Skill's design tokens: Cloud Gray (#f0f0f3) page background, Pure White cards, Expo Black (#000000) headlines at 64px with -3px letter-spacing, and pill-shaped (9999px) CTA buttons. The bundled preview.html shows the full token catalog rendered.

What fonts and colors does the Expo design system use?▼

Expo uses Inter (weights 400–900) as its sole typeface and JetBrains Mono for code. The palette is monochromatic: Expo Black (#000000), Near Black (#1c2024), Slate Gray (#60646c), Cloud Gray (#f0f0f3), with Link Cobalt (#0d74ce) for links.

Does the Expo design system support dark mode?▼

Yes, the Skill includes a dark theme preview (preview-dark.html) using Banner Dark (#171717) page background and Widget Dark (#1a1a1a) card surfaces. Dark mode inverts the CTA to a white pill button and uses Dark Slate (#363a3f) borders.

What border radius values should I use for Expo-style components?▼

Use 6px for buttons and inputs, 8px for standard cards, 16px for feature panels, 24px for images and video containers, 32px for hero CTAs, and 9999px for pill-shaped primary buttons. Sharp corners below 6px break the design language.

When should I not use the Expo design system?▼

Avoid it when the project requires colorful, gradient-heavy, or decorative interfaces — Expo's system is strictly monochromatic with color reserved for product screenshots. It also suits developer-focused products better than consumer or playful brands.

Related Skills

Explore More Design & Creative Skills→
bfree-trainerbfree-trainer
60

bolder

Amplify safe designs with bolder typography, color, and layout.

Official
Advanced
fengjutianfengjutian

react-native-dev

Guide building and deploying React Native and Expo applications.

Community
Intermediate
fiftynotaififtynotai
10

ui-design

Generate accessible UI component specifications with WCAG 2.1 AA contrast ratios.

Community
Intermediate
ArnavPuriArnavPuri
3

design-context

Establish and manage design context with brand identity, color palettes, and typography.

Community
Intermediate