Enlightium Prep — Style Guide

Section 01

Logo Usage

Two approved logo configurations exist for Enlightium Academy. Use the horizontal lockup as the default. Reserve the circular badge for profile images, icons, and constrained square contexts.

Horizontal Lockup — primary use · Minimum width: 160px / 2 in · Light backgrounds only

Circular Badge — secondary use
Minimum size: 48px / 0.6 in

Circular Badge — on dark backgrounds
(blue & white version)

Clear space: Maintain a margin of at least the height of the "A" in the shield on all sides of the logo.

Approved backgrounds: White (#FFFFFF), off-white (#F4F4F4), and primary dark blue (#354F5F). Do not place the logo on secondary palette colors.

Never: Stretch, recolor, add drop shadows, place on busy photography, or modify the shield mark in any way.

Never: Reproduce the logo in secondary palette colors. The shield mark is always light blue (#7BB8DF) or white on dark backgrounds.

Section 02

Color Palette

The palette is organized into three tiers. The primary palette carries the brand — use it for the overwhelming majority of any document. The secondary palette and its tints are accents only and must never substitute for the primary.

Primary Palette — Default for all materials

#7BB8DF

RGB 123 / 184 / 223
CMYK 49 / 14 / 3 / 0
Brand Blue

#354F5F

RGB 53 / 79 / 95
CMYK 82 / 61 / 46 / 28
Dark Blue-Gray

#454545

RGB 69 / 69 / 69
CMYK 67 / 60 / 58 / 43
Body Text

#C0C0C0

RGB 192 / 192 / 192
CMYK 25 / 20 / 20 / 0
Mid Gray

#DCDCDC

RGB 220 / 220 / 220
CMYK 12 / 9 / 10 / 0
Light Gray

#F4F4F4

RGB 244 / 244 / 244
CMYK 3 / 2 / 2 / 0
Near-White

Secondary Palette — Accent use only

This palette conveys youth, energy, and play. Use sparingly — as accents, highlights, or category markers. Never use it in place of the primary palette.

#FBAB18

RGB 251 / 171 / 24
CMYK 0 / 37 / 100 / 0
Gold

#F68B26

RGB 246 / 139 / 38
CMYK 0 / 55 / 96 / 0
Orange

#DE3D6D

RGB 222 / 61 / 109
CMYK 8 / 91 / 38 / 0
Hot Pink

#C33F3F

RGB 195 / 63 / 63
CMYK 17 / 89 / 78 / 6
Red

#7CA53F

RGB 124 / 165 / 63
CMYK 58 / 17 / 100 / 2
Olive Green

#1D68B2

RGB 29 / 104 / 178
CMYK 89 / 60 / 0 / 0
Cobalt Blue

#2190A4

RGB 33 / 144 / 164
CMYK 80 / 28 / 31 / 1
Teal

#532B7D

RGB 83 / 43 / 125
CMYK 84 / 100 / 16 / 4
Purple

Secondary Tint Palette — 50% tints, accent use only

For additional variation or depth. Same restriction applies: never use in place of the primary palette.

#FDD58C

RGB 253 / 213 / 140
CMYK 1 / 16 / 52 / 0
Light Gold

#FBC593

RGB 251 / 197 / 147
CMYK 0 / 25 / 44 / 0
Peach

#EF9EB6

RGB 239 / 158 / 182
CMYK 2 / 46 / 9 / 0
Light Pink

#E19F9F

RGB 225 / 159 / 159
CMYK 9 / 43 / 27 / 0
Dusty Rose

#BED29F

RGB 190 / 210 / 159
CMYK 27 / 6 / 46 / 0
Light Green

#8EB4D9

RGB 142 / 180 / 217
CMYK 43 / 19 / 3 / 0
Light Blue

#90C8D2

RGB 144 / 200 / 210
CMYK 42 / 6 / 16 / 0
Light Teal

#A995BE

RGB 169 / 149 / 190
CMYK 35 / 42 / 6 / 0
Lavender

Link & Interactive Colors — Digital use

Link colors break from the primary palette to meet web accessibility (WCAG AA) contrast requirements.

#0066CC

Static link

#004080

Hover / active

Section 03

Typography

Enlightium Prep uses a modern serif type system. Headings are set in Playfair Display for digital and web contexts, and Garamond for print. Body text is set in Lora for digital contexts and Georgia for print. This pairing carries the weight of the content — formal without being institutional, readable at all sizes, and appropriate for an educational program grounded in formation rather than mere information delivery. Arial is reserved for UI labels, captions, and secondary metadata elements only.

Print / DOCX: Garamond (headings) · Helvetica (body) · Arial (labels/captions)
Web / HTML: Playfair Display (headings) · Lora (body) · Arial (UI/labels)

Heading 1 Playfair Display 700
Print: Garamond Bold — 20pt
Web: 2rem · color: var(--c-dark)
Spacing: 12pt / 6pt

Heading 1 — Section Title

Heading 2 Playfair Display 700
Print: Garamond Bold — 16pt
Web: 1.4rem · color: var(--c-dark)
Spacing: 10pt / 4pt

Heading 2 — Subsection Title

Heading 3 Playfair Display 700
Print: Garamond Bold — 13pt
Web: 1.1rem · color: var(--c-body)
Spacing: 8pt / 2pt

Heading 3 — Content Label

Body Text Lora 400
Print: Helvetica — 11pt · 1.25 line spacing
Web: 1rem / 1.7 line-height
Color: var(--c-body) · Left-aligned

Body text for documents, facilitator guides, and program materials. Do not justify body text — use left alignment throughout. Lora's design is optimized for comfortable screen reading at paragraph length.

Body Italic Lora 400 Italic
Print: Helvetica Italic — 11pt
Use for: emphasis, titles, formational phrases

Italic body: faith-formed agency, the Enlightium Creative Process, These are not the distinctive; they are expressions of it.

Section Label Arial · 9pt · All caps
Letter-spacing: 0.18em
Color: var(--c-brand) #7BB8DF

Section Label / Category Marker

Caption / Footnote Arial · 9pt
Color: var(--c-mid) #C0C0C0

Caption text, footnotes, source citations, and supplementary notes.

Section 04

Document Formatting Standards

Apply these conventions to all .docx files in the Enlightium Prep repository. Consistency across documents reduces cognitive load for facilitators and families navigating the program.

Page Setup

Paper size: US Letter — 8.5 × 11 inches
Margins: 1 inch on all sides
Orientation: Portrait (landscape permitted for schedules and trackers)

File Naming

Convention: EP_[Descriptor]-[Descriptor].docx
Prefix: All EP files begin with EP_
Separators: Hyphens between words. No spaces in filenames.
Example: EP_Facilitator-Guide-Builder.docx

Header & Footer

Header left: Enlightium Prep — [Document title]
Header right: Academic year (e.g., 2025–26)
Footer center: Page number
Font: Helvetica 9pt, color #C0C0C0 (print) · Arial 9pt (digital)

Color in Documents

Headings: Garamond / Playfair Display · #354F5F
Body text: Helvetica / Lora · #454545
Accent / highlights: #7BB8DF (brand blue) — rules, borders, labels
Secondary colors: Sparingly — category markers, callout boxes only

Spreadsheet Standards

Font: Helvetica throughout (print) · Lora throughout (web)
Header rows: Bold, #354F5F background fill, white text
Alternating rows: #F4F4F4 / white
Formulas: Always use Excel formulas — never hardcode calculated values

Naming Conventions — Hubs

Builder Hub: Project-based learning track. Grades K–12.
Inquiry Hub: Seminar and discussion track. Grades 3–12.
Grade bands: K5 · 34 · 56 · 68 · 78 · 910 · 912 · 1112
In filenames: Hyphen-separated: Builder-Elementary-K5

Section 05

Quick Reference — Do and Don’t

A summary of the most commonly misapplied rules.

✓ Correct Practice

Use #354F5F as the dominant background/text color in headers and covers.

Use #7BB8DF for rules, accents, labels, and the logo shield.

Use secondary colors for category coding, callout boxes, or a single accent element per page.

Prefix all EP documents with EP_.

Maintain 1-inch page margins on all documents.

Use Garamond (headings) + Helvetica (body) in print/DOCX; Playfair Display + Lora in web/HTML.

✗ Avoid

Using secondary/tint colors as primary backgrounds or dominant text colors.

Placing the logo on secondary palette color backgrounds.

Mixing multiple secondary colors on a single page without a clear purpose.

Using Arial for document headings or body text — Arial is reserved for UI labels, captions, and metadata only.

Leaving #7BB8DF (brand blue) out of header or cover designs — it is the visual anchor of the brand.

Section 06

Web Typography & Digital Standards

These standards govern all HTML documents, web-facing materials, and digital assets produced under the Enlightium Prep program. They extend the print type system into screen contexts with web-native equivalents.

Font Import

Add this to the <head> of every HTML document:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap" rel="stylesheet">

CSS Custom Properties

Declare these variables at :root in every stylesheet. Reference them throughout; never hardcode hex values in component rules.

:root {
  /* Fonts */
  --font-heading: 'Playfair Display', Garamond, Georgia, serif;
  --font-body:    'Lora', Georgia, 'Times New Roman', serif;
  --font-ui:      Arial, Helvetica, sans-serif;

  /* Primary palette */
  --c-dark:       #354F5F;   /* Primary dark — headers, covers, dominant surfaces */
  --c-brand:      #7BB8DF;   /* Brand blue — accents, rules, labels, logo shield   */
  --c-body:       #454545;   /* Body text                                           */
  --c-mid:        #C0C0C0;   /* Mid gray — borders, secondary text                 */
  --c-light:      #DCDCDC;   /* Light gray — dividers, table borders               */
  --c-offwhite:   #F4F4F4;   /* Near-white — page background, alternating rows     */

  /* Link colors (WCAG AA compliant) */
  --c-link:       #0066CC;   /* Static link                                         */
  --c-link-hover: #004080;   /* Hover / active                                      */
}

Base Type Rules

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-body);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--c-dark);
  line-height: 1.2;
}

h1 { font-size: 2.25rem;  font-weight: 700; }
h2 { font-size: 1.5rem;   font-weight: 700; }
h3 { font-size: 1.15rem;  font-weight: 700; }

/* Section / category labels */
.label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-brand);
}

a           { color: var(--c-link); }
a:hover     { color: var(--c-link-hover); }

caption,
.caption    { font-family: var(--font-ui); font-size: 0.75rem; color: var(--c-mid); }

Color Mapping — Usage in Digital Contexts

Dominant Surface

var(--c-dark) #354F5F
Use for: page headers, hero sections, sidebar backgrounds, cover blocks, footer. White or #7BB8DF text on this background.

Brand Accent

var(--c-brand) #7BB8DF
Use for: horizontal rules, left-border callouts, category labels, active state indicators, the logo shield mark.

Page Background

var(--c-offwhite) #F4F4F4
Use for: page / body background, alternating table rows, code blocks, callout backgrounds.

Content Surface

white / #FFFFFF
Use for: card backgrounds, modal surfaces, the main content column when page bg is #F4F4F4.

Web Type Specimens

Enlightium Prep · Program Overview

Formation Over Credentials

The Hub Framework

Enlightium Prep exists to form students who are ready, not merely credentialed. The difference matters. A credentialed student has completed requirements. A ready student has been shaped by those requirements into someone capable of thinking clearly, acting wisely, and contributing meaningfully.

Faith-formed agency: the capacity and will to act — to see a problem, engage it honestly, and bear the consequences with integrity.

Live web specimen above uses Playfair Display (headings) and Lora (body) as loaded from Google Fonts.

Secondary Colors in Digital Contexts

Secondary palette colors may be used in web contexts as category markers, badge backgrounds, callout borders, or data visualization fills — the same constraint as print applies. They must never dominate a page. A safe default: no more than one secondary color visible per viewport at a time.

Enlightium PrepStyle Guide