WikiSubmission · Brand Guidelines

The visual covenant

WikiSubmission ships under three palettes and two modes. This document defines the system that keeps those themes coherent across reading surfaces, navigation, forms, motion, accessibility, and voice.

Download MarkdownLLM-friendly export of this page’s design guidance.

§ INorth star

Why this exists
Scripture first

Every visual decision serves the reading. Surfaces stay quiet so the verses can speak.

Editorial, not corporate

Type-led layouts, hairline rules, and generous whitespace beat dashboard chrome and startup gloss.

Theme-honest

Three palettes, two modes. The brand is the system across states, not a single preferred screenshot.

§ IIPalettes

Three documented

This page follows your active palette. Switch themes in the header to see the chrome adapt. The swatches below stay canonical and should not be rewritten by the active theme.

ink
Ink on Parchment
Editorial. Default. The canonical look.
Light
bg
#F6F2EA
fg
#1A1715
accent
#6B3410
rule
#D9CFB9
Dark
bg
#14110E
fg
#EEE4D0
accent
#D4A373
rule
#2A241E
violet
Sharpened Violet
Contemporary. High contrast. Modernist.
Light
bg
#FAFAFA
fg
#121214
accent
#5A1FD4
rule
#E5E5EA
Dark
bg
#0C0C0E
fg
#F4F4F5
accent
#B48CFF
rule
#27272C
mono
Monochrome
Minimal. True black on warm white.
Light
bg
#F4F4F2
fg
#0E0E0D
accent
#0E0E0D
rule
#D8D8D4
Dark
bg
#0A0A09
fg
#F1F1EC
accent
#F1F1EC
rule
#23231F

§ IIITokens

The semantic API

Always reference semantic tokens before reaching for raw palette values. The token layer is what keeps a single component legible in every palette × mode combination.

--ed-bg
Page background
--ed-fg
Primary text
--ed-fg-muted
Secondary text, captions
--ed-accent
Highlights, links, key motifs
--ed-accent-soft
Tinted accent surface
--ed-rule
Hairline borders, dividers
--ed-bg-alt
Muted surface (cards, callouts)
--ed-surface
Card surface (elevated)

§ IVTypography

Five families
Cormorant Garamond
Display, headings, italic accents
var(--font-cormorant)
In the name of God, Most Gracious, Most Merciful.
Source Serif 4
Body copy, paragraphs, reading
var(--font-source-serif)
Praise be to God, Lord of the universe, Most Gracious, Most Merciful.
JetBrains Mono
References, tokens, data labels, utility metadata
var(--font-jetbrains)
1:1 · 114 chapters · --ed-accent
Amiri
Arabic Quranic text
var(--font-amiri)
بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ
Glacial Indifference
UI eyebrow, uppercase metadata, sectional chrome
var(--font-glacial)
CHAPTER · VERSE · TRANSLATION
Mark variants
WikiSubmission logo — Transparent
Transparent
Default. Any background. Preferred in ordinary product usage.
WikiSubmission logo — Black
Black
Light backgrounds only. Use when transparency harms legibility.
WikiSubmission logo — White
White
Dark backgrounds only. Avoid adding outer glow or stroke rescue effects.
Clear space

Reserve at least 30% of the mark's height as padding on all sides. Never let other content encroach.

Don't

Recolor, distort, rotate, or apply effects. Use the provided variants only.

§ VIResponsive

Current layout contract

These rules describe current implementation patterns in the repo. I did not find a separate, versioned breakpoint token file, so this section records the actual responsive behavior in use.

Breakpoint model
Current implementation uses Tailwind tier prefixes (`sm`, `md`, `lg`). I could not find a separate custom breakpoint scale in the repo, so this documents current usage rather than a dedicated token file.
Containers
Primary site sections use a 1240px max width with horizontal padding patterns such as `px-5 sm:px-10` or `px-4 sm:px-6 md:px-10`.
Grid collapse
Marketing sections typically collapse from 2–3 columns to one column at `md` or below. Side rails become top borders on mobile rather than staying side-by-side.
Type scaling
Hero and section headings use `clamp(...)` instead of fixed desktop sizes so large editorial type remains legible on narrow screens.
Touch targets
Interactive mobile controls commonly land around 34–44px high, with search and location inputs often using `h-11`.

§ VIIInteraction

State behavior
Hover

Favor subtle movement: borders darken, cards lift a few pixels, links deepen in tone, and CTAs widen their internal gap before changing fills.

Focus Visible

Keyboard focus must remain explicit. Shared UI primitives use visible rings, and editorial one-offs should provide an equivalent outline or ring against `--ed-bg`.

Active / Current

Current location is usually signaled by an accent rail, text-weight change, or a restrained tinted background instead of a loud solid fill.

Disabled / Busy

Disabled elements lower opacity and suppress pointer events. Busy states should keep layout stable and communicate progress with motion or live text, not only color.

§ VIIIComponents

Editorial and forms
.ed-link
.ed-cta
.ed-btn-primary
.ed-btn-ghost
Base primitives
Application forms use shared `ui` primitives (`Input`, `Textarea`, `Checkbox`, `Button`, `Field*`) with validation and focus-visible states already built in.
Field structure
Use explicit labels, optional descriptions, and inline error text. `FieldError` is the pattern for validation feedback and should remain adjacent to the control it describes.
Search surfaces
Search and picker inputs often appear on softened surfaces with understated borders, roomy internal padding, and accent-colored focus borders.
Error handling
Invalid state should change both border treatment and announced error text. Never encode errors by red color alone.
Editorial vs app UI
Public-site editorial buttons use `.ed-*` classes. Dashboard-like or Radix-based interactions may use shared app primitives, but palette tokens still govern the colors.
Wayfinding and chrome
Header behavior
Desktop navigation lives at `lg` and above. Below that, the site collapses to an animated mobile menu with grouped rails and nested links.
Brand anchor
The site brand is always a functional home link. The mark and wordmark animate lightly unless reduced motion is requested.
Wayfinding
Current-page states rely on typography, accent rails, and restrained fills instead of heavy badges. Secondary navigation should preserve this quiet hierarchy.
Footer role
The footer is not ornamental. It repeats core IA, support pathways, and community links in the same editorial palette language as the rest of the site.

§ XContent patterns

Editorial structures
Hero blocks
Landing heroes are type-led, asymmetric, and often pair one large display statement with a quieter side note or verse rail.
Cards
Cards are usually bordered rectangles on muted or surface backgrounds. They read as editorial clippings, not glossy product tiles.
Data callouts
Stats, verse keys, and metadata use mono or uppercase utility type, while the explanatory copy returns to serif body text.
Tables and schedules
Dense data views use thin dividers, compact metadata, and strong alignment. Reserve strong accent color for live or important values only.
Article content
Long-form reading surfaces should preserve generous line-height, subdued chrome, and strong heading hierarchy. Decorative assets should never compete with the text column.

§ XIGeometry

Numbers, fixed
Max content width
1240px
Section padding
20–40px horizontal · 80–120px vertical
Editorial radii
0–3px on brand-led surfaces; squares remain the default visual language.
Hairlines
1px solid var(--ed-rule)
Vertical rhythm
8 · 12 · 16 · 24 · 32 · 48 · 64 · 96

§ XIIAccessibility

Non-negotiable
Headings
Pages must expose a real heading hierarchy. Section chrome may be styled richly, but the underlying element should still be `h1`–`h6` as appropriate.
Focus and keyboard
Every interactive control must be reachable by keyboard, with a visible focus indicator. Hover-only behavior is insufficient.
Live regions
Rotating verses, prayer timing, and other dynamically updated content should use `aria-live="polite"` when changes matter to assistive technology.
Contrast
Muted text is acceptable for secondary content only. Essential labels, controls, and active states must stay readable in every palette and both modes.
Targets and labels
Controls need adequate touch size and text labels or accessible names. Icon-only controls require `aria-label`.

§ XIIIMotion

GSAP, restrained

Motion exists across the site, but the codebase already points toward a quiet default: fade-up entrances, small stagger values, and checks for reduced-motion on more immersive interactions.

Default feel
Motion is soft and editorial. The shared GSAP helper defaults to `power3.out` easing and about 0.6s duration, favoring fade-up and staggered reveals over flashy transforms.
Enter patterns
Common entrances use 20–24px vertical fade-ups, gentle scale-ins, and small stagger values around 0.1s.
Reduced motion
Important animated surfaces check `prefers-reduced-motion` and should degrade to immediate state changes or simplified fades.
Meaningful motion only
Animate hierarchy, continuity, and state change. Avoid ornamental perpetual motion except for rare ambient accents with very low visual weight.

§ XIVInternationalization

LTR, RTL, Arabic
Document direction
The root layout sets `dir` from locale. RTL locales currently include `ar`, `ac`, `fa`, and `ur`.
Script isolation
Arabic content should explicitly declare `dir="rtl"` and `lang="ar"` where relevant. Mixed-script UI should isolate directional runs rather than relying on luck.
Directional icons
Chevron-like directional icons use `.rtl-flip` so arrows mirror naturally in right-to-left contexts.
Language pairing
Arabic remains the most spacious script on the page. Do not crowd it with tight containers or force it into Latin line-height assumptions.

§ XVVoice

How we sound
Scholarly

Precise, sourced, footnoted. Never speculative.

Reverent

Quiet, deliberate. The verses are the focus.

Plain

No jargon. A 12-year-old can read every page.

Timeless

No trends. No novelty styling or disposable visual slang.

§ XVIImplementation

Source of truth
Token layering
Editorial `--ed-*` aliases sit on top of standard semantic tokens such as `--background`, `--foreground`, `--primary`, and `--border`. Both layers matter because shared UI primitives often consume the base layer directly.
Public-site primitives
The public site uses a mix of inline editorial styling, `.ed-*` helper classes in `globals.css`, and small shared helpers like `SectionDivider`, `Hairline`, and the editorial markdown components.
Application surfaces
Authenticated or tool-heavy experiences lean on Radix/shadcn-style primitives. Those components are valid within the system as long as palette semantics and accessibility rules are preserved.
Source of truth
When written guidance and shipped UI disagree, trust the repo first, then update the brand document so it describes reality or intentionally directs a cleanup.
LLM export
This page ships with a Markdown export so internal tooling and language models can consume a text-first version of the design system.

§ XVIIApplication

Do · Don't
Do
Use --ed-* tokens for public-site editorial surfaces.
Pair Cormorant displays with Source Serif body copy.
Keep dividers and hairlines at exactly 1px.
Let Arabic breathe with generous line-height and generous horizontal room.
Use visible keyboard focus, not hover-only affordances.
Verify public pages in all three palettes and both light and dark modes.
Don't
Hardcode product colors into ordinary page components.
Round editorial surfaces heavily by default.
Decorate empty space without structural purpose.
Rely on color alone to communicate active, invalid, or disabled state.
Ship icon-only actions without accessible labels.
Recolor or distort the logo mark.
41:53We will show them Our proofs in the horizons, and within themselves, until they realize that this is the truth.