Routine
For the skincare app. It's meant to be used every morning and every evening, so the colours follow the clock and it goes dark at night when the glare is all too much. What you see here is the 10am set, which is what shows before the app has checked the time.
Ritual
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 | 13px |
--ds-density | 1 |
--ds-font-display | Fraunces |
--ds-font-sans | Hanken Grotesk |
Colours
Ground
bg#FAF7F1
bg-alt#F1EDE2
surface#FFFFFF
surface-raised#FFFFFF
surface-hover#F5F1E9
Line
border-subtlergba(30, 27, 46, 0.05)
borderrgba(30, 27, 46, 0.08)
border-strongrgba(30, 27, 46, 0.16)
Ink
text#1E1B2E
text-dim#6B6780
text-muted#A5A1B5
text-inverse#FFFFFF
Accent
accent#F0693C
accent-hover#E85F32
accent-alt#5A5CE0
accent-contrast#FFFFFF
accent-gradientlinear-gradient(135deg, #F0693C 0%, #5A5CE0 100%)
Signal
success#2E9E6B
warning#B07A16
danger#D14343
info#5A5CE0
Shadow and selection
shadow-colorrgba(30, 27, 46, 0.28)
shadow-highlightrgba(255, 255, 255, 0.90)
selection-bg#F0693C
selection-text#FFFFFF
Use it
import "obvious/css/primitives.css";
import "obvious/css/themes/routine.css";Its favicon is icons/routine.svg.