Your visual language.

Custom properties keep the styling system small and the decisions in your hands.

Light, dark or system

<html data-devvy-theme="system">

<section data-devvy-theme="dark">
  <!-- Scoped theme preview -->
</section>

Change the essentials

:root {
  --dvy-brand: #087565;
  --dvy-on-brand: #ffffff;
  --dvy-radius-md: .5rem;
  --dvy-font: system-ui, sans-serif;
}

Override tokens after importing the theme stylesheet. Always check foreground and background contrast together.

Density and typography

<section data-devvy-density="compact"
  data-devvy-typography="mono"
  data-devvy-contrast="high">
  <!-- Your components -->
</section>

Density accepts compact or comfortable; omit it for the default. Typography supports mono or your own font token. High contrast strengthens borders. System forced colors and reduced motion have dedicated CSS rules.

Right-to-left layouts

Set dir="rtl" on the document or container. Tabs requires its explicit dir="rtl" prop for keyboard direction. Logical CSS properties handle spacing and switch travel.

Workspace

Make room for your next idea.

A few good defaults. Every detail yours.