Skip to content

DESIGN.md

Latest commit

 

History

History
140 lines (122 loc) · 4.45 KB

DESIGN.md

File metadata and controls

140 lines (122 loc) · 4.45 KB
Raw
name shadcn/ui
version 1.0.0
description Inspired by shadcn/ui.
colors
light dark
background foreground primary on-primary secondary on-secondary muted on-muted destructive on-destructive border ring disabled on-disabled
#ffffff
#09090b
#18181b
#fafafa
#f4f4f5
#18181b
#f4f4f5
#71717a
#ef4444
#fafafa
#e4e4e7
#18181b
#f4f4f5
#a1a1aa
background foreground primary on-primary secondary on-secondary muted on-muted destructive on-destructive border ring disabled on-disabled
#09090b
#fafafa
#fafafa
#18181b
#27272a
#fafafa
#27272a
#a1a1aa
#7f1d1d
#fafafa
#27272a
#d4d4d8
#27272a
#52525b
typography
fontFamily h1 body label button
ui-sans-serif, system-ui, -apple-system, sans-serif
fontSize fontWeight letterSpacing
2.25rem
700
-0.05em
fontSize lineHeight
1rem
1.5
fontSize fontWeight
0.875rem
500
fontSize fontWeight
0.875rem
500
rounded
default button
8px
6px
spacing
xs sm md lg xl
4px
8px
16px
24px
32px
components
card button-primary button-secondary button-ghost button-disabled input
backgroundColor border rounded padding
{colors.light.background}
1px solid {colors.light.border}
{rounded.default}
{spacing.lg}
backgroundColor textColor rounded padding
{colors.light.primary}
{colors.light.on-primary}
{rounded.button}
8px 16px
backgroundColor textColor border rounded
{colors.light.secondary}
{colors.light.on-secondary}
1px solid {colors.light.border}
{rounded.button}
backgroundColor textColor hoverBackgroundColor rounded
transparent
{colors.light.foreground}
{colors.light.secondary}
{rounded.button}
backgroundColor textColor rounded cursor
{colors.light.disabled}
{colors.light.on-disabled}
{rounded.button}
not-allowed
backgroundColor border rounded padding
transparent
1px solid {colors.light.border}
{rounded.default}
12px 16px

Overview

This project follows a "Mechanical Minimalist" aesthetic. It prioritizes clarity, speed, and precision, reflecting the underlying reactive engine's philosophy: surgical updates and zero-waste.

The UI should feel lightweight, responsive, and neutral, allowing the content and the performance of the reactivity to take center stage.

Colors

The palette is strictly high-contrast monochrome with a single functional "destructive" color for critical actions.

  • Background (#ffffff): A clean, sterile canvas.
  • Primary (#18181b): Deep obsidian for core interactions and emphasis.
  • Secondary (#f4f4f5): Soft grey for subtle layering and secondary actions.
  • Destructive: High-visibility red for danger actions. In Dark mode, this shifts to a deeper, less vibrating tone (#7f1d1d).

Themes

The system supports system-level theme detection.

  • Light Mode: The default state, mimicking high-end printed technical documentation.
  • Dark Mode: Activates via prefers-color-scheme: dark. It reverses the luminance while maintaining the same hierarchical relationships. Backgrounds become Obsidian (#09090b) and borders become Zinc-800 (#27272a).

Typography

Uses system fonts to ensure zero-latency loading and a native OS feel.

  • Headlines: Bold, tightly tracked (-0.05em) for a modern, "engineered" look.
  • Body: Readable, standard tracking, focusing on clarity.
  • Labels: Semi-bold and slightly smaller to create clear hierarchy.

Components

Button Component

The Button is the core interaction primitive. It is implemented as a functional component to handle:

  1. Reactivity: Using getClass() functions to ensure variants and classes update surgically.
  2. Accessibility: Native button attributes (type, disabled) are preserved and synced with visual states.
  3. Variants:
    • Primary: High emphasis, solid background.
    • Secondary: Medium emphasis, subtle background.
    • Danger: High emphasis, warning intent.
    • Ghost: Low emphasis, no background until hover. Ideal for utility actions and icon-only buttons.

Other Elements

  • Cards: Used for grouping reactive units. They use a subtle 1px border instead of heavy shadows.
  • Inputs: High focus on states (focus-ring) to provide clear feedback during data entry.