← All foundations
Color · card 2 of 3

The dark canvas — CODECAVE’s only theme

The defining decision of the system: the page and its cards sit one barely-perceptible step apart. Depth is carried by radius, border and the upward glow — never by lightening a surface. Check the four steps below read as separate without reading as contrasted.

The four surface steps

Total luminance spread across all four is smaller than a single step in most dark UI kits. That is intentional and must survive review.

--color-surface-primary · #0A0A0B · the page
--color-surface-secondary · #0F0F15 · card fill (one step off the page)
--color-surface-tertiary · #1C1C27 · raised / hovered card, icon tiles
--color-surface-primary-hover · #232339 · surface hover
--color-surface-quaternary · #2B2848 · borders, dividers, checkbox outline

Foreground ramp on the page

Three text weights of grey, each with a defined job. Nothing dimmer than #9595BB is permitted for text that carries meaning.

Optimize costs. Protect your Data --color-heading · #F4F4F6
headings · 18.0:1
We scope, price and warranty the work before it starts. --color-body-primary · #F4F4F6
body · 18.0:1
Long-form description copy sits one step down, so a paragraph never competes with the heading above it. --color-body-secondary-lighter · #C7C7DB
descriptions · 11.9:1
14 Aug 2026 · 6 min read --color-body-secondary · #9595BB
metadata & placeholders only · 6.87:1
a role rule — long-form copy uses the lighter steps
Discuss project for free --color-action → --color-hovered on hover
hover raises contrast, never lowers it

In situ — page, card, raised card

The same content at three surface levels. Confirm separation comes from corner radius and the 1px border, not from fill.

Cloud & DevOps

Optimize costs.
Protect your Data

Default card: #0F0F15 fill, 24px radius, 1px #2B2848 border, padding 32px 32px 48px.

Learn more
Autodesk plugins

10x efficiency with
custom Plugins

Raised / hovered card: #1C1C27. This is the entire hover delta for a card — nothing scales, nothing brightens.

Learn more

There is no light theme. The system ships none, and one must not be derived. The three light-surface exceptions are catalogued in colors-theme-light.html.