Dungeon Church

D&D community run by DM Brad in the Oakland Bay Area — in-person and virtual tabletop gaming in the world of Pyora. Dark theme with bold red accent and fantasy RPG aesthetic.

primary

secondary

text

primary

Aa
1.0:1
Fail

Aa
3.8:1
Fail

Aa
1.3:1
Fail

secondary

Aa
3.8:1
Fail

Aa
1.0:1
Fail

Aa
2.9:1
Fail

text

Aa
1.3:1
Fail

Aa
2.9:1
Fail

Aa
1.0:1
Fail

Brand Tools

ASE Adobe Swatch Exchange GPL GIMP Palette SCSS Sass Variables JSON W3C Design Tokens Procreate Procreate Palette JS Tailwind Preset CSS Stylesheet ZIP Asset Pack

Brand Map

graph TD ROOT@{ img: "./logos/mark.svg", label: "Dungeon Church", pos: "b", h: 70, constraint: "on" } ROOT --> C_primary["Hellfire Red
#ff2600"] ROOT --> C_secondary["Blessing White
#ffffff"] ROOT --> C_text["Stone Gray
#979797"] ROOT --> C_background["Dark Dungeon
#151719"] AP_0["Blessing White on Hellfire Red
3.8:1 (Fail)"] C_secondary --> AP_0 C_primary --> AP_0 AP_1["Blessing White on Dark Dungeon
18.0:1 (AAA)"] C_secondary --> AP_1 C_background --> AP_1 AP_2["Stone Gray on Dark Dungeon
6.2:1 (AA)"] C_text --> AP_2 C_background --> AP_2 style C_primary fill:#ff2600,color:#fff,stroke:#fff style C_secondary fill:#ffffff,color:#000,stroke:#000 style C_text fill:#979797,color:#000,stroke:#000 style C_background fill:#151719,color:#fff,stroke:#fff style AP_0 fill:#ff2600,color:#ffffff,stroke:#ffffff style AP_1 fill:#151719,color:#ffffff,stroke:#ffffff style AP_2 fill:#151719,color:#979797,stroke:#979797

Logos & Marks

Mark — On Dark

Mark — On Light (512px)

Wordmark — On Dark

Wordmark — On Light

Wordmark Distressed — On Dark

Wordmark Distressed — On Light

Wordmark Chrome — On Dark (512px)

Role Colors

Hellfire Red

Primary

#ff2600

rgb(255, 38, 0)

Blessing White

Secondary

#ffffff

rgb(255, 255, 255)

Stone Gray

Text

#979797

rgb(151, 151, 151)

Palettes

Brand Colors

All brand colors — accent, headline, body, muted, background

Hellfire Red (accent/CTA)

#ff2600

rgb(255, 38, 0)

Blessing White (headlines)

#ffffff

rgb(255, 255, 255)

Stone Gray (body text)

#979797

rgb(151, 151, 151)

Smoke (muted/borders)

#5f5f5f

rgb(95, 95, 95)

Dark Dungeon (background)

#151719

rgb(21, 23, 25)

Accessibility — Approved Pairs

Blessing White on Hellfire Red

fg: #ffffff / bg: #ff2600 — 3.8:1 (Fail)

Blessing White on Dark Dungeon

fg: #ffffff / bg: #151719 — 18.0:1 (AAA)

Stone Gray on Dark Dungeon

fg: #979797 / bg: #151719 — 6.2:1 (AA)

Accessibility — Never Use

Red text for body copy (eye strain, accessibility)
Primary red on near-black (insufficient contrast for small text)

Styles

.style-button-primary — Red accent button for primary CTAs

.style-button-secondary — Ghost-style button with white border

Typography Scale

h1 — The quick brown fox jumps over the lazy dog

.text-h1 — Waning Star / 36px / 300 / 1.1 / -0.02em

h2 — The quick brown fox jumps over the lazy dog

.text-h2 — Waning Star / 28px / 300 / 1.2 / -0.01em

h3 — The quick brown fox jumps over the lazy dog

.text-h3 — Waning Star / 22px / 300 / 1.3

nav — The quick brown fox jumps over the lazy dog

.text-nav — -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif / 16px / 400 / 1.2 / 0.05em

body — The quick brown fox jumps over the lazy dog

.text-body — -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif / 16px / 400 / 1.6

small — The quick brown fox jumps over the lazy dog

.text-small — -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif / 14px / 400 / 1.5

caption — The quick brown fox jumps over the lazy dog

.text-caption — -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif / 12px / 400 / 1.4