Arkitekton Design System

Semantic color tokens that adapt to theme. Use CSS custom properties for consistency.

import { COLOR_PALETTE } from "@/lib/design-tokens";
// Usage: <div className="bg-bg-surface text-text-primary" />

import { TYPOGRAPHY_SCALE } from "@/lib/design-tokens";
// TYPOGRAPHY_SCALE.lg → { size: "1.125rem", lineHeight: "1.75rem" }

4px grid system for consistent spacing.

import { SPACING_SCALE, spacingPx } from "@/lib/design-tokens";
// spacingPx("4") → 16

import { getElevation } from "@/lib/design-tokens";
// getElevation("lg")?.shadow → "0 10px 15px ..."

import { getMotionPreset } from "@/lib/design-tokens";
// getMotionPreset("spring") → { type: "spring", stiffness: 300, ... }