@lakea/design-system

Purpose

@lakea/design-system is the single source of styling for the Lakea monorepo. It provides:

• Tokens — Colors, spacing, radius, shadows, transitions
• Components — Layout primitives, atoms, and molecules
• Utilities — Class name helpers

This is the only package that uses Tailwind CSS directly. Other packages compose these components or use the exported tokens.

Structure

packages/design-system/src/
├── styles/
│   ├── tokens.css          # CSS custom properties
│   └── index.css           # Tailwind directives
├── tokens/
│   └── index.ts            # TypeScript token exports
├── utils/
│   └── cn.ts               # clsx + tailwind-merge
└── components/
    ├── layout/
    │   ├── Stack.tsx
    │   └── Container.tsx
    ├── atoms/
    │   ├── Button.tsx
    │   ├── Text.tsx
    │   ├── Badge.tsx
    │   └── Link.tsx
    └── molecules/
        └── Card.tsx

Usage

In Apps

Import components and the styles CSS:

import { Stack, Card, Text, Button } from '@lakea/design-system';
import '@lakea/design-system/styles.css';

function MyComponent() {
  return (
    <Stack gap="md">
      <Card>
        <Text variant="h2">Title</Text>
        <Text color="muted">Description</Text>
      </Card>
      <Button variant="primary">Action</Button>
    </Stack>
  );
}

In Other Packages

Import tokens for inline styling:

import { colors, radius, shadows } from '@lakea/design-system/tokens';

const style = {
  backgroundColor: colors.slate[800],
  borderRadius: radius.lg,
  boxShadow: shadows.md,
};

Components

Layout

Component	Description
Stack	Flex container with gap, direction, alignment
Container	Max-width centered container with padding

Atoms

Component	Description
Button	Variants: primary, secondary, ghost
Text	Typography with variants (h1-h4, body, caption) and colors
Badge	Status badges: default, success, warning, error
Link	Styled anchor with variants

Molecules

Component	Description
Card	Surface with border, supports Card.Title and Card.Body

Tokens

Colors

colors.cosmic[500]  // '#5a6cf4' - primary brand
colors.slate[800]   // '#1e293b' - surface
colors.slate[100]   // '#f1f5f9' - text
colors.slate[400]   // '#94a3b8' - muted text

Spacing

spacing[1]   // '0.25rem'
spacing[2]   // '0.5rem'
spacing[4]   // '1rem'
spacing[8]   // '2rem'

Other

radius.sm    // '0.25rem'
radius.lg    // '0.5rem'
shadows.md   // box-shadow value
transitions.duration.normal  // '150ms'

CSS Variables

All tokens are also available as CSS custom properties:

:root {
  --ds-color-cosmic-500: #5a6cf4;
  --ds-color-background: #0a0f1a;
  --ds-color-surface: #1e293b;
  --ds-color-text: #f1f5f9;
  --ds-color-text-muted: #94a3b8;
  --ds-space-4: 1rem;
  --ds-radius-lg: 0.5rem;
}

Design Principles

1. Tailwind is internal — Only this package uses Tailwind; it’s an implementation detail
2. Composable — Components are building blocks, not complete layouts
3. Consistent — All colors, spacing, and typography come from tokens
4. Accessible — Components include proper ARIA attributes