Light & dark
Themes
One semantic contract, two value sets. Light is aliased from Figma; dark is synthesized — see Dark Mode.
light
Card surface with muted foreground text.
dark
Card surface with muted foreground text.
The contract
| Token | Light | Dark |
|---|---|---|
| --background | #ffffff | #050c11 |
| --foreground | #050c11 | #f0f7ff |
| --cardsynthesized | #ffffff | #0b1821 |
| --popoversynthesized | #ffffff | #0b1821 |
| --primary | #1d4ed8 | #60a5fa |
| --primary-foreground | #f0f7ff | #050c11 |
| --secondary | #c7cfc7 | #2e362e |
| --secondary-foreground | #465245 | #e3e7e3 |
| --muted | #f6f6f6 | #102432 |
| --muted-foreground | #6d6d6d | #92b2c8 |
| --accent | #f0f7ff | #102432 |
| --accent-foreground | #1d4ed8 | #f0f7ff |
| --destructivedarkened for AA | #c60a0a | #dd6a6a |
| --success | #5d6d5c | #90a08f |
| --warningdarkened for AA | #7f5b21 | #ffc975 |
| --border | #92b2c8 | #395a70 |
| --ringsynthesized | #1d4ed8 | #60a5fa |
| --brandidentity — the Figma navy | #1b3c53 | #7495ab |
| --brand-foreground | #f0f7ff | #050c11 |
| --actiondefaults to primary | #1d4ed8 | #60a5fa |
| --action-foregrounddefaults to primary-foreground | #f0f7ff | #050c11 |
| --action-hoveraction @ 90% — native | #3460dc | #5796e3 |
| --action-pressedaction @ 85% — native | #3f69de | #528ed7 |
| --linkdefaults to primary | #1d4ed8 | #60a5fa |
| --focusdefaults to ring | #1d4ed8 | #60a5fa |