Colors
The RDC brand color palette and usage guidelines.
Color Palette
Flame Ignition
Variable: --flame-ignition
Hex: #FF6100
Primary branding color. Used for buttons and other (form) controls, sometimes for larger containers with important information, and for larger text or amounts/percentages.
Midnight Blue
Variable: --midnight-blue
Hex: #042C5A
Default text color. In some cases used for card or container backgrounds.
Sunset Rev
Variable: --sunset-rev
Hex: #FF8A01
Logo color when the background is white. Not used often. Could be used for progress background tracks or percentage dial background tracks.
Turbo Blue
Variable: --turbo-blue
Hex: #3F7AAB
Not used often. Could be used as subtext for larger text in Midnight Blue.
Pearl Drift
Variable: --pearl-drift
Hex: #FFF9F3
Subtle color used for table headers or other non-prominent, subtle elements.
Skyline Pearl
Variable: --skyline-pearl
Hex: #E8F0F7
Used as the background for content areas which contain white cards or containers. Works well with all colors.
Usage
This is a MANUAL step. Usually, you would let the LLM decide what colors to apply by analyzing the design and component context.
All brand colors are available as CSS custom properties:
.my-element {
background-color: var(--background);
color: var(--foreground);
}Dark Mode
The color system automatically adapts in dark mode. Dark surfaces use --midnight-blue as the base, with lighter tints for text and borders.
Accessibility
All color combinations meet WCAG 2.1 AA contrast guidelines:
--flame-ignitiononwhite: 4.8:1--midnight-bluetext on--pearl-drift: 12.1:1--turbo-blueon white: 4.6:1