Layout

Surface & text utilities

Surface ground and secondary-text helpers that stay correct in dark mode.

.surface · .muted

<div class="surface" style="border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4)">
  <p style="margin:0">Primary text on a surface.</p>
  <p class="muted" style="margin:0">Secondary text uses <code>.muted</code>, it re-tunes correctly in dark mode.</p>
</div>

Usage

• Never pair a hardcoded dark text colour with a token surface, it turns dark-on-dark in dark mode. Use the role tokens (--text-secondary, --accent-text, --success-text…).
• In dark mode, raised surfaces get lighter, not darker, the kit's --surface-raised handles it.