---
version: alpha
name: Pyweb Editorial
description: High-contrast editorial light theme with warm gradient accents, adapted from modern developer-education sites.
colors:
  primary: "#ffffff"
  secondary: "#fafaf9"
  tertiary: "#f0b429"
  neutral: "#171717"
  muted: "#78716c"
typography:
  h1:
    fontFamily: DM Sans, system-ui, sans-serif
    fontSize: 2.75rem
    fontWeight: 800
    lineHeight: 1.12
    letterSpacing: "-0.03em"
  h2:
    fontFamily: DM Sans, system-ui, sans-serif
    fontSize: 1.6rem
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: DM Sans, system-ui, sans-serif
    fontSize: 1.0625rem
    lineHeight: 1.65
  mono:
    fontFamily: JetBrains Mono, ui-monospace, monospace
    fontSize: 0.85rem
    lineHeight: 1.6
rounded:
  sm: 6px
  md: 10px
  lg: 999px
spacing:
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
components:
  card-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
  badge-accent:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.lg}"
    padding: "{spacing.sm}"
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#1c1917"
    rounded: "{rounded.sm}"
    padding: "{spacing.md}"
---

## Overview
Pyweb's visual language is a high-contrast editorial style: dark ink typography on stark white backgrounds, with a warm amber/orange/pink gradient reserved for accents. Built for reading density and clarity, for humans and agent vision models alike.

## Colors
- **Primary (#ffffff):** Page background. Stark, print-like.
- **Secondary (#fafaf9):** Elevated surfaces — hovers, panels, section heros.
- **Tertiary (#f0b429):** Amber accent for primary buttons and blockquote rules.
- **Gradient (`#ffb800 → #ff5f2e → #ff2e88`):** Hero headline accents and the logo mark only. Never for body copy.
- **Neutral (#171717):** Ink. Headings and primary text.
- **Muted (#78716c):** Metadata, timestamps, table-of-contents, citation details.
- **Border (#e7e5e4):** 1px hairline dividers everywhere depth is needed.
- **Code Syntax (romainl/flattened):** Solarized dual-palette code snippets (`#002b36` dark / `#fdf6e3` light) via Shiki `solarized-dark` and `solarized-light`.

## Typography
Sans-first hierarchy (DM Sans) with tight negative letter-spacing on headings. JetBrains Mono is reserved for eyebrows, data tokens, paths, dates, and code. Monospace signals "machine-readable"; sans signals "prose".

## Layout
Three surfaces:
- **Landing:** full-width hero with gradient wash, stat strip, card grids bounded to 78rem.
- **Wiki article:** three-column docs layout — 16rem left nav, centered 44rem prose column, 15rem right table-of-contents rail. Sticky header and rails.
- **Writing:** single 44rem reading column with a sticky right TOC.

## Elevation & Depth
Flat. 1px hairline borders instead of drop shadows. Hover states shift background to `{colors.secondary}`, never lift.

## Shapes
Cards and panels use 10px radii; buttons 6-8px; badges fully rounded (999px).

## Components
- `card`: bordered grid cell, title + two-line clamped description, arrow affordance on hover.
- `badge`: confidence indicator (high/medium/low in green/amber/red pastels).
- `source-header`: provenance block with source URL and SHA256 hash.
- `sources-footer`: bibliography anchoring claims to verified raw sources.
- `copy-page`: button that copies the page's raw markdown to the clipboard for pasting into an agent context.

## Do's and Don'ts
- **DO** keep the gradient confined to hero headlines and the logo dot.
- **DO** use monospace for anything an agent might parse: dates, counts, paths, endpoints.
- **DON'T** introduce drop shadows, dark-mode surfaces, or more than one accent hue per view.
- **DON'T** let prose columns exceed 44rem.