diff --git a/packages/design-system/README.md b/packages/design-system/README.md
index c06befabe..a4f7eb77a 100644
--- a/packages/design-system/README.md
+++ b/packages/design-system/README.md
@@ -1,87 +1,106 @@
# @veza/design-system
-**SUMI Design System v2.0** — "L'encre et la lumière" (Ink and Light)
+**SUMI Design System v3.0** — "Lavis d'encre" (Ink wash)
-The centralized design system for the Veza platform. Provides design tokens, component type registry, and utilities.
+Token-only package for the Veza platform. Single source of truth for all design tokens (colors, typography, spacing, motion, elevation), authored as W3C-spec JSON tokens and compiled via Style Dictionary to CSS variables and TypeScript exports.
## Structure
```
packages/design-system/
-├── src/
-│ ├── index.ts # Barrel exports
-│ ├── utils.ts # cn() utility
-│ ├── tokens/
-│ │ ├── index.ts # All token exports
-│ │ ├── colors.ts # Background, surface, text, pigment, semantic colors
-│ │ ├── typography.ts # Font families, sizes, weights, line heights
-│ │ ├── spacing.ts # Spacing scale, border radius, z-index, layout
-│ │ └── motion.ts # Duration and easing tokens
-│ └── components/
-│ └── index.ts # Component type registry
+├── tokens/ # SOURCE OF TRUTH (edit these)
+│ ├── primitive/
+│ │ ├── color.json # ink, washi, void, mizu, kin, viz, functional, alpha
+│ │ ├── typography.json # Space Grotesk + Inter + JetBrains Mono scales
+│ │ ├── spacing.json # 4px scale + radius + z-index
+│ │ ├── motion.json # goutte/trait/lavis/vague/maree + easings
+│ │ └── elevation.json # shadows + blur + opacity
+│ └── semantic/
+│ ├── dark.json # default :root, [data-theme="dark"]
+│ └── light.json # [data-theme="light"] (washi paper)
+├── dist/ # GENERATED (do NOT edit, gitignored)
+│ ├── tokens.css # Unified primitive + dark + light
+│ ├── tokens-{primitive,dark,light}.css
+│ └── tokens.{ts,d.ts} # TS exports of resolved hex values
+├── style-dictionary.config.mjs # Build config
└── package.json
```
## Usage
-### Design Tokens (TypeScript)
+### CSS variables (recommended for UI)
-```typescript
-import { pigments, fontFamilies, spacing } from '@veza/design-system/tokens';
-
-// Colors
-pigments.accent.base // '#7c9dd6'
-pigments.vermillion.base // '#d4634a'
-
-// Typography
-fontFamilies.heading // "'Space Grotesk', 'Inter', sans-serif"
-
-// Spacing
-spacing['4'] // '16px'
-```
-
-### Design Tokens (CSS)
-
-The CSS custom properties are the primary token interface, defined in `apps/web/src/index.css`:
+`apps/web/src/index.css` imports the unified file:
```css
-color: var(--sumi-accent);
-padding: var(--sumi-space-4);
-font-family: var(--sumi-font-heading);
-border-radius: var(--sumi-radius-md);
+@import '@veza/design-system/tokens.css';
```
-### Components
+Then components reference vars via Tailwind arbitrary values or inline styles:
-Components are implemented in `apps/web/src/components/ui/` and imported via path alias:
-
-```typescript
-import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
-import { Dialog } from '@/components/ui/dialog';
+```tsx
+...
+...
```
-See `apps/web/.storybook/` for Storybook documentation of all components.
+### TypeScript imports (for canvas / runtime needs)
+
+For contexts that can't resolve CSS vars (canvas drawing, programmatic gradients, byte interpolation):
+
+```ts
+import { ColorVizIndigo, SumiAccentDefault } from '@veza/design-system/tokens-generated';
+
+ctx.fillStyle = ColorVizIndigo; // resolved hex string '#7c9dd6'
+const accent = SumiAccentDefault; // '#0098b5'
+```
+
+## Build
+
+```bash
+npm run build:tokens --workspace=@veza/design-system
+```
+
+Triggered automatically via `turbo run build` (the apps/web build depends on this package).
+
+## Color system — Option B palette
+
+Per `CHARTE_GRAPHIQUE_TALAS.md` §4 (canonical brand source) + §4.5 (data viz):
+
+### UI palette (everywhere except data viz)
+
+The cyan **Mizu** (`#0098B5`) is the **sole** accent color. Functional colors (success/error/warning) are always diluted (max 60% opacity), never solid fills.
+
+| Token | Role | Value |
+|-------|------|-------|
+| `--sumi-accent-default` | Primary actions, links, focus | Mizu cyan `#0098B5` |
+| `--sumi-feedback-success` | Success states (subtle) | Diluted sage |
+| `--sumi-feedback-error` | Error states (subtle) | Diluted brick |
+| `--sumi-feedback-warning` | Warning states (subtle) | Diluted amber |
+
+### Data viz palette (charts, waveforms, analytics ONLY)
+
+For graphs and visualizations needing distinguishable colors, the 4 viz pigments + neutral are authorized:
+
+| Pigment | Hex | Token |
+|---------|-----|-------|
+| Indigo | `#7c9dd6` | `--sumi-viz-indigo` |
+| Vermillion | `#d4634a` | `--sumi-viz-vermillion` |
+| Sage | `#7a9e6c` | `--sumi-viz-sage` |
+| Gold | `#c9a84c` | `--sumi-viz-gold` |
+| Neutral grey | `#a8a4a0` | `--sumi-viz-neutral` |
+
+**These are NEVER allowed in standard UI** (buttons, links, accents). The cyan rule above stays absolute.
## Themes
- **Dark** (default) — Ink on void
- **Light** — Washi paper aesthetic (`[data-theme="light"]`)
-- **High Contrast** — WCAG AA 4.5:1+ (`[data-contrast="high"]`)
-- **Compact Density** — Reduced spacing (`[data-density="compact"]`)
+- **Circadian + patina + density + contrast** — Runtime modifiers handled by `apps/web/src/components/theme/ThemeProvider.tsx`
-## Color System — The 4 Pigments
+## See also
-| Pigment | Hex | Usage |
-|---------|-----|-------|
-| **Accent** (Indigo) | `#7c9dd6` | Primary actions, links, focus |
-| **Vermillion** | `#d4634a` | Errors, destructive, live |
-| **Sage** | `#7a9e6c` | Success, online |
-| **Gold** | `#c9a84c` | Warnings, achievements |
-
-## References
-
-- Design tokens source: `apps/web/src/index.css`
-- Token documentation: `apps/web/docs/DESIGN_TOKENS.md`
+- Brand source of truth: `~/Documents/TG__Talas_Group/05_EXPERIENCE_UTILISATEUR/CHARTE_GRAPHIQUE_TALAS.md`
+- Brand decisions: `~/Documents/TG__Talas_Group/05_EXPERIENCE_UTILISATEUR/DECISIONS_IDENTITE.md`
+- Veza UI/UX contract: `veza-docs/ORIGIN/ORIGIN_UI_UX_SYSTEM.md`
- Storybook: `apps/web/.storybook/`
- Component source: `apps/web/src/components/ui/`
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 74b2d5553..a526b34dd 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -1,17 +1,9 @@
{
"name": "@veza/design-system",
- "version": "2.0.0",
- "description": "SUMI Design System — Design tokens, utilities, and component re-exports for the Veza platform",
+ "version": "3.0.0",
+ "description": "SUMI Design System — Design tokens (single source of truth) for the Veza platform. Authored as W3C JSON tokens, compiled via Style Dictionary to CSS vars + TS exports.",
"type": "module",
- "main": "./src/index.ts",
- "types": "./src/index.ts",
"exports": {
- ".": "./src/index.ts",
- "./tokens": "./src/tokens/index.ts",
- "./tokens/colors": "./src/tokens/colors.ts",
- "./tokens/typography": "./src/tokens/typography.ts",
- "./tokens/spacing": "./src/tokens/spacing.ts",
- "./tokens/motion": "./src/tokens/motion.ts",
"./tokens.css": "./dist/tokens.css",
"./tokens-generated": {
"types": "./dist/tokens.d.ts",
@@ -19,27 +11,16 @@
}
},
"files": [
- "src/",
"tokens/",
"dist/",
"style-dictionary.config.mjs"
],
"scripts": {
"build": "node style-dictionary.config.mjs",
- "build:tokens": "node style-dictionary.config.mjs",
- "typecheck": "tsc --noEmit"
- },
- "dependencies": {
- "clsx": "^2.0.0",
- "tailwind-merge": "^3.0.0"
- },
- "peerDependencies": {
- "react": ">=18",
- "react-dom": ">=18"
+ "build:tokens": "node style-dictionary.config.mjs"
},
"devDependencies": {
- "style-dictionary": "^4.4.0",
- "typescript": "^5.9.0"
+ "style-dictionary": "^4.4.0"
},
"license": "UNLICENSED"
}
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
deleted file mode 100644
index fc1346d3a..000000000
--- a/packages/design-system/src/components/index.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * SUMI Design System v2.0 — Component Registry
- *
- * This file documents the canonical component set of the SUMI design system.
- * Components are implemented in apps/web/src/components/ui/ and imported
- * from there using the @/components/ui/ path alias.
- *
- * To use in the web app:
- * import { Button } from '@/components/ui/button';
- * import { Card } from '@/components/ui/card';
- *
- * This registry exists for documentation and type-checking purposes.
- */
-
-/**
- * SUMI Component Categories:
- *
- * ═══ PRIMITIVES ═══
- * Button — Primary action element (variants: default, destructive, outline, secondary, ghost, link)
- * Input — Text input field
- * Textarea — Multi-line text input
- * Label — Form field label
- * Checkbox — Binary selection
- * RadioGroup — Single selection from options
- * Switch — Toggle control
- * Slider — Range input
- * Select — Dropdown selection
- *
- * ═══ LAYOUT ═══
- * Card — Content container with border
- * Accordion — Collapsible content sections
- * Tabs — Tabbed content panels
- * Sidebar — Navigation sidebar
- * ScrollArea — Custom scrollable container
- * Table — Data table
- *
- * ═══ FEEDBACK ═══
- * Alert — Informational message
- * Badge — Status indicator
- * Dialog — Modal dialog
- * Toast — Temporary notification
- * Tooltip — Hover information
- * HoverCard — Rich hover popup
- * Skeleton — Loading placeholder
- * Progress — Progress indicator
- * LoadingSpinner — Animated spinner
- *
- * ═══ NAVIGATION ═══
- * DropdownMenu — Contextual menu
- * ContextMenu — Right-click menu
- * NavigationProgress — Page transition indicator
- *
- * ═══ SPECIALIZED ═══
- * FileUpload — File upload with drag & drop
- * AvatarUpload — Avatar image upload with cropper
- * DatePicker — Date selection
- * VirtualizedList — Virtualized scrolling for large lists
- * OptimizedImage — Responsive image with blur placeholder
- * AnimatedNumber — Animated numeric display
- */
-
-// Component type exports for type-safety when referencing SUMI components
-export type SumiComponentName =
- // Primitives
- | 'Button'
- | 'Input'
- | 'Textarea'
- | 'Label'
- | 'Checkbox'
- | 'RadioGroup'
- | 'Switch'
- | 'Slider'
- | 'Select'
- | 'FloatingInput'
- // Layout
- | 'Card'
- | 'Accordion'
- | 'Tabs'
- | 'Sidebar'
- | 'ScrollArea'
- | 'Table'
- | 'Collapsible'
- // Feedback
- | 'Alert'
- | 'Badge'
- | 'Dialog'
- | 'ConfirmationDialog'
- | 'Toast'
- | 'Tooltip'
- | 'HoverCard'
- | 'Skeleton'
- | 'Progress'
- | 'LoadingSpinner'
- | 'LoadingState'
- | 'ErrorBoundary'
- | 'ErrorDisplay'
- // Navigation
- | 'DropdownMenu'
- | 'ContextMenu'
- | 'NavigationProgress'
- | 'ScrollToTop'
- // Specialized
- | 'Avatar'
- | 'AvatarUpload'
- | 'FileUpload'
- | 'DatePicker'
- | 'ImageCropper'
- | 'VirtualizedList'
- | 'OptimizedImage'
- | 'AnimatedNumber'
- | 'DataList'
- | 'FormField'
- | 'FAB'
- | 'FocusTrap'
- | 'KeyboardShortcutsPanel'
- | 'WaveformVisualizer';
diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
deleted file mode 100644
index a18ecde30..000000000
--- a/packages/design-system/src/index.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * @veza/design-system — SUMI Design System v2.0
- * "L'encre et la lumière" — Ink and Light
- *
- * This package provides:
- * - Design tokens (colors, typography, spacing, motion) as TypeScript objects
- * - Component type registry for the SUMI component set
- * - Utility functions (cn)
- *
- * Components are implemented in apps/web/src/components/ui/ and should be
- * imported from there using the @/components/ui/ path alias.
- *
- * Usage:
- * import { colors, typography } from '@veza/design-system/tokens';
- * import { pigments } from '@veza/design-system/tokens/colors';
- */
-
-// ═══ Design Tokens ═══
-export {
- colors,
- backgrounds,
- surfaces,
- borders,
- text,
- pigments,
- semantic,
- glass,
- shadows,
- lightTheme,
- typography,
- fontFamilies,
- fontSizes,
- lineHeights,
- letterSpacings,
- fontWeights,
- spacingTokens,
- spacing,
- radius,
- zIndex,
- layout,
- motion,
- durations,
- easings,
-} from './tokens';
-
-export type { SumiColor } from './tokens';
-
-// ═══ Component Registry ═══
-export type { SumiComponentName } from './components';
-
-// ═══ Utilities ═══
-export { cn } from './utils';
diff --git a/packages/design-system/src/tokens/colors.ts b/packages/design-system/src/tokens/colors.ts
deleted file mode 100644
index 5976b5076..000000000
--- a/packages/design-system/src/tokens/colors.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-/**
- * SUMI Design System v4.0 — Color Tokens
- * "Lavis d'encre" — Ink Wash (墨の濃淡)
- *
- * Named after traditional Japanese ink tones:
- * Kuro (黒), Sumi (墨), Usuzumi (薄墨), Hai (灰), Gin (銀), Kasumi (霞)
- * Shiro (白), Kinari (生成), Kinu (絹), Torinoko (鳥の子), Cha (茶)
- *
- * Source of truth: apps/web/src/index.css
- */
-
-// ═══ DARK THEME (default) — Ink on void (墨の闇) ═══
-
-export const backgrounds = {
- void: '#0d0d0b',
- base: '#13110f',
- raised: '#1a1714',
- overlay: '#242018',
- hover: '#2e2a22',
- active: '#383228',
- wash: '#17140f',
-} as const;
-
-export const surfaces = {
- inset: '#0f0d0b',
- subtle: '#1e1a15',
- card: '#1a1714',
- elevated: '#242018',
-} as const;
-
-export const borders = {
- faint: 'rgba(232,224,208, 0.03)',
- default: 'rgba(232,224,208, 0.06)',
- strong: 'rgba(232,224,208, 0.10)',
- focus: 'rgba(184,58,30, 0.50)',
- accent: 'rgba(184,58,30, 0.25)',
-} as const;
-
-export const text = {
- primary: '#e8e0d0',
- secondary: '#9e9688',
- tertiary: '#6b6560',
- disabled: '#3d3930',
- inverse: '#13110f',
- link: '#b83a1e',
-} as const;
-
-// ═══ PIGMENTS — Shu vermillion primary (朱) + Kin gold (金) ═══
-
-export const pigments = {
- accent: {
- base: '#b83a1e',
- hover: '#c84a2e',
- active: '#8b2500',
- muted: 'rgba(184,58,30, 0.18)',
- subtle: 'rgba(184,58,30, 0.06)',
- emphasis: '#8b2500',
- },
- vermillion: {
- base: '#a04050',
- hover: '#b05060',
- subtle: 'rgba(160,64,80, 0.10)',
- },
- sage: {
- base: '#4f6840',
- hover: '#5f7850',
- subtle: 'rgba(79,104,64, 0.10)',
- },
- gold: {
- base: '#b8860b',
- hover: '#c8960b',
- subtle: 'rgba(184,134,11, 0.10)',
- },
- kin: {
- base: '#b8860b',
- glow: '0 0 8px rgba(184,134,11, 0.2)',
- },
- patinaGreen: {
- base: '#5A8A72',
- },
-} as const;
-
-// ═══ SEMANTIC ═══
-
-export const semantic = {
- success: pigments.sage.base,
- successSubtle: pigments.sage.subtle,
- warning: pigments.gold.base,
- warningSubtle: pigments.gold.subtle,
- error: pigments.vermillion.base,
- errorSubtle: pigments.vermillion.subtle,
- info: pigments.accent.base,
- live: '#a04050',
- online: pigments.sage.base,
-} as const;
-
-// ═══ GLASS — Shoji screen (障子) ═══
-
-export const glass = {
- bg: 'rgba(19,17,15, 0.80)',
- border: 'rgba(232,224,208, 0.04)',
- blur: '12px',
-} as const;
-
-// ═══ SHADOWS — Ink diffusion (滲み) ═══
-
-export const shadows = {
- xs: '0 1px 3px rgba(13,13,11,0.20)',
- sm: '0 2px 8px rgba(13,13,11,0.15), 0 1px 3px rgba(13,13,11,0.12)',
- md: '0 4px 20px rgba(13,13,11,0.15), 0 2px 6px rgba(13,13,11,0.10)',
- lg: '0 8px 35px rgba(13,13,11,0.18), 0 4px 12px rgba(13,13,11,0.10)',
- xl: '0 16px 55px rgba(13,13,11,0.22), 0 8px 20px rgba(13,13,11,0.12)',
- '2xl': '0 24px 75px rgba(13,13,11,0.30)',
- glow: '0 0 0 3px rgba(184,58,30, 0.20)',
- glowLg: '0 0 20px rgba(184,58,30, 0.10)',
- kin: '0 0 16px rgba(184,134,11, 0.15)',
-} as const;
-
-// ═══ LIGHT THEME — Washi paper (和紙) ═══
-
-export const lightTheme = {
- backgrounds: {
- void: '#e8e0cf',
- base: '#f0ebe0',
- raised: '#f0ebe0',
- overlay: '#f0ebe0',
- hover: '#e4dccb',
- active: '#ddd4c0',
- wash: '#ece5d6',
- },
- surfaces: {
- inset: '#e0d8c8',
- subtle: '#e8e0cf',
- card: '#f0ebe0',
- elevated: '#f5f0e5',
- },
- borders: {
- faint: 'rgba(26,23,20, 0.04)',
- default: 'rgba(26,23,20, 0.06)',
- strong: 'rgba(26,23,20, 0.12)',
- focus: 'rgba(139,37,0, 0.45)',
- accent: 'rgba(139,37,0, 0.20)',
- },
- text: {
- primary: '#1a1714',
- secondary: '#3d3930',
- tertiary: '#6b6560',
- disabled: '#c4bba8',
- inverse: '#e8e0d0',
- link: '#8b2500',
- },
-} as const;
-
-// ═══ INK TONES — 墨の六色 ═══
-
-export const inkTones = {
- kuro: '#0d0d0b',
- sumi: '#1a1714',
- usuzumi: '#3d3930',
- hai: '#6b6560',
- gin: '#9e9688',
- kasumi: '#c4bba8',
-} as const;
-
-// ═══ WASHI TONES — 和紙の色 ═══
-
-export const washiTones = {
- shiro: '#f0ebe0',
- kinari: '#e8e0cf',
- kinu: '#ddd4c0',
- torinoko: '#d0c5ad',
- cha: '#c4b698',
-} as const;
-
-// ═══ ALL COLORS ═══
-
-export const colors = {
- backgrounds,
- surfaces,
- borders,
- text,
- pigments,
- semantic,
- glass,
- shadows,
- lightTheme,
- inkTones,
- washiTones,
-} as const;
-
-export type SumiColor = typeof colors;
diff --git a/packages/design-system/src/tokens/index.ts b/packages/design-system/src/tokens/index.ts
deleted file mode 100644
index a66cb086e..000000000
--- a/packages/design-system/src/tokens/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * SUMI Design System v2.0 — Design Tokens
- *
- * Centralized design tokens extracted from CSS custom properties.
- * Use these for TypeScript-level access to the design system values.
- *
- * For CSS usage, prefer the CSS custom properties directly:
- * var(--sumi-accent), var(--sumi-space-4), etc.
- *
- * For JS/TS usage (e.g., inline styles, canvas, SVG):
- * import { colors, typography, spacing, motion } from '@veza/design-system/tokens';
- */
-
-export { colors, backgrounds, surfaces, borders, text, pigments, semantic, glass, shadows, lightTheme } from './colors';
-export type { SumiColor } from './colors';
-
-export { typography, fontFamilies, fontSizes, lineHeights, letterSpacings, fontWeights } from './typography';
-
-export { spacingTokens, spacing, radius, zIndex, layout } from './spacing';
-
-export { motion, durations, easings } from './motion';
diff --git a/packages/design-system/src/tokens/motion.ts b/packages/design-system/src/tokens/motion.ts
deleted file mode 100644
index 26f992c34..000000000
--- a/packages/design-system/src/tokens/motion.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * SUMI Design System v4.0 — Motion & Animation Tokens
- *
- * Source of truth: apps/web/src/index.css
- */
-
-export const durations = {
- instant: '75ms',
- fast: '150ms',
- normal: '200ms',
- slow: '300ms',
- slower: '500ms',
-} as const;
-
-export const easings = {
- default: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
- out: 'cubic-bezier(0.33, 1, 0.68, 1)',
- in: 'cubic-bezier(0.32, 0, 0.67, 0)',
- inOut: 'cubic-bezier(0.65, 0, 0.35, 1)',
- bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
- spring: 'cubic-bezier(0.175, 0.885, 0.32, 1.1)',
-} as const;
-
-export const motion = {
- durations,
- easings,
-} as const;
diff --git a/packages/design-system/src/tokens/spacing.ts b/packages/design-system/src/tokens/spacing.ts
deleted file mode 100644
index 789585de8..000000000
--- a/packages/design-system/src/tokens/spacing.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * SUMI Design System v4.0 — Spacing & Layout Tokens
- *
- * Source of truth: apps/web/src/index.css
- */
-
-export const spacing = {
- '0.5': '2px',
- '1': '4px',
- '1.5': '6px',
- '2': '8px',
- '2.5': '10px',
- '3': '12px',
- '4': '16px',
- '5': '20px',
- '6': '24px',
- '8': '32px',
- '10': '40px',
- '12': '48px',
- '16': '64px',
- '20': '80px',
-} as const;
-
-export const radius = {
- xs: '2px',
- sm: '4px',
- md: '6px',
- lg: '12px',
- xl: '16px',
- '2xl': '20px',
- full: '9999px',
-} as const;
-
-export const zIndex = {
- base: 0,
- raised: 10,
- dropdown: 100,
- sticky: 200,
- overlay: 300,
- modal: 400,
- popover: 500,
- toast: 600,
- tooltip: 700,
- max: 999,
-} as const;
-
-export const layout = {
- maxWidth: '1400px',
- maxWidthContent: '1200px',
-} as const;
-
-export const spacingTokens = {
- spacing,
- radius,
- zIndex,
- layout,
-} as const;
diff --git a/packages/design-system/src/tokens/typography.ts b/packages/design-system/src/tokens/typography.ts
deleted file mode 100644
index 8c814a5e3..000000000
--- a/packages/design-system/src/tokens/typography.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * SUMI Design System v4.0 — Typography Tokens
- * "Lavis d'encre" — Brush calligraphy meets clean sans
- *
- * Source of truth: apps/web/src/index.css
- */
-
-export const fontFamilies = {
- body: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
- heading: "'Noto Serif JP', Georgia, serif",
- mono: "'JetBrains Mono', 'SF Mono', 'Consolas', monospace",
- serif: "'Noto Serif JP', Georgia, serif",
-} as const;
-
-export const fontSizes = {
- '4xl': '2.25rem', // 36px
- '3xl': '1.875rem', // 30px
- '2xl': '1.5rem', // 24px
- xl: '1.25rem', // 20px
- lg: '1.125rem', // 18px
- md: '1rem', // 16px
- base: '0.875rem', // 14px
- sm: '0.8125rem', // 13px
- xs: '0.75rem', // 12px
-} as const;
-
-export const lineHeights = {
- none: '1',
- tight: '1.25',
- snug: '1.375',
- normal: '1.5',
- relaxed: '1.625',
- loose: '1.75',
-} as const;
-
-export const letterSpacings = {
- tighter: '-0.03em',
- tight: '-0.015em',
- normal: '0',
- wide: '0.025em',
- wider: '0.05em',
- widest: '0.1em',
-} as const;
-
-export const fontWeights = {
- light: 300,
- regular: 400,
- medium: 500,
- semibold: 600,
- bold: 700,
-} as const;
-
-export const typography = {
- fontFamilies,
- fontSizes,
- lineHeights,
- letterSpacings,
- fontWeights,
-} as const;
diff --git a/packages/design-system/src/utils.ts b/packages/design-system/src/utils.ts
deleted file mode 100644
index 96b19bd79..000000000
--- a/packages/design-system/src/utils.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * SUMI Design System — Utility Functions
- *
- * Canonical implementation of cn() for merging Tailwind classes.
- * Also available at apps/web/src/lib/utils.ts.
- */
-
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-/**
- * Merge Tailwind CSS classes with deduplication.
- * Combines clsx (conditional classes) + tailwind-merge (conflict resolution).
- *
- * @example
- * cn('px-4 py-2', isActive && 'bg-primary', className)
- */
-export function cn(...inputs: ClassValue[]): string {
- return twMerge(clsx(inputs));
-}