Monochromatic vs Dark Mode
One restricts hue, the other restricts value. They are different constraints and they fail in opposite directions.
Short answer: Monochromatic uses a single hue and varies only its lightness — every grey on the page is the same blue. Dark mode uses neutral surfaces and varies value in tight steps, reserving colour for one accent.
What actually separates them
Monochromatic is a palette rule: take one hue, derive nine values from near-white to near-black, and build everything from that ramp. The page reads as tinted rather than coloured, and hierarchy comes from how far up the ramp an element sits.
Dark mode is a contrast rule: surfaces step from #0e1116 to #1d232c, borders sit at 8 percent white, and a single accent is reserved for anything interactive. Nothing is tinted; the neutral is the point, because a dark interface has to stay out of the way of content and images.
Decision table
A filled dot marks the side that handles the dimension more convincingly. It is a judgement, not a rule — several rows are genuinely a tie.
| Dimension | Monochromatic Design | Dark Mode |
|---|---|---|
| Constraint | One hue, many values | Neutral greys, one accent |
| Surfaces | Tinted ramp --t0 to --t6 | #0e1116 to #1d232c in four steps |
| Status colour | Nowhere to put it | ● One accent, used only on controls |
| Corners | 2 to 4px | 12px |
| Type | One family, hierarchy by value | One family, hierarchy by weight and opacity |
| Images | Tint clashes with photography | Needs dark assets or a filter |
The CSS that changes
These are the declarations that make the difference visible. Everything else — font sizes, spacing, section order — is shared, because both pages use the same markup.
| Property | Monochromatic Design | Dark Mode |
|---|---|---|
| Tokens | --t0 #f5f9ff through --t6 #0a56c8 |
#0e1116 / #141922 / #171c24 / #1d232c |
| Border | 1px solid var(--t2) |
1px solid #232b36 |
| Radius | 2px to 4px |
12px |
| Label tracking | letter-spacing: .18em |
letter-spacing: .16em |
When each one wins
Monochromatic Design wins when
- The brand already has one strong colour and you want the interface to inherit it
- The page is a document or a report where status colours are not needed
- You want a distinctive look from a very small token set — nine values, no colour decisions
Dark Mode wins when
- The product is used at night or alongside media, where a bright page is hostile
- You need status colours and cannot afford to lose them
- The interface is data-heavy and the content should dominate the chrome
Steering a model to one or the other
For monochromatic, give the model the hue and the number of steps and tell it that no other hue may appear — including in borders and shadows, which are where a stray blue usually sneaks in. For dark mode, give the surface steps as exact hex values and state that the accent is for interactive elements only; without that clause a model will tint headings and borders and the page stops reading as neutral.