SkiStar Design System

A complete React Native design system built from the SkiStar Figma design file, with Storybook documentation, npm package, and example apps.

Live Links

| Project | URL | |---------|-----| | Storybook | skistar-design-system-test.netlify.app | | Web App | skistar-design-system-test-web.netlify.app | | Mobile (Expo Web) | skistar-design-system-test-mobile.netlify.app | | npm Package | @daniellauding/skistar-design-system |

Repos

| Repo | Description | |------|-------------| | skistar-design-system-test | Design system + Storybook | | skistar-design-system-test-ios | Expo React Native app | | skistar-design-system-test-web | React web app |

Architecture

Figma (SkiStar-App-DesignSystem)
  │
  ├── Figma MCP (Desktop Bridge)
  │   └── Extracts: tokens, icons (131 SVG), components, specs
  │
  ▼
DesignSystemTest/ (this repo)
  ├── src/tokens/        → Design tokens (colors, typography, spacing, radius)
  ├── src/components/    → 27 React Native components
  ├── src/stories/       → Storybook stories + docs
  └── npm publish        → @daniellauding/skistar-design-system
                              │
              ┌───────────────┼───────────────┐
              ▼               ▼               ▼
        SkiStarApp/     SkiStarWeb/      Any project
        (Expo RN)       (Vite React)     npm install

Component List (27 components)

Inputs & Actions

| Component | Figma Node | Description | |-----------|------------|-------------| | Button | 6330:14686 | Primary/Secondary/Functional/Text, Medium/Small | | Chip | 1:6024 | Active/Inactive filter chip | | SearchField | 1:6032 | Search with SVG icon, states | | TextField | 1:6066 | Input with floating label, error state | | Toggle | 7825:167282 | On/off switch (48x28) | | Checkmark | 6576:13302 | Circle check Default/Selected | | QuantityStepper | 7847:122273 | +/- buttons with count | | FAB | 6513:4384 | Floating action button (56x56) |

Navigation

| Component | Figma Node | Description | |-----------|------------|-------------| | BottomTabBar | 7581:48226 | 5-tab bottom navigation | | AppBar | 7263:57323 | Header with back/action buttons | | TabBar | 5436:30437 | Scrollable text tabs | | SegmentedController | 1:5539 | Underline tab bar |

Content & Layout

| Component | Figma Node | Description | |-----------|------------|-------------| | Card | 7242:25049 | Image/body/footer, 3 elevation levels | | ListItem / List | 7825:167745 | Flexible list cell with slots | | Icon | 6330:14476 | 131 SVG icons from Figma | | Logo | 1:569 | 9 resort logotypes | | EmptyState | 1:379 | 15 types with SVG illustrations | | WeatherCard | 7204:40222 | Lift/Pist/Väder card with weather icons | | DestinationHeader | 1:18348 | Hero header with logo + curve |

Overlays & Feedback

| Component | Figma Node | Description | |-----------|------------|-------------| | BottomSheet | 7832:168981 | Draggable sheet, 3 snap points | | ModalDialog | 7329:11695 | Centered dialog with actions | | Toast | 6151:15926 | Notification banner |

AI Agent

| Component | Figma Node | Description | |-----------|------------|-------------| | ChatBubble | 6112:5154 | Agent/User chat bubbles | | PromptArea | 7850:124724 | Chat input with send button |

Maps

| Component | Description | |-----------|-------------| | MapView | Mapbox GL JS (web), placeholder for RN |

Design Tokens

All tokens map 1:1 to Figma variables in the Tokens collection (Light/Dark modes).

Usage in JS (React Native)

import { colors, lightTheme, typography, spacing, radius } from '@daniellauding/skistar-design-system/tokens';
import { ThemeProvider, useTheme } from '@daniellauding/skistar-design-system/theme';

// Wrap app
<ThemeProvider mode="dark">
  <App />
</ThemeProvider>

// In components
const { theme } = useTheme();
<Text style={{ color: theme.text.primary, fontSize: typography.size.md }}>Hello</Text>

Token Categories

| Category | Examples | Figma Collection | |----------|---------|-----------------| | Colors | colors.brand.red600, colors.neutral[800] | Colour | | Text | theme.text.primary, theme.text.secondary | Tokens (Light/Dark) | | Surface | theme.surface.card, theme.surface.background | Tokens | | Action | theme.action.primaryDefault | Tokens | | Typography | typography.size.md (16px), typography.family.body (DM Sans) | Typography | | Spacing | spacing.lg (16px), spacing.xl (24px) | Spacing | | Radius | radius.md (12px), radius.xl (100px) | Radius |

Dark Mode

All components use useTheme() — switching mode changes all colors automatically:

• Background: #FFFFFF → #000000
• Cards: #FFFFFF → #222222
• Text: #222222 → #FFFFFF
• Borders become visible on dark surfaces

Workflow: Figma → Storybook → App

1. Design in Figma

• Create/update component in SkiStar-App-DesignSystem
• Bind all values to design tokens (Tokens collection)
• Use existing token variables, don't hardcode colors

2. Extract via Figma MCP

# Start Figma Desktop Bridge plugin
# Claude reads component specs via mcp__figma-console

The MCP extracts:

• Component structure (layout, padding, gap)
• Bound variables → token names
• SVG paths for icons/illustrations
• Colors, typography, effects (shadows)

3. Build in Storybook

cd DesignSystemTest
npm run storybook  # http://localhost:6006

• Create component: src/components/NewComponent/NewComponent.tsx
• Create story: src/stories/components/NewComponent.stories.tsx
• Export in: src/components/index.ts
• Use useTheme() for ALL colors — no hardcoded hex values
• Test in both Light and Dark mode (toolbar toggle)

4. Publish to npm

# Bump version in package.json
npm publish --access public

5. Update apps

# In SkiStarApp/ or SkiStarWeb/
npm update @daniellauding/skistar-design-system

6. Use in app

import { Button, Card, Icon } from '@daniellauding/skistar-design-system';

<Card elevation="standard" title="Lindvallen">
  <Button label="Boka" type="Primary" />
</Card>

Prototyping in Storybook

Interactive App Prototype

Visit Screens / Navigation Patterns / Interactive App in Storybook to click through a working app prototype with tab navigation, detail views, and search.

Token Compare Tool

Visit Foundations / Tokens to:

• Copy All tokens for documentation
• Compare — paste tokens from another source to see diffs (green=match, red=different, orange=missing)

Dark Mode Testing

Use the theme toggle (paintbrush icon) in the Storybook toolbar to switch all components between Light and Dark mode.

Setup: New Project Using the Design System

React Native (Expo)

npx create-expo-app MyApp --template blank-typescript
cd MyApp
npm install @daniellauding/skistar-design-system react-native-svg

metro.config.js — handle symlinks and block web-only deps:

// See SkiStarApp/metro.config.js for full example

React Web (Vite)

npm create vite@latest MyWebApp -- --template react-ts
cd MyWebApp
npm install @daniellauding/skistar-design-system react-native-web react-native-svg

vite.config.ts:

resolve: {
  alias: {
    'react-native': 'react-native-web',
    'react-native-svg': path.resolve(__dirname,
      'node_modules/@daniellauding/skistar-design-system/src/shims/react-native-svg.tsx'),
  },
}

index.html — add Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />

Component Guidelines

Do

• Use const { theme } = useTheme() for all colors
• Use typography.size.md, spacing.lg, radius.sm tokens
• Use View, Text, Pressable from react-native
• Export component + types from index.ts
• Create stories with dark mode support
• Match Figma specs exactly (padding, font weight, colors)

Don't

• Hardcode hex colors (#BA0C2F) — use theme.action.primaryDefault
• Use <div> or web-specific elements in components
• Import colors.* directly in components — use semantic tokens via theme.*
• Skip dark mode testing

Local Development

# Storybook
npm run storybook

# Build for deployment
npm run build-storybook

# Type check
npx tsc --noEmit

Fonts

• DM Sans — loaded via Google Fonts (body text)
• Nohemi — custom font, add .woff2 files to public/fonts/ (title text)