Stained Glass

A Design System Inspired by Cathedral Windows

Section I

Color Palette

Ruby

#9B111E

Sapphire

#0F52BA

Emerald

#046307

Amber

#FFBF00

Amethyst

#9966CC

Leading

#1A1A1A

Section II

Typography

Display / Cinzel

CATHEDRAL

Heading

Light Through Glass

Subheading

Sacred Illumination

Body / Crimson Text

Stained glass windows have adorned sacred spaces for over a millennium, transforming sunlight into jeweled narratives of color. Each panel tells a story, framed by the dark leading that gives structure to the luminous glass.

Caption

The art of colored light and shadow

Section III

Spacing System

4

space-1

8

space-2

16

space-4

24

space-5

32

space-6

48

space-7

Section IV

Buttons

Section V

Form Elements

Section VI

Cards

✦

Faith

Ruby glass symbolizes sacrifice and passion, the deep red casting warm shadows across stone floors at dawn.

✧

Truth

Sapphire panels represent heavenly wisdom, their cool blue light suggesting the infinite expanse above.

✨

Hope

Emerald glass evokes renewal and growth, bringing the vitality of nature into sacred spaces.

Section VII

Data Table

Window Name Date Created Primary Color Status
Rose Window of Notre-Dame 1260 CE Ruby & Sapphire Preserved
Canterbury Cathedral West 1178 CE Emerald & Amber Preserved
Chartres Blue Virgin 1180 CE Sapphire Restoration
York Minster Five Sisters 1260 CE Grisaille Damaged
Section VIII

Badges

Ruby Sapphire Emerald Amber Amethyst
Section IX

Design Principles

I

Light is the Medium

Design as if light passes through every element. Use translucent colors, inner glows, and subtle gradients to create the illusion of illumination from within.

II

Leading Defines Structure

Dark borders (leading) create the grid system. They separate, organize, and give weight to the colorful panels they contain. Embrace bold, dark dividers.

III

Jewel Tones Convey Meaning

Each color carries symbolic weight. Ruby for importance, sapphire for trust, emerald for growth, amber for warmth. Use color intentionally to guide the narrative.

IV

Sacred Simplicity

Cathedral windows told stories to those who could not read. Keep interfaces clear and intuitive. Let the beauty of colored light speak where words cannot.