Primary
main ·#4836ff
The OCL accent. Use for primary actions, links, active nav, focus rings, and status indicators that need the most visual weight.
Color
The OCL palette is a Material 3 tonal system
defined in oclweb3/src/common/colors.jsx. Every palette exposes shades from 10 (darkest)
to 99 (lightest), plus main / light / dark / contrastText
for MUI theme compatibility. Reference shades by name (primary.80, surface.n96) so the
design and the code speak the same language.
Click any swatch to copy its hex value. The token name shown matches the key you'd use in a MUI
sx prop
or when reading from theme.palette.
Secondary
main ·#5e5c71
Muted companion for supporting text, dividers, and secondary chip borders. secondary.main is the default body text color via TEXT_GRAY.
Tertiary
main ·#7a5368
Accent for content categories that need to be distinguishable from primary (e.g. tagged metadata, alternate entity types). Use sparingly.
Surface
main ·#fcf8fd
Backgrounds and borders. surface.main is the app background. surface.n96 is the subtle panel background. surface.nv80 is the default card border.
Error
main ·#ba1a1a
Destructive actions, validation failures, and error states. Only a few shades are defined — expand in colors.jsx if you need more.
Neutral
partial scale
A sparse neutral scale used for disabled/placeholder text. Most gray needs are covered by surface.* or the named grays below.
Named grays
fromcolors.jsx constants
Legacy constants still referenced throughout the app. Prefer the palette shades above when adding new code.
What dark is for
MUI paints dark under contrastText (white). It's the hover fill of a contained button,
and the hover and keyboard-focus fill of a clickable chip that has a color, such as a color="primary"
Pill button. So dark stays darker than main and keeps at least 4.5:1 against white.
In primary, secondary and tertiary it's tone 30; error.dark is
Material 3's error tone 30, #93000a. For a light tint, use a numbered tone (primary.80,
primary.90, …), never dark. Button lists
each button's hover and focus fills.
Semantic mapping
In oclweb3/src/index.jsx, success is aliased to primary and info
to secondary. There is no dedicated warning palette. If a design calls for warning
semantics, use tertiary or add a new palette to colors.jsx and this file.