f02k

Generate complete React Native / Expo design systems from a single base color.

npx f02k init

Features

• Color scales — Generate 11-stop (50–950) color scales from one base color
• Light + Dark — Full semantic token sets for both modes
• Design tokens — Background, surface, text, border, primary, success, warning, danger, info, and more
• Typography system — 8 sizes × 4 weights, fully tokenized
• Spacing scale — 14-step spacing tokens
• Radius presets — sharp, default, rounded, pill
• Theme presets — apple, material3, linear, github, notion, stripe
• Neutral families — zinc, slate, gray, stone, neutral
• Component registry — Install individual components: button, input, card, badge, avatar, modal, switch
• ThemeProvider + useTheme — Fully typed React Native context with system/light/dark mode
• TypeScript — Strict, full type safety, no any

Quick Start

# Create a new Expo project
npx create-expo-app my-app
cd my-app

# Initialize f02k
npx f02k init

# Install some components
npx f02k add button card input

# Regenerate with a different color later
npx f02k generate --color "#6366f1"

CLI Commands

f02k init

Initializes a design system in your project.

npx f02k init --color "#2563EB" --preset material3 --radius rounded --neutral slate

Options: | Flag | Default | Description | |------|---------|-------------| | -c, --color | #2563EB | Base color in hex | | -p, --preset | material3 | Theme preset | | -r, --radius | default | Radius preset | | -n, --neutral | neutral | Neutral color family | | -o, --output | . | Output directory |

f02k generate

Regenerate theme tokens from a new base color.

npx f02k generate --color "#ef4444"

f02k add

Install registry components.

npx f02k add button
npx f02k add card input badge

f02k list

List all available registry components.

npx f02k list

Generated Structure

src/theme/
├── tokens/
│   ├── tokens.ts        # Semantic tokens (light + dark)
│   └── palettes.ts      # Color palettes (light + dark)
├── providers/
│   └── theme-provider.tsx  # ThemeProvider + useTheme
├── hooks/
│   └── use-theme.ts     # Re-export of useTheme
├── components/          # Installed components
│   ├── button.tsx
│   ├── card.tsx
│   └── ...
└── index.ts

Usage in React Native

import { ThemeProvider, useTheme } from "./src/theme";

function App() {
  return (
    <ThemeProvider>
      <MyScreen />
    </ThemeProvider>
  );
}

function MyScreen() {
  const { tokens, mode, toggleMode } = useTheme();

  return (
    <View style={{ backgroundColor: tokens.background }}>
      <Text style={{ color: tokens.text }}>Hello</Text>
    </View>
  );
}

Semantic Tokens

| Token | Purpose | |-------|---------| | background | App background | | surface | Card/surface background | | surfaceSecondary | Secondary surface | | card | Card container | | text | Primary text | | textSecondary | Secondary text | | textMuted | Muted/placeholder text | | textDisabled | Disabled text | | border | Borders | | divider | Dividers | | primary | Brand color | | primaryForeground | Text on primary | | primarySoft | Soft primary bg | | success / warning / danger / info | Semantic colors | | input | Input background | | inputBorder | Input border | | inputFocus | Input focus border | | overlay | Modal overlay | | shadow | Shadow color |

Available Components

• button — Pressable with variants (primary, secondary, outline, ghost) and sizes (sm, md, lg)
• input — Text input with label, focus state, error display
• card — Container with default/elevated/outlined variants
• badge — Status label with semantic color variants
• avatar — Image or initials with size variants
• modal — Overlay dialog with size variants (sm, md, lg, full)
• switch — Toggle switch using semantic colors

License

MIT