Colors
The color system for the Cubitt design system.
Cubitt uses a semantic color system built on CSS custom properties. Colors automatically adapt to light and dark modes.
All colors use a numbered scale where 1 = most prominent, higher numbers = more subtle.
Background
Background
bg-backgroundSurfaces
Surface 1
bg-surface-1Surface 2
bg-surface-2Surface 3
bg-surface-3Surface 4
bg-surface-4Foreground
Foreground 1
text-fg-1Foreground 2
text-fg-2Foreground 3
text-fg-3Borders
Border 1
border-border-1Border 2
border-border-2Border 3
border-border-3Border 4
border-border-4Brand
Brand colors are set via the brand class (.mobius, .tilt) on the html element.
Brand 1
text-brand-1Brand 2
border-brand-2Brand 3
bg-brand-3Semantic Colors
Each semantic category uses the same numbered pattern.
Success
Success 1
text-success-1Success 2
border-success-2Success 3
bg-success-3Warning
Warning 1
text-warning-1Warning 2
border-warning-2Warning 3
bg-warning-3Info
Info 1
text-info-1Info 2
border-info-2Info 3
bg-info-3Destructive
Destructive 1
text-destructive-1Destructive 2
border-destructive-2Destructive 3
bg-destructive-3Usage
Tailwind
<div className="bg-surface-1 text-fg-1 border border-border-2 rounded-lg p-6">
<h2 className="text-fg-1">Title</h2>
<p className="text-fg-2">Description</p>
</div>CSS Variables
.element {
background: var(--surface-1);
color: var(--fg-1);
border: 1px solid var(--border-2);
}Semantic Example
<div className="bg-success-3 text-success-1 border border-success-2 rounded-md px-4 py-2">
Operation successful
</div>Dark Mode
Colors automatically adapt when .dark is on the html element.
<html class="dark mobius">