Household
For our household app. Warm grey paper, near-black ink and one green. It's the only theme with a proper dark set, because it follows whatever the phone is set to.
Household app
I make complicated products feel obvious.
Daylight saving takes an hour each spring and gives most of it back each autumn.
Dials
| Dial | Value |
|---|---|
--ds-radius-base | 14px |
--ds-density | 1 |
--ds-font-display | SF Pro Rounded |
--ds-font-sans | SF Pro Text |
Light colours
Ground
bg#F4F3F0
bg-alt#EBE9E4
surface#FFFFFF
surface-raised#F8F7F4
surface-hover#EBE9E4
Line
border-subtlergba(0, 0, 0, 0.06)
border#DEDBD4
border-strong#C7C3BA
Ink
text#151412
text-dim#5C5850
text-muted#6B675F
text-inverse#F4F3F0
Accent
accent#2F7A5F
accent-hover#276B53
accent-alt#E08A2C
accent-contrast#FFFFFF
accent-gradientlinear-gradient(135deg, #2F7A5F 0%, #2E9C6A 100%)
Signal
success#2E9C6A
warning#E08A2C
danger#D8473D
info#2F7A5F
Shadow and selection
shadow-colorrgba(20, 18, 14, 0.28)
shadow-highlightrgba(255, 255, 255, 0.90)
selection-bgrgba(47, 122, 95, 0.30)
selection-text#151412
Dark colours
Used when the device is in dark mode.
Ground
bg#0B0B0A
bg-alt#242320
surface#181816
surface-raised#1B1B19
surface-hover#242320
Line
border-subtlergba(255, 255, 255, 0.07)
border#34332F
border-strong#4A4843
Ink
text#F4F2ED
text-dim#B5B1A9
text-muted#9A968E
text-inverse#0B0B0A
Accent
accent#5CC49A
accent-hover#74D0AA
accent-alt#F0A24D
accent-contrast#0B0B0A
accent-gradientlinear-gradient(135deg, #5CC49A 0%, #3FBF86 100%)
Signal
success#3FBF86
warning#F0A24D
danger#F06B60
info#5CC49A
Shadow and selection
shadow-colorrgba(0, 0, 0, 0.70)
shadow-highlightrgba(255, 255, 255, 0.06)
selection-bgrgba(92, 196, 154, 0.30)
selection-text#F4F2ED
Use it
import "obvious/css/primitives.css";
import "obvious/css/themes/morris.css";