Brand tokens, font samples, and design principles
Core brand palette and semantic colors
Navy for authority. Maroon for warmth. Cream for illumination. Gold for sacred detail.
Navy
#1B2A4A
Navy Light
#2F4F73
Navy Lighter
#4A6D97
Maroon
#8B1A2B
Maroon Light
#C13344
Cream
#F5F0E8
Cream Dark
#D8D2C8
Gold
#C4972A
Success
#2D6A4F
Warning
#B07D10
Error
#9B2226
Info
#2A6F97
Font families, sizes, and usage rules
Always uppercase. Used for page titles, section headings, app names. Never for body text.
Academy
Display — 2.5rem / tracking: 0.15em
Section Title
H1 — 2.5rem / tracking-trajan
Subsection
H2 — 1.75rem
Group Heading
H3 — 1.25rem
Minor Heading
H4 — 1.125rem / sans-serif / semibold
The Mission of Our Academy
Body Large — 1.125rem / Garamond semibold
Garamond lends an elegant, classical readability to body text. It pairs beautifully with Trajan Pro's Roman authority.
Body — 1rem / Garamond
Secondary text for descriptions, metadata, and supporting content.
Body Small — 0.875rem
CAPTION / LABEL TEXT
Caption — 0.75rem / sans-serif / medium
OVERLINE LABEL
Overline — 0.6875rem / sans-serif / uppercase
Default for interactive elements, labels, navigation, and data.
Dashboard Overview
Regular UI text for labels, descriptions, and interface content.
Compact UI text for timestamps, metadata, and secondary labels.
Caption text — 12px, used for the smallest UI elements.
Used for IDs, code snippets, and technical data.
JPG-2401 · John Paul Baker · 9th Grade · ID: 4f3a2b1c
The crest and school name — the visual anchor for every JPG Academy application
John Paul the Great Academy
A Catholic, Classical School for Acadiana
variant="full" + showMotto
JPG Academy
variant="short" horizontal — sidebar, header
JPG Academy
variant="short" vertical — login, about
variant="mark" — favicon, avatar
Usage Guidelines
✓ Do
✗ Don't
Rules that govern all visual decisions
The dominant institutional color. Use for primary actions, headers, navigation, and authoritative content. Never substitute maroon for navy in primary contexts.
Do
Primary buttons, app headers, sidebar navigation, page headings
Don't
Background fills, decorative borders, secondary actions
Ecclesial warmth and passion. Use for secondary emphasis, warm accents, and humanizing touches. It supports navy but never replaces it.
Do
Secondary buttons, emphasis text, alert accents, warm highlights
Don't
Primary actions, navigation bars, large background areas
Sacred and celebratory. Gold is reserved for dividers, focus rings, notification badges, and special celebrations. Never use for large backgrounds or primary UI elements.
Do
Focus rings, dividers, notification dots, badge accents, celebrations
Don't
Button backgrounds, text color, large fills, borders
A classical Roman inscriptional face. It has a single weight (Bold) and is always rendered in uppercase with generous letter-spacing. Never use for body text or long strings.
Do
Page titles, section headings, app names, brand text
Don't
Body copy, subtitles, labels, form fields, descriptions
Elegant serif for subtitles and body copy. Multiple weights give flexibility from light emphasis to bold statements. Never render in uppercase.
Do
Subtitles, body paragraphs, descriptions, supporting content
Don't
Page titles, navigation labels, buttons, form labels
Clean and functional. Used for interactive elements, labels, navigation items, and data. The default for all things the user interacts with.
Do
Buttons, form labels, nav items, table headers, badges, timestamps
Don't
Page titles, body copy, decorative text