The feelingDM Serif Display
Less noise.
More possibility.
Expressive, never loud. Kept for the wordmark and the rare editorial moment.
--font-display--text-display--leading-tightThe Sortae design system
Clarity,
made tangible.
Nocturne. A little light, after dark.
A quieter space for everything on your mind. Deep, restful surfaces, one calm accent, and nothing between you and what matters — in Nocturne or in Daylight.
Made for a little more headspace
Live tokens. Real materials.
01
A quiet foundation.
Nocturne creates space. A soft mint accent marks what matters; amber, blue, and violet name the lanes your attention can take.
Nocturne
The defaultCanvas
--canvasThe quiet backdrop
Surface
--surfaceWhere content rests
Ink
--inkEvery word, clear
Accent
--accentA little light
Now
--nowWhat can’t wait
Know
--knowKept for you
Explore
--exploreRoom to wander
Daylight
The same calm, litCanvas
--canvasThe quiet backdrop
Surface
--surfaceWhere content rests
Ink
--inkEvery word, clear
Accent
--accentA little light
Now
--nowWhat can’t wait
Know
--knowKept for you
Explore
--exploreRoom to wander
Semantic tokens like --canvas and --ink adapt the interface to its theme. Text and glass receive small contrast adjustments for readability.
02
One unmistakable thread.
The original sculpted metal æ. Paired with a warm serif wordmark, or quietly recognizable on its own.
Daylight
Full signature
Nocturne
Same metal. A lighter wordmark.
Give the mark room to breathe. Keep its metallic finish intact, and let the wordmark respond to the surface beneath it.
03
Warmth meets precision.
A little character for the moments that welcome you. Effortless readability for everything you came here to do.
The functionManrope
Your attention, in order.
A place for the things you need to do, the things you want to know, and the ideas worth keeping.
Aa Bb Cc 0123456789
One variable family, weights 400 through 800. Clear at every size — for navigation, everyday reading, labels, and decisions.
--font-body--text-body--leading-body04
Depth, with a purpose.
Three materials, three clear jobs. Content stays on paper. Glass belongs to the controls around it.
Canvas
The calm, continuous backdrop. A soft glow, without competing for attention.
--canvas · --canvas-glowA note to self
Make space for a slower morning.
One clear thought is a lovely place to start.
Paper / content
An opaque, readable home for your words. White in the light theme; protected contrast in the dark.
--surface-raised · --shadow-cardReady when you are.
Glass / controls
A light-catching layer for small actions. A solid surface when transparency isn’t available.
--glass · --blur-glass05
Space is part of the feeling.
A four-pixel rhythm keeps related things close and gives new thoughts room. Soft corners make the structure feel natural.
A little breathing room
- 4px
--space-1 - 8px
--space-2 - 12px
--space-3 - 16px
--space-4 - 24px
--space-6 - 32px
--space-8 - 48px
--space-12
--space-6 gives cards their comfortable 24px inset. Small gaps connect; generous gaps separate.
Soft, not shapeless
Controls
--radius-smCards
--radius-lgSmall actions
--radius-pillCorners follow the scale of the object. Every interactive target has at least --touch-target of space: 44px.
06
Finite, always.
Progress counts what is done and what remains — never a percentage, never a streak. One loud action per screen; everything else waits its turn.
2 of 8 done~14 min left
Skip, always
Attention has a shape.
A queue you can finish. Segments fill as you go, the next thing stays outlined, and minutes — not percentages — tell you how much is left.
--accent--line--action-primary-h07
A little light. Then stillness.
Motion acknowledges your action; it never asks for one. A single calm fade passes over the control, then gets out of your way.
On your termsNo shimmer. No bounce. No loops.
Ready when you are.
A response, not a distraction.
One 240ms fade, shaped by a gentle ease. The button stays readable from beginning to end.
--duration-medium--ease-fluidAlways readable. Attention protected. Keyboard focus stays visible. Reduced motion removes the fade entirely; reduced transparency gives glass a solid backing.