Phase 2 — Design System · Step 6
Implementing PRD Section 50
This is a working build of the design language specified in Section 50 of the Master PRD — real CSS custom properties, real components, at the exact values the PRD gives. Where the PRD names a token but doesn't number it, that's called out below rather than guessed silently.
Proof audit note. The Proof Strip component below now demonstrates a range format for the flagged "2,400 downloads" figure — shown as a range tied to retargeting reach, sourced from the 24-month dataset, instead of a single copy-pasted number. This is a formatting decision only. The actual verified range still depends on real campaign data, which stays out of scope here — the PRD and proof-audit.json are untouched.
50.2 – 50.10
Foundations
Colour
Dark editorial base for atmospheric sections, warm light surface for extended reading. Accent used sparingly — never for decoration.
Dark surfaces
Light surfaces
Accent
Text & system
Typography
DM Serif Display for headlines and plan names; Inter for everything functional. Resize the window — every size below is fluid between the PRD's mobile and desktop values.
"We commit to doing the work. You give it the time and access it needs to work."
Pull-quote treatment — display serif, italic, reduced weight.
Spacing
Bars scaled to the desktop value of each section-spacing token.
160px desktop120px desktop80px desktop40px desktop24–32px desktopGrid
12 columns / 80px margin at desktop (1280px+), 8 columns / 40px at tablet (768px+), 4 columns / 16–20px at mobile. Resize the browser to see it shift live.
Columns re-flow at the 768px and 1280px breakpoints defined in 50.4.
Motion
Hover each row — every swatch uses the same transform at a different duration token, so the difference in feel is easy to compare directly.
120ms · button hover240ms · accordion, nav450ms · scroll fade-inThis page's own scroll-reveal and proof-metric count-up (below) use these same tokens, and both are skipped instantly if your OS has reduced motion turned on — try it with that setting on to confirm the fallback works.
50.5
Components
Shrink the frame below 768px to see the burger menu. Fixed to top, transparent over the hero, gains the dark/blur background after scroll on the real site.
Hover and tab-focus the buttons above to see the real transition and focus-ring states. Sentence case only, one primary CTA per component.
For independent authors
Build a readership that lasts.
We help independent authors find readers, turn attention into sales, and build an audience that can follow them from one book to the next.
Covers shown as placeholders — the checklist flags this as needing real client covers before sign-off. No video, no abstract shapes, left-aligned text at every width.
Third metric is the resolved format for the flagged single-number issue: a range instead of one figure, with the driver of the variance (retargeting reach) named inline rather than hidden in a footnote. Values here are illustrative — Step 3's real verified range is still pending.
Short-form content puts the book in front of genre-relevant audiences.
ARC campaigns create social proof and reduce uncertainty.
Listing copy, keywords, and storefront presentation turn interest into sales.
ShelfMates and StoryPals build a direct reader relationship.
The objective is an increasingly valuable readership, not one sale.
No icons — stage numbers carry the identity, exactly as 50.5 specifies. Hover a stage to see the lift + accent-colour name change.
Short-form video
Genre-targeted video content built to put your book in front of readers actively looking for it.
ARC review campaigns
Structured advance-reader recruitment that builds real reviews before or at launch.
Hover lifts the card 2–3px with a shadow only — no colour change, no scale, per spec.
Live toggle, built from the current plan prices. Spark and Foundation support all four commitments; Momentum and Growth don't offer a 3-month tier — the card states that plainly instead of hiding the option.
I need more readers.
›For authors who have a book but need discovery.
Sales are inconsistent.
›For authors who need a stronger system around existing attention.
I have a launch coming.
›For authors who need coordinated pre-launch and launch support.
Horizontal scroll on mobile (try narrowing the frame), 3-column grid from 900px. Text carries the meaning — no icons.
A. Reyes — The Salt Line
Literary fiction
150K–2,400
impressions → clicks, 90-day window
40 videos produced across a 90-day window, paired with an ARC push ahead of a backlist relaunch.
"It felt like the first time the marketing actually matched the book."
Marked as a sample layout, not a real client — case studies were intentionally deferred at Step 5 (schema only, no entries yet). Output → activity → indicator → business result hierarchy, per Section 15.
Ready to build a readership that lasts?
Vocabulary pulled straight from Section 28 — no invented button phrases.
Longer commitments are prepaid savings — we have more time to compound the work, and predictable planning lets us offer better economics.
No — we don't guarantee a specific rank, sales number, or viral event. We commit to doing the agreed work, measuring what happens, and staying accountable for the outcome.
Money-back applies where delivery was demonstrably zero. Outside that, underperformance is treated as time-based — we diagnose, adjust, and keep working toward the target.
Click a question — height transition only, no fade, accent colour on the open state.
We don't promise that every book will explode overnight. Publishing doesn't work that way — and neither does building a readership.
What we do promise is that we'll do the work we've committed to, measure what happens, and stay accountable for the outcome. If we fall short of our commitments, we'll make it right — at our cost.
"We commit to doing the work. You give it the time and access it needs to work."
No badge, no shield icon, no animation — this section is meant to feel still and deliberate, per 50.5.
Build the foundation
- Establish positioning
- Prepare content
- Begin discovery
Build momentum
- Identify what resonates
- Strengthen social proof
- Expand reader acquisition
Measure what works
- Compare against baseline
- Improve weak points
- Set next growth priorities
Background can flex dark or light depending on surrounding rhythm — shown light here since it follows the FAQ (light) in the homepage order.
50.11 — Phase 2 Exit Criterion
Where this leaves the checklist
Self-assessed honestly: green means built and testable on this page right now; grey means it still needs a real asset, a formal audit, or a human sign-off this page can't provide.
Foundations
Components
Visual review
Handoff
:root, ready to lift into the actual site build