Color Review · Savor App · v1

Three palettes,
three doctrines,
one app.

Tap any pill to switch views Same components Three color systems
A
Option A · The handbook literal

Ceremonial.

All three master colors active, mapped to the three time states. Visually rich, but the hues aren't an optically balanced triad — burnt orange dominates by luminance, and the warm-cool flip between burnt orange and teal creates vibration. Shown here for reference; the next three variants split the doctrine into individual color anchors with proper color-theory support.

9:11
●●●●📶71%
now
soon
later
Test2346
📓 May 11 · 4:05pm
💭 Test note
Subtask 2
📓 May 11
Type here
Bone
Background · 95%
#FAF8F4
Ink
Text · primary
#1A1918
Burnt Orange
now · action
#C26432
Teal
soon · clarity
#2A7A8E
Plum
later · joy
#6E3F5C
// tailwind.config.js · NativeWind tokens
colors: {
  bone:    '#FAF8F4',
  ink:     '#1A1918',
  orange:   '#C26432',  // now
  teal:    '#2A7A8E',  // soon
  plum: '#6E3F5C',  // later
}

Why this works

The handbook isn't aspirational — it's a product constraint. This palette treats it as one. The three master colors each appear exactly once per surface: on the active tab pill, on a 2px card edge, and on the active nav icon. Everything else is bone and ink.

The semantic mapping — burnt orange for now, teal for soon, plum for later — works because the meanings in the handbook (action / clarity / joy) read as three equally valid emotional states, not a temperature scale. There is no implication that later matters less than now.

When the master layer is sparse, it becomes ceremonial. When it's constant, it's just decoration.

Risk: three accent colors create three small decisions every time a new component lands. Requires discipline (or lint rules) to keep the 5% rule from drifting.

A·1
Option A.1 · Burnt Orange anchor

Warm.

The handbook's warmest master color, used as the entire working accent. Burnt Orange on every active state. Russet on the primary action. Time states share one color — the pill moves, the temperature stays steady. A monochromatic system in the formal sense: one hue, three values.

Bone
Background
#FAF8F4
Sand
Soft tint
#F4DBC5
Burnt Orange
Primary accent
#C26432
Russet
Deep accent
#7A3818
Ink
Text · primary
#1A1918
Taupe
Text · secondary
#6B655D
// tailwind.config.js · NativeWind tokens
colors: {
  bone:       '#FAF8F4',
  sand:      '#F4DBC5',  // surfaces / washes
  orange:      '#C26432',  // primary accent
  russet: '#7A3818',  // deep · CTA
  ink:        '#1A1918',
  taupe:      '#6B655D',
}

Why burnt orange works alone

Burnt Orange is the handbook's action color — warmth, energy. Used as the sole accent, it gives Savor a signature warmth without competing temperatures inside the system. The five-stop scale (russet · burnt orange · sand · bone · ink) is a classic tonal palette — one hue, dialed through luminance for hierarchy. This is how Things 3 uses marigold, how Bear uses amber, how Tana uses orange.

Bold color is most powerful when it has space to breathe.

Brand emotion: action, warmth, momentum. Reads as "productive but unhurried."

What it trades: cool weight is minimal. Warm-monochromatic palettes can feel "outgoing," which some users won't associate with introspection. The russet mic provides some grounding but the system leans warm overall.

A·2
Option A.2 · Teal anchor

The eddy.

Teal as the only working accent. Ocean from the handbook carries the deep role. Same hue family throughout — teal reads as the lighter, more luminous expression of the same ocean that anchors the system. The only variant where the brand's mark and the brand's UI accent are conceptually unified.

Bone
Background
#FAF8F4
Mist
Soft tint
#B8DDE5
Teal
Primary accent
#2A7A8E
Ocean
Deep accent
#0E3A5A
Ink
Text · primary
#1A1918
Taupe
Text · secondary
#6B655D
// tailwind.config.js · NativeWind tokens
colors: {
  bone:  '#FAF8F4',
  mist:  '#B8DDE5',  // surfaces / washes
  teal:  '#2A7A8E',  // primary accent
  ocean: '#0E3A5A',  // deep · CTA
  ink:   '#1A1918',
  taupe: '#6B655D',
}

The eddy made literal

The brand's own framing of the gankyil: an eddy that arises out of the oceanic background. This variant takes that statement at its word. Teal as the working accent is the eddy made visible — a brighter, lighter expression of the same ocean tone that anchors the system. Both colors live in the same hue family, so the chrome and the symbol read as one continuous thought.

Of the four variants, this is the only one where the brand's visual mark and the brand's UI accent are conceptually unified. The handbook's stated meaning for teal — wisdom, clarity, breath — is also the most on-doctrine for what the manifesto actually claims to be.

The gankyil is an eddy that arises out of that oceanic background.

Cool monochromatic palettes also dominate 2026 calm-tech for the same reasons the manifesto invokes — breath, focus, contemplation. Oak, Calm, Day One blue mode, Streaks all converge here. Bone as the warm system layer underneath prevents the cool palette from feeling clinical.

Brand emotion: focus, calm, presence. Reads as a contemplative tool.

What it trades: warmth. Pure cool palettes can feel detached. The bone background mitigates this, but some users will read the system as "too cold."

A·3
Option A.3 · Plum anchor

Jewel.

The handbook's community, joy, connection color, used as the entire working accent. Wine carries the deep role. The boldest of the four variants — plum has more perceptual weight than burnt orange or teal at the same saturation, so the chrome reads more "branded."

Bone
Background
#FAF8F4
Rose
Soft tint
#DEC8D2
Plum
Primary accent
#6E3F5C
Wine
Deep accent
#3F1F30
Ink
Text · primary
#1A1918
Taupe
Text · secondary
#6B655D
// tailwind.config.js · NativeWind tokens
colors: {
  bone:    '#FAF8F4',
  rose:    '#DEC8D2',  // surfaces / washes
  plum: '#6E3F5C',  // primary accent
  wine:    '#3F1F30',  // deep · CTA
  ink:     '#1A1918',
  taupe:   '#6B655D',
}

Why plum is the riskiest

Plum-anchored systems are rare in calm-tech because plum carries social, expressive, and creative associations more than introspective ones. The handbook's stated meaning — community, joy, connection — confirms this: it's a color about being with others, not being with yourself.

That makes A.3 a strategic question, not just an aesthetic one. If Savor's roadmap includes a social or collaborative layer — shared lists, gentle visibility into what a partner is holding, group rituals — this becomes the right anchor. If Savor stays solo, plum will feel mismatched to the function.

Community, joy, connection.

Brand emotion: expressive, distinctive, social. Reads as the most "branded" of the four variants.

What it trades: visual quietness. Plum is perceptually brighter than burnt orange or teal at the same saturation, so even small uses carry more weight. The 5% rule has to be even more disciplined here.

B
Option B · The thermometer, refined

Thermometer.

The temperature metaphor — done with intent. Burnt Orange anchors now, ocean anchors later, both from the handbook. Wheat and surf carry the transition. Cards inherit a soft wash of their bucket's color. The thermometer idea, executed with restraint.

9:11
●●●●📶71%
now
soon
later
now
Test2346
📓 May 11 · 4:05pm
💭 Test note
Subtask 2
📓 May 11
Type here
Bone
Background
#FAF8F4
Burnt Orange
now · warm anchor
#C26432
Wheat
warm transition
#E5C5AA
Surf
cool transition
#A4C2CD
Ocean
later · cool anchor
#0E3A5A
Full Spectrum
now → later
burnt orange → ocean
// tailwind.config.js · NativeWind tokens
colors: {
  bone:    '#FAF8F4',
  ink:     '#1A1918',
  orange:   '#C26432',  // now · warm
  wheat: '#E5C5AA',  // warm transition
  surf:    '#A4C2CD',  // cool transition
  ocean:   '#0E3A5A',  // later · cool
}

What this offers

This is the thermometer doctrine taken seriously. Burnt Orange is in the handbook. Ocean is in the handbook. Wheat and surf are the two notes you'd compose between them if you wanted a smooth warm-to-cool spectrum that still feels like Savor. The palette is brand-coherent end to end — no off-system slate, no iOS-default reds.

The card wash is soft enough that it never feels alarming. The section header takes a deeper burnt orange that reads as confident, not loud. The mic stays ocean across all three time states, because the primary capture action shouldn't change temperature based on which bucket you're viewing.

Bold color is most powerful when it has space to breathe.

What this trades: the philosophical issue from the current app survives. Color still encodes urgency, even if more elegantly. Later will still pull cooler than now, and some users will still read that as "later matters less." If the team genuinely believes the temperature metaphor is correct — that proximity in time should feel warmer — this is the most defensible way to ship it.

Maintenance note: every new component now needs three color variants (now / soon / later). Cards, badges, headers, empty states, micro-interactions. The system gets richer; it also gets heavier.

C
Option C · Best practices, brand-honest

Held.

Bone as the universal field. The handbook's own ocean tone (#0E3A5A), promoted from "alternate environment" to the single accent. Every time bucket looks identical in chrome — only the active state moves. Three master colors reserved for capture-completion micro-moments only.

9:11
●●●●📶71%
now
soon
later
Test2346
📓 May 11 · 4:05pm
💭 Test note
Subtask 2
📓 May 11
Type here
Bone
Background
#FAF8F4
Paper
Card surface
#FFFFFF
Ink
Text · primary
#1A1918
Taupe
Text · secondary
#74695C
Ocean
Single accent
#0E3A5A
Master
Ceremony only
reserved
// tailwind.config.js · NativeWind tokens
colors: {
  bone:    '#FAF8F4',
  paper:   '#FFFFFF',
  ink:     '#1A1918',
  taupe:   '#74695C',
  ocean:   '#0E3A5A',    // the only accent
  // master · reserved for capture/completion moments only
  orange:   '#C26432',
  teal:    '#2A7A8E',
  plum: '#6E3F5C',
}

The argument

The brand handbook already names ocean. The handbook says ocean is for launch screens, meditation modes, and nighttime — moments where the interface should recede. That's the whole product. Savor is supposed to recede. Ocean is the right primary accent — not the three master colors used constantly.

Now / soon / later look the same. Same neutral tab bar, same card chrome, same nav. Only the position of the active pill changes. This is the chrome-level expression of the manifesto's core claim: your later is safe; nothing here is urgent.

Our success is not measured by how long you stay in Savor. It is measured by how confidently you can leave.

Burnt orange, teal, and plum still exist — but they're reserved for moments of ceremony: the brief flash when a voice note is captured, the gentle pulse when something gets surfaced, the once-a-day completion. They become rare, which is what the 5% rule actually meant.

This aligns with the 2026 "calm tech" pattern dominating wellness and mindfulness interfaces this year — elevated neutrals, single muted accent, no temperature signaling, generous whitespace. Same direction Things 3, Bear, iA Writer, Day One, and Linear have all converged on for different reasons.

Risk: visually quieter. It may test as "less exciting" in first impressions. The trade is that nothing on screen ever lies to the user about urgency.

Component Primitives · Research · v1

Same data,
three component doctrines.

Neutral grey, no brand color. These three samples explore segmented control, card pattern, and input chrome as standalone primitives — each following a different 2026 best-practice model. Pick the skeleton first, dress it later.

Apply palette
Neutral
A · Ceremonial
A.1 · Burnt Orange
A.2 · Teal
A.3 · Plum
B · Thermometer
C · Held
Sample 1
Elevated.

iOS-native pill segmented control. Elevated cards with subtle left accent. Shadow hierarchy. 44pt touch targets on all actions.

9:41
now 2
soon
later 1
Test2346
May 11 · 4:05pm
Test note
Subtask 2
May 11
Capture something…
Tasks
Timeline
Settings
Segmented control
iOS-native pill slider with elevated active state. Badge counts inside pills. 3px inset padding, 12px radius container.
Cards
Elevated white cards with subtle box-shadow. 3px left accent bar (neutral). Actions via icon-only 28pt buttons.
Icons
Lucide-style 2px stroke SVGs. Book for journal, message-square for notes, paperclip for attach, repeat for move.
Sample 2
Flat.

Material-inspired underline tabs. Borderless flat cards with checkbox affordance. Minimal chrome, maximum content density.

9:41
now
soon
later
Test2346
May 11 · 4:05pm
Test note
4:05p
Subtask 2
May 11
Add a thought…
Tasks
Activity
Profile
Segmented control
Underline tabs. Active state = bold + 2px bottom bar. Zero background treatment — content does the talking.
Cards
Borderless flat cards with checkbox as primary affordance. Timestamp right-aligned. Hover reveals subtle border.
Icons
Calendar for dates, message-square for notes. Reduced icon density — one action area (time) instead of button row.
Sample 3
Minimal.

Chip filter row. Grouped list with dot indicators — no card containers. Maximum breathing room. Things 3 / Linear energy.

9:41
now
soon
later
Test2346
May 11 · 4:05pm
Test note
Subtask 2
May 11
What's on your mind?
All
Alerts
Settings
Segmented control
Chip filter row. Dark filled active state, bordered outline inactive. Easily extensible to 4+ items.
Cards
No card container — grouped list rows separated by hairline. 8px dot status indicator. Maximum whitespace.
Icons
Clock for timestamps, message-square for notes. No action buttons visible — swipe gestures implied.

Component library

Every primitive the app might need — rendered in neutral zinc. Pick a palette above, apply it to any of these.

Buttons
Primary, secondary, ghost, icon-only. 40px height, 10px radius. 44pt min touch target.
Small Buttons
Compact 32px height for inline actions. Danger variant for destructive ops.
Text Input
Standard and search variants. 40px height, 10px radius. Search has embedded icon.
Toggle
44×26px switch. Off = zinc-200, on = zinc-900. 20px knob with shadow.
Unchecked
Checked
Checkbox
20×20px, 6px radius. Checked fills dark with checkmark. Completed text gets strikethrough + muted.
Default Active Outline Status
Badges
Pill badges for counts, status, and labels. Dot variant for status indicators.
S
AB
Avatar
28 / 36 / 44px. Initials or icon fallback. For profiles, collaborators, assignment.
Pill
Slider
Type
Chip A
Chip B
Chip C
Segmented Control
Pill slider (iOS-native) and chip row (filter pattern). For time-state, view mode, or category switching.
Moved to later
Toast / Snackbar
Dark overlay feedback for actions. Icon + message. Auto-dismiss after 3s. Bottom-anchored on mobile.
Move to soon
Edit
Delete
Bottom Sheet
Action menu with drag handle. Icon + label rows. Destructive actions in red. 16px radius top corners.
Daily progress3 / 5
Streak7 days
Progress Bar
4px track with dark fill. Label + count above. For daily completion, streaks, onboarding.
or
today
Dividers
Hairline (1px), or labeled divider with centered text. For section breaks and temporal groups.
All clear
Nothing in this bucket right now.
Empty State
Centered icon + title + subtitle. Calm, not gamified. For empty buckets and zero-state onboarding.
Swipe left →
Swipe Actions
Swipe-to-reveal: move (blue) and delete (red). 56px action width. For card-level quick ops.
FAB
52px floating action. Rounded-square (16px) or circle. For primary capture: add task or voice note.
Skeleton Loader
Animated shimmer placeholders. Match card layout dimensions. For async data loading.
20 Page Title
17 Section
14 Card Title
13 Body text
11 Meta / caption
9 OVERLINE
Type Scale
6-stop scale: 20 / 17 / 14 / 13 / 11 / 9px. SF Pro or Geist. Weight and color encode hierarchy.
Icon Set (18 icons)
Lucide 2px stroke, 16×16. Home, plus, search, bell, mic, camera, chat, calendar, clock, swap, settings, paperclip, user, trash, edit, book, more, check-circle.