The visual covenant
WikiSubmission ships under three palettes and two modes. This document defines the system that holds them together — the tokens, typography, motifs, and voice that read the same in every theme.
Every visual decision serves the reading. Surfaces stay quiet so the verses can speak.
Type-led layouts, hairline rules, generous whitespace. We borrow from broadsheets, not dashboards.
Three palettes, two modes. The brand is the system, not a single colorway.
This page follows your active palette — switch via the theme control in the header to see the chrome adapt. The swatches below always show all three palettes at their canonical hex values.
Always reference these tokens — never the underlying palette hex. The token layer absorbs theme switching so a single component reads correctly in every palette × mode.
var(--font-cormorant)var(--font-source-serif)var(--font-jetbrains)var(--font-amiri)var(--font-glacial)
Reserve at least 30% of the mark's height as padding on all sides. Never let other content encroach.
Recolor, distort, rotate, or apply effects. Use the provided variants only.
Precise, sourced, footnoted. Never speculative.
Quiet, deliberate. The verses are the focus.
No jargon. A 12-year-old can read every page.
No trends. No dates in the design language.
- Use --ed-* tokens for every color reference.
- Pair Cormorant displays with Source Serif body.
- Keep hairlines at exactly 1px, never thicker.
- Let Arabic breathe — generous line-height (1.7+).
- Use the section-number motif (§ I, § II) for chaptering.
- Test every page in all three palettes, both modes.
- Hardcode hex values in components.
- Round corners beyond 3px — squares are the language.
- Decorate empty space — silence is part of the layout.
- Mix more than two type families on a single screen.
- Use icon-only buttons without aria labels.
- Recolor or distort the logo mark.