PAICON is a cancer-AI diagnostics company — “From Data to Diagnostics” — dedicated to the Remaining 84% of the world underrepresented in cancer AI. The visual language is warm, serious, and scientific: light paper surfaces, deep navy ink, a single decisive orange accent, and monospaced “instrument-panel” labels.
The system is deliberately restrained. One accent color carries all emphasis; type does the heavy lifting through scale and weight rather than decoration; surfaces are warm off-white rather than clinical pure white. The intended feeling is a precise scientific instrument that is still human and approachable — confident and mission-driven, never hypey.
This is the warm-light 2026 redesign. In the codebase, tokens live on :root and component primitives are scoped under the .pi class (and per-page .pi-home, .pi-about, … variants) in assets/css/theme.css, so a page opts into the new look by wrapping its markup in .pi. Dark, full-bleed moments use the .pi-dark variant over navy.
The palette is built from warm paper surfaces and deep navy ink, with orange as the only decisive accent. Token names below are role-based for portability; the parenthetical is the CSS custom property they correspond to in theme.css.
background (--bg) is the primary page tone, a warm off-white. surface-2 (--bg-2) and surface-3 (--bg-3) are progressively deeper paper tones used to alternate and segment sections. surface (pure white #ffffff) is reserved for raised cards, menus, and inputs that need to lift off the paper.surface-dark (--navy) doubles as primary ink and as the fill for dark blocks; surface-dark-2 (--navy-2) is its hover/secondary step; surface-dark-deep (--navy-deep) backs full-bleed dramatic sections (e.g. the manifesto), typically with a soft radial orange glow at the base.on-surface (--ink, headings/body) → on-surface-variant (--ink-2, lede/secondary) → on-surface-muted (--ink-3, captions, mono eyebrows). On dark: on-dark → on-dark-variant → on-dark-muted.primary (--accent, #e67a00) is the PAICON orange — buttons, highlighted words, eyebrows, focus rings. Its readable foreground is on-primary (#2a1300), a dark navy-brown rather than white, which keeps primary buttons warm. secondary (--teal) and tertiary (--gold) are supporting accents used sparingly.outline / outline-variant are navy at 10% / 5% alpha; outline-on-dark is white at 12%.Rules. One accent only — never introduce a second competing hue; teal and gold are support, not co-leads. Orange button text is the dark on-primary, never white. Shadows are navy-tinted, never pure black on light surfaces.
Contrast note. on-surface/on-surface-variant on the paper backgrounds and on-dark family on navy are comfortably legible. Verify secondary (#16a094) and tertiary (#d8a23a) before using them for small body text on light — they are tuned for accents and UI hints, not long-form reading.
Three families, loaded from Google Fonts (Inter:wght@400;500;600;700;800, Instrument Serif:ital@0;1, JetBrains Mono:wght@400;500):
.pi-home .hero__title-name, .manifesto__title, etc. (A .pi h1/h2/h3 { font-family: serif } rule exists in theme.css but the production prototype titles are non-heading elements, so they inherit Inter — treat Inter as the heading family.) Display sizes use tight tracking (-0.035em to -0.03em) and near-1.0 line-height. Body runs font-feature-settings: "ss01", "cv11".0.22em tracking, uppercase, colored primary. Used for all eyebrows, kickers, stat figures, status pills, and data captions.display-serif, ~120px, accent-colored).The display sizes in the tokens are the upper bound of fluid clamp() scales. In practice they are responsive: the hero name is clamp(56px, 8vw, 116px), the manifesto clamp(48px, 6.4vw, 96px), section titles clamp(36px, 4vw, 56px). Treat the token value as the design ceiling and scale down with viewport.
width: min(1320px, 92vw) (--shell), is used site-wide for nav, sections, and footer (shell-max records the 1320px cap).section (120px) for standard sections, scaling up toward section-lg (160px) for dark/manifesto moments; the live value is fluid clamp(72px, 9vw, 120px).background ↔ surface-2 to break up the page, punctuated by full-bleed surface-dark-deep blocks for emphasis.auto 1fr auto grid (brand · primary nav · CTA) with nav-gap (40px) between regions.unit underlies the rhythm, though component padding is set explicitly (buttons 14px 22px, cards 28px).Depth is soft and navy-tinted — never pure black on light surfaces.
outline border with no shadow; on hover they lift translateY(-2px) and gain 0 24px 64px rgba(10,18,64,0.18).background: rgba(251,250,246,0.85) with backdrop-filter: blur(14px) saturate(150%), shrinking its padding and revealing a hairline outline bottom border.opacity 0.045, mix-blend-mode: multiply, via body[data-grain="on"]) adds warmth; an animated DotMesh canvas sits behind dark hero/manifesto sections. Keep both subtle.xs 2px (tiny markers) · sm 8px (inputs, nav CTA, small chips) · DEFAULT 10px (buttons) · md 14px (cards, menus) · full 999px (pills, badges, social buttons).primary outline with 2px offset.button-primary is solid primary orange with on-primary text — one per section, ideally. button-ghost is an outlined secondary action (faint navy wash, outline border); button-ghost-light is its variant for dark sections. Hover lifts translateY(-1px) with a slight brightness(1.05), and a trailing aria-hidden arrow nudges translateX(2px). (Borders are part of the button definitions but aren’t expressible as design.md component properties — see the ghost variants’ borders in theme.css.)surface, 1px outline, md radius, 28px padding; lifts on hover.label-mono typography in primary, usually preceded by a small dot. The system’s most recognizable signal.surface-dark) pill-ish button with white text, darkening to surface-dark-2 on hover.sm radius, 1px outline, focusing to a primary border (newsletter/footer fields).full), used for status and tags.The defining brand treatment: key words in a headline are wrapped in <em>, italics removed, recolored to primary (the manifesto pushes weight to 800). A secondary in-paragraph emphasis is the .hl marker — a translucent orange swipe under text via linear-gradient(transparent 70%, rgba(230,122,0,0.35) 70%). Use the orange <em> recolor for headlines; use .hl for inline emphasis.
on-primary (dark navy-brown) for text on orange — never white.eyebrow treatment (11px, 0.22em, uppercase).background/surface-2 to segment the page.