WORK-200
Setting up your dashboard 0 entities found · 6/29 branches scanned
ID:WORK-200Status:done

Neutral default body palette (light + dark)

Author Lumina's new default body palette — the warm-neutral surface, monochrome primary, and supporting tokens. Light surface anchors at #f6f4ef, dark surface inverts to #1c1a17. All thirteen base color tokens specified explicitly in SPEC-051. Replaces the current cream-and-navy values; the cream-and-navy palette gets extracted as the tideline preset in WORK-204.

Priority:highComplexity:mediumMilestone:v0.14.0Source:SPEC-051
main View source

Criteria completion

Criteria completion: 19 of 19 (100%) checked; history from May 18 to May 180%25%50%75%100%May 18May 18

Relationships

Implements 1
Related 11
Branches 2
main current done
claude/v0.14.0-spec-051-palettes doneclaude/spec-053-tint-authoring-notes ready
History 4
  1. 8f42873
    • ☑ Light-mode body palette implemented per the SPEC-051 token table:
    • ☑ `color.bg = #f6f4ef`
    • ☑ `color.text = #1c1a17`
    • ☑ `color.muted = #6b6661`
    • ☑ `color.border = #e8e5df`
    • ☑ `color.surface.base = #fcfaf6`
    • ☑ `color.surface.raised = #ffffff`
    • ☑ `color.surface.hover = #efece5`
    • ☑ `color.surface.active = #e8e5df`
    • ☑ `color.primary = #1c1a17`
    • ☑ `color.primary-hover = #3a342d`
    • ☑ `color.code.bg = #ebeae8`
    • ☑ `color.code.inline-bg = #e6e5e3`
    • ☑ `color.code.text = #1c1a17`
    • ☑ Dark-mode body palette implemented per the SPEC-051 token table (values from the table's "Dark" column)
    • ☑ `color.primary-scale` (50→950) ramp implemented along the warm-neutral axis — eleven stops from near-bg to near-text. Hand-pick values; tooling verifies monotonicity
    • ☑ Code surface (`code.bg`, `code.inline-bg`) uses lower chroma than the page bg per the SPEC-051 "chroma step-down" principle — verified visually that code blocks don't read as brown
    • ☑ CSS coverage tests pass against the new palette
    • ☑ Visual review: at least one page of refrakt content (a docs page with body, code, headings, callouts) renders against the new palette and reads as "calm warm neutral" rather than "cream" or "grey"
    by bjornolofandersson
  2. 0ba6f5f
    Content editedby Claude
    v0.14.0 Chunk 6: SPEC-051 palettes + fonts (WORK-200, 201, 202, 203)
  3. 3b92415
    Created (ready)by bjornolofandersson
  4. 80943c2
    Content editedby Claude
    plan: add SPEC-051 lumina neutral default + presets work items (WORK-200

Acceptance Criteria

  • Light-mode body palette implemented per the SPEC-051 token table:
    • color.bg = #f6f4ef
    • color.text = #1c1a17
    • color.muted = #6b6661
    • color.border = #e8e5df
    • color.surface.base = #fcfaf6
    • color.surface.raised = #ffffff
    • color.surface.hover = #efece5
    • color.surface.active = #e8e5df
    • color.primary = #1c1a17
    • color.primary-hover = #3a342d
    • color.code.bg = #ebeae8
    • color.code.inline-bg = #e6e5e3
    • color.code.text = #1c1a17
  • Dark-mode body palette implemented per the SPEC-051 token table (values from the table's "Dark" column)
  • color.primary-scale (50→950) ramp implemented along the warm-neutral axis — eleven stops from near-bg to near-text. Hand-pick values; tooling verifies monotonicity
  • Code surface (code.bg, code.inline-bg) uses lower chroma than the page bg per the SPEC-051 "chroma step-down" principle — verified visually that code blocks don't read as brown
  • CSS coverage tests pass against the new palette
  • Visual review: at least one page of refrakt content (a docs page with body, code, headings, callouts) renders against the new palette and reads as "calm warm neutral" rather than "cream" or "grey"

Approach

Authors the values directly into Lumina's base ThemeTokensConfig (post-WORK-191). The values are fully specified — this is a transcription, not a design decision, except for primary-scale which is a hand-pick task (the spec calls out the ramp axis but not exact stops).

For primary-scale, walk the warm-neutral hue at low chroma from ~L 0.97 (near bg) to ~L 0.20 (near text) in eleven roughly-perceptually-uniform steps. Use OKLCH for the picks; export hex. Tooling can verify the L progression is monotonic and roughly even.

Status palette (WORK-202) and syntax palette (WORK-201) are sibling work items — they don't block this one but should be done in the same milestone so Lumina ships a fully populated contract.

Dependencies

  • WORK-185 — types ready.
  • WORK-191 — Lumina migrated to config-driven tokens. (This work item rewrites those values; can't happen until they're authored as config.)

References

  • SPEC-051 — "The Neutral Default" section with full token table
  • packages/lumina/src/config.ts (post-WORK-191) — file being edited