@synap/ui-system

Synap's comprehensive design system built with Tamagui 1.141.5.

A universal UI system for web and native featuring shadow-based depth, dual theme identity (Amber/Cyan), glassmorphism, and tactile interactions.

---

Features

- Dual Theme System - Light mode (Amber/warm) and Dark mode (Cyan/cool)
- Shadow-Based Depth - Physical, tactile UI with elevation
- Glassmorphism - Translucent overlays with backdrop blur
- Spring Animations - Natural, physics-based interactions
- Fully Typed - Complete TypeScript support with autocomplete
- Responsive - Mobile-first with breakpoint system
- Accessible - WCAG 2.1 AA compliant
- Source Package - No build step, transpiled by Next.js

---

Installation

This is a private workspace package. Import from within the monorepo:

``typescript
import {
Button,
Card,
YStack,
XStack,
Text,
useTheme,
useThemeMode,
} from '@synap/ui-system';
`

---

Quick Start

$3

`typescript
import { Button, Card, YStack, Text } from '@synap/ui-system';

export function MyComponent() {
return (



Welcome to Synap


Get Started



);
}
`

$3

`typescript
import { YStack, Text, useTheme } from '@synap/ui-system';

export function ThemedComponent() {
const theme = useTheme();

return (

This text adapts to theme
Primary color (Amber in light, Cyan in dark)

);
}
`

$3

`typescript
padding="$4"
$gtMd={{ padding: '$8' }}
$gtLg={{ padding: '$12' }}
>
Responsive padding

`

---

Design Tokens

$3

`typescript
// Semantic colors (theme-aware)
$primary // Amber (light) / Cyan (dark)
$secondary // Cyan (light) / Amber (dark)
$ai // Emerald (constant across modes)
$success // Emerald
$error // Red
$warning // Amber
$info // Cyan

// UI colors
$color // Text color
$background // Background color
$muted // Secondary text
$borderColor // Border color
`

$3

`typescript
$1: 4px $2: 8px $3: 12px $4: 16px
$5: 20px $6: 24px $8: 32px $12: 48px
`

$3

`typescript
// Font sizes
$4: 14px $5: 16px $6: 18px $7: 20px

// Fonts
$heading // Fraunces (serif)
$body // DM Sans (sans-serif)
`

---

Components

$3

`typescript
import { TamaguiProvider, Theme } from '@synap/ui-system';
import config from '@synap/ui-system/config';


{/ or "dark" /}



`

$3

`typescript
import { useThemeMode } from '@synap/ui-system';

const isDark = useThemeMode();
const iconColor = isDark ? '#22D3EE' : '#D97706';
`

---

Glassmorphism

For overlays, modals, command palette:

`typescript
backgroundColor="$glassBackground"
borderWidth={1}
borderColor="$glassBorder"
borderRadius="$4"
style={{
backdropFilter: 'blur(20px)',
WebkitBackdropFilter: 'blur(20px)',
}}
>
Glass content

`

---

Best Practices

DO:
- Use design tokens ($primary, $4) instead of hard-coded values
- Test components in both light and dark modes
- Follow the 4px spacing scale
- Use semantic color names

DON'T:
- Hard-code colors or spacing values
- Mix external UI libraries
- Skip accessibility attributes

---

Documentation

- Design System (Full Documentation) - Complete design system guide
- Architecture (CLAUDE.md) - Codebase architecture overview
- Tamagui Docs - Tamagui framework documentation

---

Structure

`
packages/core/ui-system/
├── src/
│ ├── components/ # Component implementations
│ │ ├── Button.tsx
│ │ ├── Card.tsx
│ │ ├── Input.tsx
│ │ ├── ModernInput.tsx
│ │ ├── SearchBar.tsx
│ │ ├── AIInsightCard.tsx
│ │ ├── Badge.tsx
│ │ ├── Checkbox.tsx
│ │ ├── Radio.tsx
│ │ ├── Switch.tsx
│ │ └── ...
│ ├── layout/ # Layout components
│ │ ├── Panel.tsx
│ │ ├── Resizable.tsx
│ │ └── Stack.tsx
│ ├── hooks/ # Custom hooks
│ │ └── useThemeMode.ts
│ ├── tamagui.config.ts # Tamagui configuration
│ ├── themes.ts # Theme definitions
│ └── index.ts # Main exports
├── package.json
└── README.md
`

---

Development

This is a source package (no build step). TypeScript source is exported directly and transpiled by Next.js.

`json
{
"exports": {
".": "./src/index.ts"
}
}
`

$3

`bash
cd packages/core/ui-system
pnpm type-check
`

---

Dependencies

- Tamagui 1.141.5 - Universal design system
- Framer Motion 12 - Animation library
- Lucide React 0.555 - Icon library
- React 19 - UI library

---

License

Private - Synap Monorepo

---

Support

For questions or issues:
- Check DESIGN_SYSTEM.md
- Review component source in src/components/`
- See Tamagui documentation