• The wordmark (assets/Logos/neopress-wordmark-ink.svg) is "neopress" in Newsreader with an oxide full stop. Use neopress-wordmark-paper.svg on ink or on Night-edition grounds.
• The mark (neopress-mark-ink.svg, neopress-mark-oxide.svg) is the "n." monogram in a square — favicons, app icons, avatars, the desk sidebar.
• Clear space: the height of the "n" on every side. Minimum size: wordmark 88px wide, mark 16px.
• Never recolour the full stop away from oxide (on ink grounds it is the lighter dark-theme oxide; on the oxide mark it is ink). Never stretch, outline, add effects or set the wordmark in another face.
• Where an <img> can't follow the theme, set the name in type instead: Newsreader 430, -0.02em, followed by an oxide dot (np-dot), as the Masthead does.

Paper and ink do 90% of the work. Oxide is the brand. Press blue belongs to the product. Moss and ochre are mostly for art.

• Ground every page on paper; lift cards, menus and the editor canvas to paper-raised; sink code, inputs and the footer into paper-sunk.
• Text is ink; captions, bylines and datelines are ink-muted. Both pass AA on all three papers in both themes.
• oxide (Rust's colour) marks the brand: primary buttons, kickers, in-copy link underlines, the logo's full stop. Text on oxide is on-oxide. At most one oxide block per viewport.
• press (the open-web blue) is the product's working colour: selection, the active block in the editor, scheduled states, focus. Text on it is on-press.
• moss = published / success; ochre = draft and highlighter. Ochre is not a text colour on light paper (1.9:1) — use it as a fill with on-ochre.
• Lines: rule for hairlines between rows and columns (decorative only), rule-strong for the masthead, section rules, control borders and screenshot frames.
• Themes: Daylight (light) is primary; Night edition (dark) is warm charcoal, never pure black, with the accents lifted (oxide → #e8744a) and dark text on accent fills.

Three families, all open-licensed (SIL OFL) and shipped as files in fonts/:

• Newsreader (serif, variable opsz 6–72, wght 200–800, roman + italic) for everything editorial: display-xl, display-l, headline, title, dek, reading. Light weights (300–400) at large sizes; let the optical size axis do the work.
• Schibsted Grotesk (sans, variable 400–900) for interface: body-l, body, label, caption, kicker.
• IBM Plex Mono for code and meta — versions, datelines, figure numbers and every performance number.

Rules: - One display-xl per page. Headlines in Newsreader at negative tracking; never bold a Newsreader headline above 500. - The dek (italic Newsreader) always follows a headline in long-form and features; it's the brand's most recognisable texture after the art. - kicker sits 8px (space-2) above every headline, in oxide, uppercase, 0.14em tracking. - Reading copy is reading at 19/1.62 with measure (64ch) max width. UI copy is body 15/24. - Numbers that prove something are set in meta or code: 0.8 ms, v1.0.0, 2,914 posts.

• 12-column grid inside width-wide (1160px), space-6 (24px) gutters; long reads in width-text (720px); plates may bleed to width-full.
• Space generously: space-24 between page chapters, space-16 section padding, space-32 above the hero.
• Group with rules, not boxes: a rule-strong top rule over each column or card (newspaper style), rule hairlines between rows. Cards have no background, border or shadow.
• Corners are square (radius-none) for plates, screenshots and layout; radius-sm for inputs, code and badges; radius-md for buttons and menus only; radius-pill for dots and filter chips.
• One shadow exists — shadow-plate — and it is only for lifting an art plate or a screenshot off the paper.

The brand's imagery is a numbered series of generative prints, Plates I–VI (assets/Art/), made only from the palette, with risograph-style overprinting (multiply blends, slight misregistration) and paper grain.

• Use plates for heroes, section openers, blog covers, social cards and empty states. Caption them like prints: "Plate IV — Compiler, 2026" (the Plate component).
• Plate V — Night Edition is the hero for anything about dark mode or the Night-edition theme.
• New plates follow the same recipe: palette colours only, flat geometric or torn-paper shapes, multiply overprint, grain, no text, no faces, no literal objects (no servers, rockets, crabs).
• Never use stock photography, 3D renders, or AI-looking glossy gradients.

Screenshots (assets/Screens/) are captured at 1600 × 1000 from real Neopress UI with real-looking content (never lorem ipsum), and shown with the FeatureShot component: a hairline browser frame, shadow-plate, a figure number ("Fig. 2") and an editorial caption.

• screen-editor.webp — the block editor (Fig. 1 on the homepage).
• screen-dashboard.webp — the desk with performance stats.
• screen-crates.webp — crates (plugins) in the Night edition.
• screen-terminal.webp — the CLI: install, new site, WordPress import, serve.
• No device mock-ups, no tilted 3D perspective, no fake cursors or confetti. Crop by showing less UI, not by zooming in.

• A fine paper grain (assets/Textures/paper-grain.svg) sits on plates and story images via the np-grain class (multiply in Daylight, a faint screen in Night edition).
• Grain is for imagery only. Text grounds stay clean paper for legibility.
• The double rule under the masthead and the heavy top rule on pull quotes are the brand's "printed" textures — use them as given, don't invent new ornaments.

Iconography

• Neopress has no icon set yet. In the product use simple 1.5px-stroke line icons (Lucide is the closest match) in ink, 16–20px, always beside a label. Flagged: an own icon set is still to be drawn.
• Marketing pages avoid icons entirely — use a kicker, a figure number, or a plate.
• Arrows in text links are the typographic →, not an icon.

Motion

Quiet and quick: 120–200 ms ease-out for hover and state changes; images scale by at most 2% on hover. No parallax, no scroll-jacking, no bouncing. Respect prefers-reduced-motion by removing all transforms.

States and accessibility

• Focus: a 2px solid focus ring (press blue) with a 2px offset on every interactive element; ≥6:1 on every paper in both themes.
• Hover: inversion to ink/paper for buttons; an oxide underline for links and nav.
• Disabled: 45% opacity and not-allowed cursor; never the only way to explain why.
• Status always carries a word (Badge) — never colour alone. Ochre is never text on light paper.

Masthead, Button, Badge, Plate, FeatureShot, StoryCard, PullQuote, Command. A homepage is typically: Masthead → display-xl hero with a Plate → three FeatureShots alternating sides with plates between → a PullQuote → Command (cargo install neopress) → a StoryCard row from the blog.

Each component below is rendered live from the system's bundle, and follows the theme switch at the top.