Shade Picker
Charcoal Light + Lighter
Pick the pair that feels right. Each option steps up from our locked base charcoal (#171415) with the same warm red undertone. Shown as swatches and in-situ as cards on the charcoal background.
Locked Base
Deep #0d0b0c
Charcoal #171415 (body bg)
Option A - Subtle Steps
Small increments. Cards barely lift off the background. Elegant but might not give enough contrast for interactive states.
In situ
This is how a card looks on the charcoal background using the light shade.
#1d1a1b on #171415
This is the lighter shade used for tooltips, hover states, and elevated panels.
#232021 on #171415
Option B - Medium Steps
Clear distinction from the base. Cards visibly lift. Good balance of subtlety and usability.
In situ
This is how a card looks on the charcoal background using the light shade.
#1f1c1d on #171415
This is the lighter shade used for tooltips, hover states, and elevated panels.
#282425 on #171415
Option C - Wider Steps
Strong separation. Cards clearly pop. More contrast for interactive elements but risks looking too "layered".
In situ
This is how a card looks on the charcoal background using the light shade.
#211e1f on #171415
This is the lighter shade used for tooltips, hover states, and elevated panels.
#2d292a on #171415
Option D - Warm Lift
Slightly warmer lean on the lighter shade. The red undertone is more pronounced as you go up. Feels premium.
In situ
This is how a card looks on the charcoal background using the light shade.
#1e1b1c on #171415
This is the lighter shade used for tooltips, hover states, and elevated panels.
#272324 on #171415
← Component Library