Do's & Don'ts

The most common mistakes, visualized so the whole team avoids them. These rules keep the CTD Learns interface consistent and predictable.

Active navigation state

DO

Processes
Active = gray background + navy text

DON'T

Processes

Never use orange for active nav

Button text casing

DO

Sentence case

DON'T

Never uppercase

Orange is CTA-only

DO

Section Title
Nav Item
Orange used only for primary CTA

DON'T

Section Title

Nav Item

Orange loses meaning when overused

Token usage

DO

sx={{ color: "primary.main" }}
Always use theme tokens or palette keys

DON'T

sx={{ color: "#E8541A" }}
Never hardcode hex values in components

Status badge colors

DO

Workflow Name
Active
Active = green (semantic success)

DON'T

Workflow Name
Active
Active ≠ orange. Active = green. Orange = CTA only.

Source of truth flow

DO

theme.js
Design System
Figma
Theme tokens drive the design system. Figma mirrors it.

DON'T

Figma
theme.js
Figma is reference only. It does not lead.
Feedback