Figma-sourced · iOS & Android · React Native

The Nest
Design System

Started as a handful of Figma explorations. Scaled into a full design system using Claude Code and Figma MCP. Every token, component, and guideline reflects how Myna actually looks, feels, and moves across iOS, Android, and web.

Browse Components Explore Tokens
7
Color Palettes
15
Type Styles
33
Components
iOS+Android
Platforms
Navigate

Everything you need

Six comprehensive pages covering every aspect of the Nest Design System — from raw tokens to mobile-native components and multimodal AI patterns.

🎨
Color System
7 full palettes, semantic tokens, surface colours, usage guidelines, and WCAG contrast ratios.
Purple scale Cyan scale Semantic Dark surfaces
Aa
Typography
Complete type scale with Display, Heading, Body, Label, and Code styles — Poppins & Inter foundations.
15 styles Inter + Poppins Code type
⊞
Spacing & Layout
4px base grid, full spacing scale, 12-column grid, breakpoints, elevation system, and motion tokens.
4px grid Breakpoints Elevation Motion
📱
Components
35+ mobile-native components with iOS & Android platform variants, touch targets, and React Native code.
Bottom Sheet FAB Tab Bar +32 more
🧠
Multimodal
Voice, camera, image upload, video player, and full AI chat interface components for next-gen mobile apps.
AI Chat Voice Camera Video
Colors

Color with intention

Seven complete palettes. Ten steps each. Every shade mapped to a semantic role — from brand purple to progress green.

Primary · Purple
50 · #f1eefe
100 · #e4defe
200 · #cabdfc
300 · #af9cfb
400 · #957bf9
500 ★ · #7a5af8
600 · #6248c6
700 · #493695
800 · #312463
900 · #181232
Secondary · Green
50 · #f0fdf4
100
200
300
400 ★ · #4ade80
500
600
700
800
900
Neutral
50
100
200
300
400
500
600
700
800
900
Success
50
100
200
300
400
500 ★
600
700
800
900
Warning
50
100
200
300
400
500 ★
600
700
800
900
Error (from Figma)
50
100
200
300
400
500 ★
600
700
800
900
View full color system →
Typography

Type that communicates

Poppins for display impact. Inter for UI clarity. Every size purposeful, every weight intentional.

Display XL · Poppins 700 · 56px
Aa
Heading H1 · Inter 700 · 32px
Hey Dave,
Welcome back!
Heading H2 · Inter 600 · 24px
Nest Score: 625
Body Large · Inter 400 · 16px
You're on a roll — your Nest Score grew by +17 points this week! Keep the momentum going.
Label M · Inter 500 · 12px · spaced
CAMPAIGNS ACTIVE · 3 PENDING
Code · JetBrains Mono · 14px
<Button variant="primary">
Get Started
</Button>
View full type scale →
Components

Built for every interaction

Every component is interactive, accessible, and comes with React code and usage guidelines.

Button 5 variants · 3 sizes
Input 4 types · 5 states
Active Live Pending Error Info Draft
Badge 6 variants · 3 sizes
SG
DM
A
B
+3
Avatar 5 sizes · groups
Google Review
Collect reviews from your customers automatically.
Card 4 variants
Notifications
Toggle + Tabs interactive
Campaign published successfully
Review limit approaching (80%)
Alert 4 variants · dismissible
Nest Score72%
Loading
Progress determinate · indeterminate
Campaign Status Reviews
Google Reviews Live 142
Yelp Boost Pending 37
Facebook Page Draft —
Table sortable · selectable
View all 20+ components with code →
Principles

Built on purpose

Every decision in the Nest Design System is guided by four core principles that shape how we build and use it.

◈
Figma-first
Every token, color, and component was extracted directly from your Figma file — your design intent, perfectly preserved in code.
⬡
Composable
Atomic, composable primitives that combine into complex patterns. Build anything from the same small set of well-designed parts.
◎
Accessible
WCAG AA compliance at minimum. Proper contrast ratios, keyboard navigation, ARIA attributes, and focus management built-in.
⚡
Performant
Zero runtime overhead. Pure CSS custom properties for theming. No heavy JS frameworks — just clean, optimised primitives.
Quick Start

Get up and running in minutes

Import the design tokens, drop in the CSS, and start building with Nest components right away.

globals.css 
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap');

:root {
  --primary: #7a5af8;
  --accent:  #4ade80;
  --bg:      #0d0d0f;
  /* ... see colors.html for all tokens */
}

/* Import Nest component styles */
@import './nest/components.css';
Browse Components View Tokens
Copied!