@logclip/ui

The LogClip design system — tokens + accessible React primitives (spec §16). Every color, type, space, radius, shadow, and motion value routes through CSS custom properties, so the entire product (console, player, widgets) is themed — and white-labeled — from one place.

Use

import { Button, Badge, Tabs, Drawer, Slider, Menu, EmptyState, ToastProvider } from '@logclip/ui';
import '@logclip/ui/styles.css'; // tokens + component styles

Primitives: Button, IconButton, Badge, Tabs, Tooltip, Drawer, Skeleton, ToastProvider/useToast, Slider, Menu, EmptyState, ErrorState, Card.

Design language

The LogClip identity, the same one as logclip.com: warm paper (light, the default) or neutral ink (dark), with the mark's blue as the one accent, reserved for live/active/CTA. A 4-tier surface ramp for real depth, a material recipe (.lum-elevated = layered shadow + a 1px inner top-highlight), a modular type scale (Inter for the working surface, Poppins for the wordmark and page titles, JetBrains Mono with tabular numerals), and a small, fast motion system — all gated by prefers-reduced-motion.

Theming (white-label)

Override any --lum-* token — globally or scoped:

:root {
  --lum-accent: #7c3aed;     /* your brand */
  --lum-radius: 8px;
  --lum-font-ui: 'YourFont', system-ui, sans-serif;
}

The full, commented token set lives in tokens.css (surface ramp, text ramp, accent + soft/line/glow variants, semantic soft/line trios, a categorical data-viz palette, radius, elevation, and motion). A built-in light theme is [data-lum-theme="light"].

Quality floor (binding)

Responsive to mobile, visible keyboard focus (:focus-visible + --lum-focus), prefers-reduced-motion respected, WCAG 2.2 AA contrast & semantics, skeletons for loading, and meaningful empty/error states. UX writing is active-voice and names things from the user's side — see the design notes in https://logclip.com/docs.