Design system
Shared design for independent pages.
Use
Load the shared foundation before a site-specific stylesheet:
<script src="https://jehlp.net/site-theme/v2/theme.js?v=20260930-header-home"></script>
<link rel="stylesheet" href="https://jehlp.net/site-theme/v2/base.css?v=20261009-reading-folio">
<link rel="stylesheet" href="assets/styles.css">Typography
- Headings
- Use bold Palatino for interface titles.
- Reading
- Use Wrenfold Text for explanations and long text.
- Interface
- Use Georgia for controls, filters, and metadata.
- Data
- 0123456789 · ids · values · state
Readable at every density
Use 18–20px for long text and 16px for dense reference text. Use 14px for regular controls and 12px for secondary metadata. Before you decrease label sizes, let the toolbar wrap. Assess plot annotations and puzzle candidates separately.
| Role | Token | Default |
|---|---|---|
| Reading | --text-body | 1rem |
| Interface | --text-ui | .875rem |
| Metadata | --text-meta | .75rem |
| Control height | --control-size | 2.25rem · 2.75rem on touch |
How to apply the scale
The shared stylesheet supplies defaults. A site stylesheet can override them. Change the declaration that controls the layout. Keep chart and board geometry in the site stylesheet. See the design system for ownership and exceptions.
Transitions
A subject change can use one ruled ornament. Remove adjacent section boundary rules. This prevents duplicate lines.
<section class="section-block">…</section>
<div class="site-divider" data-ornament="helix" aria-hidden="true"><span></span></div>Principles
- Put the material before promotional content.
- Use type, line length, rules, and disclosures to show the information hierarchy.
- Before you add boxes, use margins for context and whitespace for separation.
- Reserve color for meaningful state and comparison.
- Keep controls and content clear for keyboard use, phones, and print.