Brand
Brand assets
Official marks, type, and colour tokens for Pythaeon. Use these assets for press, integrations, and partner materials. When in doubt, preserve clear space and do not alter the logo geometry.
Logo
Primary mark: vector wordmark with logomark. Use the SVG for screens; it scales cleanly at any size.
On dark surface
On light surface
Match foreground to body text on light UI; keep contrast at least WCAG AA.
- Clear space: keep padding around the logo at least equal to the cap height of the “P” in the wordmark (or the width of the icon mark) on all sides.
- Minimum size: avoid using the full wordmark below ~120px width on web; use the icon mark or simplify layout at small breakpoints.
- Don’t: stretch, rotate, add effects, outline, or place on busy imagery without a solid panel behind the mark.
Typography
Display and sans fonts are self-hosted (bundled woff/woff2). Use display for headlines, sans for UI and body, monospace for code and technical labels.
Display
Fraunces (variable)
Content management, reimagined.
Headlines, marketing display, pull quotes. Optical size 9–144, weights 100–900, italic supported.
Sans
Plus Jakarta Sans
The modular CMS for teams who outgrow the plugin stack.
Body copy, UI labels, and supporting text. Weights 400–700.
Monospace
Cascadia Code, Consolas, ui-monospace
pythaeon modules sync --all
Code blocks, slugs, meta lines, and keyboard-style hints.
CSS: --font-display, --font-sans, --font-mono
Colour system
Semantic tokens in OKLCH. The site defaults to a dark surface; light mode overrides live on html:not(.dark). Components should read CSS variables, not hard-code hex.
| Token | Dark | Light | Copy |
|---|---|---|---|
Accent --color-accent | oklch(0.83 0.108 175) | oklch(0.6 0.14 190) | |
Accent muted --color-accent-muted | oklch(0.7 0.08 175) | oklch(0.7 0.08 190) | |
Surface --color-surface | oklch(0.15 0.01 255) | oklch(0.975 0.006 250) | |
Surface elevated --color-surface-elevated | oklch(0.2 0.012 255) | oklch(0.99 0.004 250) | |
Panel alt --color-panel-alt | oklch(0.18 0.013 240) | oklch(0.97 0.01 190) | |
Text --color-text | oklch(0.94 0.01 255) | oklch(0.24 0.016 255) | |
Text muted --color-text-muted | oklch(0.72 0.014 255) | oklch(0.45 0.013 255) | |
Border --color-border | oklch(0.33 0.012 255) | oklch(0.86 0.009 255) | |
Code background --color-code-bg | oklch(0.23 0.01 255) | oklch(0.94 0.007 250) |
Corner radius
Shared UI scale (aligned with Tailwind theme).
Small
--radius-sm — 0.375rem
Medium
--radius-md — 0.5rem
Large
--radius-lg — 0.75rem
Icon mark (app header)
Masked glyph used in the shell; pair with the wordmark in formal contexts.
The mark uses the product colour as a mask; hover states may shift to the accent. Source file: same SVG as the full logo.