UI Standards

Digital Delve UI follows a set of design standards to ensure consistency and accessibility across all projects.

Naming

Components use PascalCase class names. Child elements are separated with a hyphen. Variants and modifiers are lowercase words added alongside the component class.

<!-- Component -->
<div class="Card">…</div>

<!-- Component + child element -->
<div class="Card">
  <header class="Card-Header">…</header>
  <div class="Card-Content">…</div>
  <footer class="Card-Footer">…</footer>
</div>

<!-- Component + variant -->
<div class="Card profile">…</div>

Multi-word component names are written in PascalCase with no separator.

<div class="ToastRegion">…</div>
<div class="FileInput">…</div>

Variants

Variants are plain lowercase classes added alongside the component class. They describe the visual flavor or size — not transient state.

<button class="Button primary">…</button>
<button class="Button compact danger">…</button>
<span class="Tag success dot">…</span>
<nav class="Pagination compact">…</nav>

State

State is expressed with HTML data attributes, not classes. Use bare boolean attributes (no value needed in HTML; set "" in JS).

<input class="Input" data-invalid>
<button class="Button primary" data-active aria-pressed="true">Save</button>
<div class="Sidebar" data-open>…</div>

.Input[data-invalid]         { border-color: var(--danger); }
.Button.primary[data-active] { background: var(--primary); }
.Sidebar[data-open]          { transform: translateX(0); }

Common State Attributes

Attribute	Usage
data-active	Selected or toggled on
data-disabled	Visually disabled (non-native element)
data-invalid	Failed validation
data-valid	Passed validation
data-open	Expanded or visible (drawer, fallback modal)
data-loading	In-progress, spinner overlay
data-entering	Animating in
data-leaving	Animating out
data-dismissing	Being removed
data-dragover	Drag target is active
data-clickable	Row or item is interactive

Accessibility

Always pair data-attribute state with the appropriate ARIA attribute where one exists.

• data-active on a toggle button → also set aria-pressed="true"
• data-disabled on a non-native element → also set aria-disabled="true"
• data-open on a drawer → also update aria-expanded on the trigger
• Use semantic HTML elements (<dialog>, <details>, <button>) before reaching for ARIA

<button class="Button info" data-active aria-pressed="true">Filter</button>
<a class="Pagination-Link" data-disabled aria-disabled="true">‹</a>

Variables

All colors, typography, and spacing values are CSS custom properties. Always use variables — never hardcode values.

/* Good */
color: var(--text-muted);
border-color: var(--danger);
font-family: var(--font);

/* Avoid */
color: #888;
border-color: red;

See the Variables reference for the full token list.