Brand Guide

01 — Color

The palette

Two surfaces, one hue. The binding is dark green; the interior is cream paper. Text is a warm off-white on binding and ink on paper. Gold is the only accent – used for links, CTAs, the mark, the ribbon, roman numerals and hairlines. Never introduce a second accent hue.

Binding · surfaces

#0F1D16

Page background, hero, praise, author

--bg

#16271D

Cards on binding

--surface

#1E3428

Inset chips, wells

--well

#2C4A38

Hairlines on binding

--border

Binding · text

#F4F7F1

Primary text on binding

--text

#A6B8AB

Secondary text on binding

--muted

#869A8D

Labels, metadata (legacy)

--dim

Paper · surfaces and ink

#F3EEE2

Interior: contents, stack, shelf, colophon

--paper

#E9E2D2

Insets and layer slabs on paper

--paper-2

#0F1D16

All text on paper

--ink

#4A5B50

Secondary text on paper · 6.2:1

--ink-muted

Accent · gold

#C6A15A

Links, CTAs, ribbon, mark, numerals, hairlines

--gold

#D9B872

Hover only

--gold-hover

#7D6027

Gold on paper, text and hairlines · 5.1:1

--gold-ink

02 — Typography

Three families, strict roles

Instrument Serif for display; Newsreader italic for every quotation; Plus Jakarta Sans for everything functional. Body weight is 400. Nothing functional below 13 px.

Ag

Instrument Serif

Regular · Italic

Display only: wordmark, book and page titles, section headings, pricing figures and numerals.

Ag

Newsreader

Italic 400 · Italic 500

The book’s voice: epigraph, marginalia, praise, pull-quotes and the hero subtitle. Italic only, never below 16 px.

Ag

Plus Jakarta Sans

Regular 400 · Medium 500 · SemiBold 600

Everything functional: body copy, labels, buttons, nav, contents lists and metadata.

Type scale · desktop

42

Hero title

120 / 1.0 · tracking -0.02em

Six parts. Twenty-two chapters.

Section title

56 / 1.05

It goes from zero to deep.

Epigraph

40 / 1.25 italic

The Developer’s Toolkit

Layer title (stack)

32 / 1.1

A hands-on guide that speaks the language of real developers building real systems.

Pull-quote in praise

24 / 1.35 italic

One key, one bill, one dashboard.

Marginalia

15 / 1.45 italic

We publish practical books for people who build things with technology.

Body

Sans 400 · 17 / 1.65

6 Claude Code

Chapter titles in stack

Sans 500 · 15 / 1.4

Inside the book

Eyebrow and attribution

Sans 600 · 11 · caps · 0.22em

Buy on Amazon

Button

Sans 600 · 15

03 — Layout & shape

Grid, rhythm, radius

A 12-column grid, 1,280 px max content width, 32 px gutters on desktop; 20 px side margins on mobile. Text sections occupy columns 3 to 10; the hero and the stack use all 12. Columns 1–2 and 11–12 carry marginalia.

1

2

3

4

5

6

7

8

9

10

11

12

Section padding

128 px top and bottom

72 px on mobile

Radii

6 px cards on binding

4 px buttons · 2 px slabs on paper

Shadows

None on binding

On paper: 1 px --paper-2 edge and 0 2px 0 rgba(15,29,22,0.08)

Measures

540 px hero paragraph

720 px legal pages · 640 px prose

Surface edges

Hard edge, never a gradient

Binding to paper like opening a hardcover

Header

72 px, transparent over the hero

Nav ends at column 11; the ribbon owns column 12

04 — The mark

The stacked signal

Three stacked diamonds – a signal relayed through layers. A nod to the Sub-Etha network of Douglas Adams’ Hitchhiker’s Guide. The book is about a stack; the what’s-inside section draws its six parts the same way.

Gold on dark, 28 px in the header on binding.

Ink on light, 28 px in the header on paper.

Stroke only, gold at ~50% opacity on binding, ink on paper. Never filled.
Two diamonds for inline back-links; three for hero.
Extends to a tall spine column on book covers.
The only icon on the site.

05 — Components

Core elements

Buttons · 56 px in the hero, 48 px elsewhere, 44 px in the header, radius 4 px

Buy on Amazon See what’s inside

Buy on Amazon Buy on Amazon

Eyebrow and inline link

About the author

Reach us at hello@subethapress.com

Inside the book

Reach us at hello@subethapress.com

Stack layer · paper only · shown lifted 4 px, line revealed

II The Developer’s Toolkit

Your AI engineer lives in the terminal now.

Chapter 6 · Claude Code

4Warp 51
5GitHub 63
6Claude Code 79
7AI-Powered IDEs, Harnesses, and Your Dev Environment 93

Slab on --paper-2, 2 px radius, 1 px --paper-2 edge, 0 2px 0 rgba(15,29,22,0.08). Six layers stack with 8 px overlap, Part I at the bottom at 100 percent, each layer above 3 percent narrower, centred. Hover, focus-within or tap lifts the slab 4 px and reveals one line from that part. Keyboard reachable.

Ribbon and sticky buy control · binding only

The ribbon hangs 14 px wide from the top edge at column 12, in front of the book, to 180 px.

Buy on Amazon · $9.99 Kindle

After the hero scrolls away the ribbon becomes the sticky buy control: 48 px tall, top-right on desktop. The only sticky element.

Buy on Amazon · $9.99 Kindle

Bottom-anchored on mobile.

Colophon · paper only

Published by: Sub-Etha Press, an imprint of Icemint LLC
First edition: Lisbon, 2026
Typefaces: Instrument Serif, Newsreader and Plus Jakarta Sans
Library of Congress: 2026912726

The footer is a colophon on paper: the labelled values, the seven links, the imprint lines, the Adams line, copyright. The full instance ends this page.

Motion · three movements and nothing else

01 · Hero book

Tilts up to 6 degrees following the pointer, returning on leave.

02 · Marginalia

Fade from 0 to 1 over 400 ms as they enter the viewport.

03 · Epigraph

Crossfades to the next line every 9 s over 600 ms.

All three are disabled under prefers-reduced-motion. No parallax, no scroll-jacking, no entrance slides. Each degrades to a static, fully readable page with JavaScript off.

06 — Voice

How we sound

“No sponsors. No affiliate links. Just the tools, the workflows, and the uncomfortable truths.”

Blunt, practitioner-first

Written by people who use the tools daily, not journalists covering them.

Dry wit

Literary references (42, Sub-Etha) worn lightly, never explained to death.

Confidently independent

A boutique imprint that takes the craft seriously and owes nobody a favor.

No exclamation marks. No superlatives the book does not make itself. aify and aifying are the author’s coinage and stay as written. Curly quotes throughout; the book’s spaced en dashes are kept inside quotes.

07 — Paper

The binding and the paper

The page alternates between two surfaces. Dark green is the binding: hero, praise, author, epigraph. Cream paper is the interior: what’s inside, the stack, the shelf, the colophon. The transition is a hard edge, never a gradient, like opening a hardcover. At least 40 percent of the homepage height is paper, and the first paper edge arrives within 1.5 viewports.

HeroBinding

EpigraphBinding

Inside the bookPaper

Who it’s forPaper

PraiseBinding

Three ways to readPaper

AuthorBinding

ShelfPaper

ColophonPaper

Text on paper

Primary text is --ink. Secondary text is --ink-muted, 6.2:1. Gold becomes --gold-ink for text, hairlines and ghost buttons, 5.1:1 on paper and 4.6:1 on --paper-2. Solid buttons keep --gold with ink type.

Insets

Insets and slabs sit on --paper-2 with a 2 px radius. Hairlines on paper are ink at 12 percent.

Mark and wordmark

On paper the header uses the dark-on-light mark and the dark wordmark.

08 — Marginalia

The book speaks

The book’s own sentences appear in the margins the way a reader annotates a printed page. Every line is verbatim from the quote bank and attributed to its chapter. No quote appears twice on a page.

Anatomy

A 24 px gold hairline, the line in Newsreader italic at 15 px (16 px on mobile), and the attribution in 11 px caps. 187 px wide, the width of two columns.

Placement

Columns 1–2 and 11–12 on desktop, four to six per screen height, staggered, never symmetrical. Twelve on the homepage, two on the press page. On mobile they become full-width interstitial lines between sections, one per section.

Motion

Fade from 0 to 1 over 400 ms as they enter the viewport. Static under prefers-reduced-motion and with JavaScript off. Legal pages and the 404 carry none.