Foundations / Color
One color has a job. The rest stay out of its way.
RamosLabs runs on a single action accent. Indigo carries every deliberate action, and nothing else competes for it. When only one color can say "act here," people learn it in seconds and every screen stays calm. That is the whole system: one voice for action, a deep neutral ramp for everything else, and reserved signals for state. The action accent is #4f46e5. Violet appears as a decorative accent only, never for action.
The accent, up close
Eleven tested steps from light to dark. The interface lives at 600. Everything above tints, everything below deepens for hover and pressed states.
Always reach for a role, not a raw color
Those ramps are primitives: raw hues, named by number, never by meaning. Product code never touches them. It consumes a role, a token named for the job it does. Re-theme the whole product by re-pointing roles, not by hunting hex across a codebase.
Roles, shown in context
A role is a job with a color attached. Here is what each one does on a real surface. Roles are theme-agnostic: a future dark theme re-points these targets, it never renames the role.
Rest --color-primary, hover --color-primary-dark, focus ring at --color-focus. The one accent for submit, confirm, active nav.
Recommended: --color-primary-surface tint with primary-colored text. Avoid: white text on the tint, it fails contrast on the pale surface.
Contrast you can see
Contrast is a floor. WCAG 2.2 asks 4.5:1 for normal text, 3:1 for large text and UI edges (AA); 7:1 is AAA. Every pairing below is measured. Green passes, amber and raw red do not, which is exactly why the darker variants exist.
Rule: pair every status color with an icon and a label, give every invalid field real text, and make focus a visible ring. Why: color is never the only channel (WCAG 2.2 SC 1.4.1), so meaning survives for color-blind and low-vision users. Color reinforces, it never carries meaning by itself.
Sources
WCAG 2.2 contrast floors SC 1.4.3 / 1.4.6 / 1.4.11 and use of color SC 1.4.1 (w3.org/TR/WCAG22). Role-token model after Material 3 color roles (m3.material.io) and Refactoring UI numbered scales. The primitive color ramps are Tailwind CSS's open-source (MIT) default palette (tailwindcss.com), adopted hex-for-hex as the raw material; the role concepts and numbered scales come from Material 3 and Refactoring UI. The 60-30-10 accent balance is a common color composition rule. Ratios computed with the WCAG 2.x relative-luminance formula, matching the Color Picker story.