Theme

One copied stylesheet defines both light and dark themes. Components consume semantic tokens, so changing a role updates the complete system without editing individual component classes.

Color model

Think about color by responsibility:

base canvas
└── layer surfaces
    ├── fill controls
    ├── interaction overlay
    ├── readable ink
    └── meaningful boundaries

• Base and layers establish the application canvas, primary content surface, and grouped content.
• Fills belong to controls and metadata. layer-hover is the shared transparent interaction overlay.
• Ink separates primary text, secondary context, placeholders, and disabled hints.
• Status provides paired error, warning, and success treatments.
• Hairlines range from quiet containment to stronger structural emphasis.

Most product branding should begin by overriding --primary and --on-primary. Patch UI does not ship a separate accent family.

Typography

Inter is the body and display family. JetBrains Mono is reserved for code, terminal output, keyboard shortcuts, and values presented as code.

Compose size and weight independently, such as text-small font-medium. Body defaults to weight 450, headings to 500, and element styles provide line height. Avoid raw pixel type utilities when an existing semantic size fits.

Radius

Radius follows component role rather than personal preference.

Controls use radius 8, content and floating surfaces use radius 12, and metadata commonly uses radius 6. Full radius is explicit for pills and intrinsically circular geometry.

Elevation, motion, and focus

• shadow-card belongs to elevated Card and small raised controls.
• shadow-menu, shadow-tooltip, and shadow-modal match their overlay weight.
• duration-state handles control feedback, while duration-overlay handles opening and closing.
• ease-standard provides the shared timing curve and collapses with durations under reduced motion.
• Focus remains neutral and independent from the product’s primary color.

Editable fields use a crisp outline at the control edge. Other controls combine a compact keyboard-focus indicator with their normal interaction fill.

Customize the theme

Override runtime tokens after importing the copied stylesheet. Components update without a rebuild.

@import "tailwindcss";
@import "../styles/patch-ui-tokens.css";
 
:root {
  --primary: #8b5cf6;
  --on-primary: #ffffff;
}
 
.dark {
  --primary: #a78bfa;
  --on-primary: #0f0f10;
}

Changing surfaces or readable text requires more care than changing radius or motion. Run the Contrast Contract after modifying primary, ink, base, layer, or fill values.