Scriptia · Brand Color System

A calm, literary green on warm paper.

One brand identity, two registers. Restrained in the product so reading stays effortless, committed in marketing so the brand has a voice. Colors are named by role, never by hue, so the palette can evolve without renaming every token.

1. The decision

The current olive #767A42 reads slightly military because it is desaturated and sits in the khaki band. The fix is not a new color family, it is a deeper, richer green with more chroma: botanical and bookbinding, not utility. Warmth is carried by the paper canvas and a gold secondary, not by the green itself.

Retiring
Old olive
#767A42
Desaturated, khaki band. Reads military under warm light.
Recommended
Brand green
#2F6A4C
Deep botanical green. Literary, differentiated, calm over long reads.
Alternate
Strong moss
#5E7A34
If you want to stay olive-adjacent but louder. Warmer, more yellow.

Recommendation: adopt the botanical green as primary and test the moss alternate in-app before committing. Both escape the military read; the botanical green is the more differentiated choice against a competitor set already crowded with orange and blue-purple.

2. UI palette — light

The product default. Neutral surfaces, ink text, green used as punctuation. This is the everyday app.

Backgrounds & structure

canvas
bg / canvas
#F7F3EA
App base. Warm paper. The one place warmth lives.
surface
bg / surface
#FFFDF8
Cards, sheets, anything raised above canvas.
fill
bg / fill
#E9EFE6
Subtle section tint. Solid token, replaces olive-at-0.1.
subtle
accent / subtle
#E4EDE6
Tinted background for selected or active states.
separator
separator
#E4DFD3
Hairlines, dividers, borders.

Ink (text)

primary
text / primary
#22241D · 14.2:1
Headings and body. Warm near-black, never pure #000.
secondary
text / secondary
#565A4C · 6.4:1
Metadata, captions, supporting copy.
tertiary
text / tertiary
#666A5B · 4.5:1
Placeholders, hints. Not for long body text.

Accent & brand

accent
accent
#2F6A4C
Primary interactive + brand. Buttons, links, selection.
pressed
accent / pressed
#245038
Pressed and active states of accent controls.
gold
accent / warm
#B5842E
Secondary highlight: ratings, badges, gilded touches. Decorative or large text only.

Status

success
success
#2E7D4F
warning
warning
#B4791E
error
error
#B23A2E
info
info
#3A6B8A
The Master and Margarita · Mikhail Bulgakov
Chapter 12 of 32

3. UI palette — dark

Warm near-black, not pure black. Paper at night. The green lightens so it stays legible on the dark canvas.

Backgrounds & ink

canvas
bg / canvas
#191A16
surface
bg / surface
#22231E
fill
bg / fill
#262A22
primary
text / primary
#ECE7DB · 14.2:1
secondary
text / secondary
#A8A99B · 7.3:1
tertiary
text / tertiary
#8A8C7B

Accent & status

accent
accent
#5F9E77 · 5.5:1
pressed
accent / pressed
#4E8A66
gold
accent / warm
#D6A24C
success
success
#5FB07E
error
error
#D9695E
info
info
#6FA0BE

4. UI vs Marketing

Same hues, different ratios. This is the rule that keeps the app calm and the marketing loud without two separate brands.

RESTRAINED

Product UI

Neutral canvas and surfaces. Accent green under roughly 10% of any screen: buttons, selection, links. Gold appears only as a small highlight. Reading is the product, so color punctuates, it never fills.

COMMITTED

Marketing

The brand green can own 30 to 60% of a section as a solid surface. Cream text on green, gold for emphasis. This is where the identity gets a voice. Publishers judging the platform read this surface, so restraint here reads as unfinished.

Marketing register

Your storefront. Your readers. Your data.

Sell ebooks under your own brand and see exactly how people read them.

5. Marketing palette (posts, decks, slides)

The product uses these tokens restrained. Marketing uses the same colors committed. Nothing new is invented here, the difference is ratio and surface. Warmth and voice come from letting the green own whole surfaces, not from adding hues.

Marketing surfaces

Every post, slide, or banner sits on one of three backgrounds. Pick one per surface, do not blend them into a gradient.

drenched
Drenched green
bg #2F6A4C · text #F3EFE3
Title slides, hero posts, quote cards. The loud surface. Gold for emphasis.
paper
Warm paper
bg #F7F3EA · text #22241D
Content slides, editorial posts, long copy. Green as accent only.
clean
Clean surface
bg #FFFDF8 · text #22241D
Data slides, charts, screenshots. Maximum legibility for numbers.

Text on green is always cream #F3EFE3, never pure white (it vibrates) and never gold (fails contrast at body size). Gold is for a single emphasis per surface: a badge, an underline, a key figure.

Marketing text colors

Text color is chosen by the surface it sits on, not by the token you would use in the app. On green use cream; on paper or clean surface use the ink ramp. Green itself becomes the emphasis/link color on light surfaces.

Primary on green
Cream
#F3EFE3 · 5.6:1
Headlines and body on drenched green.
Muted on green
Cream muted
#D0D7C8 (cream @82%) · 4.3:1
Sub-labels on green. Large text only.
Primary on paper
Ink
#22241D · 14.2:1
Headlines and body on paper / clean.
Secondary on paper
Ink secondary
#565A4C · 6.4:1
Captions, supporting copy.
Tertiary on paper
Ink tertiary
#666A5B · 5.0:1
Timestamps, fine print.
Accent on paper
Green
#2F6A4C · 5.8:1
Links, emphasis, key words on light surfaces.

Gold #B5842E is not a text color. It clears only 3:1 on paper, so use it for large display figures or decoration, never for body or captions. On green, never set text in gold or pure white.

Deck / chart categorical palette

Decks need multiple distinct series colors, which the product UI never does. Use this fixed order for bars, lines, and segments. All read on paper and clean surfaces. Brand green always leads.

1
Green
#2F6A4C
2
Gold
#B5842E
3
Blue
#3A6B8A
4
Terracotta
#B15A3C
5
Plum
#6D5091
6
Sage
#7C8A5A

This palette is for data visualization only. Do not pull terracotta or plum into UI or into non-chart marketing, they exist so charts have enough distinct series without leaving the brand's temperature.

SLIDES & DECKS

Rules

Open and close on drenched green (title, thank-you); keep content slides on paper or clean surface so the deck breathes. One accent idea per slide. Cream text on green, ink on paper. Body type no smaller than 18pt, so it survives a projector. Headings serif, labels and data sans, matching the product. One chart palette across the whole deck, in the fixed order above.

SOCIAL POSTS

Rules

Consumer/reader posts (Instagram) lean committed: drenched green, gold badge, cover art as the hero. Publisher/B2B posts (LinkedIn) lean restrained: clean surface, green carrying one number. One message per post. Keep the logo lockup in a corner, not centered. Leave safe margins for platform UI. Green is the recognizable slot the big platforms do not use, so let it dominate rather than hide.

Marketing do

  • Let green own 30 to 60% of a hero surface. This is the register where it should be loud.
  • Use cream #F3EFE3 for all text on green.
  • Reserve gold for one emphasis per surface: badge, key number, rule.
  • Keep the chart palette in its fixed order so series colors stay consistent across decks.

Marketing don't

  • Blend backgrounds into gradients. Pick one of the three surfaces.
  • Put gold or pure white as body text on green.
  • Introduce off-brand hues for "pop". The pop is the green owning the surface.
  • Stack two loud surfaces back to back. Alternate drenched with paper.

6. Reader vs Publisher surfaces

One brand hue, two tuned expressions, adapted from the team's inverted-surface idea (in green, not purple).

Reader

Warm, paper-forward, light by default. The green recedes so the book is the hero. Dark mode is a first-class reading theme, not an afterthought.

Publisher

Deeper, more authoritative use of the green for the dashboard and publisher-facing marketing. Signals a serious tool, dense neutrals for analytics, green as the frame.

7. Reading themes stay separate

The in-reader page colors (white, beige, grey, black with their paired text) are a user-selectable subsystem, not part of the app chrome. Keep them under colors/reading/*. Do not fold them into the brand tokens above, and do not use brand tokens as reading backgrounds. They answer a different question: what does the page look like while I read, not what does the app look like.

8. Rules (product UI)

Do

  • Name tokens by role (accent), never by hue (olive).
  • Set AccentColor in the asset catalog to the brand green so system tint stops defaulting to iOS blue.
  • Use solid bg/fill for section tints instead of accent-at-opacity.
  • Keep warmth in canvas and gold; keep the green low-arousal.
  • Verify every text pair at 4.5:1 (large 3:1) when you swap a hue.

Don't

  • Ship gradient canvases. Text contrast becomes a moving target.
  • Use gold for body text. It only clears 3:1, so large or decorative only.
  • Let accent exceed ~10% of a product screen.
  • Reintroduce a second warm-white. There is one canvas.
  • Reference colors by stringly-typed paths in new code once tokens exist.