@danielthurau/atlas-labs-codex

v0.2.1

Published

5 months ago

Personal design system with React components, CSS tokens, and utilities

0High
0Medium
0Low

danielthurau

design-system react components css-variables design-tokens

Personal Design Codex

A private repository that acts as a single source of truth for all design-related decisions. This codex centralizes typography rules, color palettes, spacing systems, and UI components in one place.

Philosophy

This is a personal craftsman repository—a tidy workshop where design decisions are explicit, documented, and reusable by your future self.

Using in Other Projects

Install from npm:

npm install @atlas-labs/design-codex

Then import components, styles, and utilities:

// Import components
import { Button, Card, Input, Badge, RefreshButton } from "@atlas-labs/design-codex";

// Import utilities
import { formatRelativeTime, clsx } from "@atlas-labs/design-codex/lib";

// Import CSS (in your layout.tsx or entry point)
import "@atlas-labs/design-codex/themes/css/base.css";
import "@atlas-labs/design-codex/themes/css/theme-light.css";
import "@atlas-labs/design-codex/themes/css/theme-dark.css";

Font Setup

Copy the Martian Mono font to your project's public folder, or load it in your CSS:

@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/MartianMono-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 800;
  font-display: swap;
}

Development

Prerequisites

Node.js 18+ is required. Check your version:

node --version  # Should be v18.x or higher

If you need to upgrade, use nvm:

nvm install 20
nvm use 20

Quick Start

# Install dependencies
npm install

# Run the playground
npm run dev

# Run Storybook
npm run storybook

Structure

├── codex/              # Design documentation
│   ├── principles.md   # Core design principles
│   ├── typography.md   # Type system
│   ├── color.md        # Color strategy
│   ├── spacing.md      # Spacing scale
│   ├── components.md   # Component guidelines
│   └── patterns/       # UI pattern recipes
├── themes/css/         # CSS custom properties
│   ├── base.css        # Primitives & component tokens
│   ├── theme-light.css # Light mode
│   └── theme-dark.css  # Dark mode
├── components/react/   # React component library
│   ├── Button/
│   ├── Input/
│   ├── Card/
│   ├── Badge/
│   ├── Modal/
│   ├── Toast/
│   ├── Tabs/
│   └── RefreshButton/  # AWS-style auto-refresh button
├── lib/                # Shared utilities
│   ├── index.ts        # Exports all utilities
│   └── utils.ts        # formatRelativeTime, clsx
├── app/                # Next.js playground
├── public/fonts/       # Martian Mono font files
└── .storybook/         # Storybook configuration

Design Tokens

All visual values are defined as CSS custom properties in themes/css/. The token architecture follows three layers:

Primitive tokens — Raw values (colors, spacing units)
Semantic tokens — Meaningful mappings (--color-text-primary)
Component tokens — Component-specific overrides (--button-radius)

Themes

The codex supports light and dark themes via CSS custom properties. Theme switching uses:

<html data-theme="light">
  <!-- or -->
  <html data-theme="dark"></html>
</html>

Components

All components:

Use tokens exclusively (no hardcoded values)
Are built on Radix UI primitives for accessibility
Encode taste, not flexibility

License

Private repository. Personal use only.