Web Design System
A living reference for building web pages and templates that reflect our brand identity with consistency and clarity.
Section 01
Color System
Official Heraldry Colors — From Style Guide
Brand Red
#B2292E · PMS 1805c
Brand Blue
#194F90 · PMS 7686c
Brand Gold
#C2995A · PMS 7407c
Dark Gray
#323E48 · PMS 432c
Light Gray
#F6F2EE · PMS 9102c
Extended Web Palette — Digital Use
Navy
#1A2D42 · Dark BGs
Web Gold
#C9A84C · Accents
Paper
#F7F2EA · Body BG
Cream
#EDE4D3 · Sections
Ink
#1A1510 · Body text
Semantic Tag Colors
Mass / Info
Text: #185FA5
Spanish / Active
Text: #3B6D11
Daily / Warning
Text: #633806
Alert / Error
Text: #B2292E
Gold / Neutral
Text: #A8893A
Section 02
Typography
The official brand fonts are Avenir (sans-serif) and Minion Pro (serif) — licensed fonts. For web use, the approved equivalents are listed below. These Google Fonts are loaded on every page via the standard link tag in the document head.
Avenir / DM Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 !@#$%
Weights: 300 Light · 400 Regular · 500 Medium
Use for: nav, labels, buttons, metadata, eyebrows, UI text
Avenir / DM Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 !@#$%
Weights: 300 Light · 400 Regular · 500 Medium · italic variants
Use for: page titles, section headings, hero headlines, pull quotes
Cormorant Garamond
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 !@#$%
Weights: 300 Light · 400 Regular · 500 Medium · italic variants
Use for: page titles, section headings, hero headlines, pull quotes
Avenir / DM Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 !@#$%
Weights: 400 Regular · italic
Use for: article body copy, event descriptions, paragraph text
Type Scale – Institutional Pages
Type Scale – Speciality Pages
Section 03
Components
Buttons
All buttons: DM Sans · 13px · font-weight 500 · letter-spacing 0.1em · uppercase · border-radius 2px
Status Tags
All tags: DM Sans · 10px · font-weight 500 · letter-spacing 0.1em · uppercase · border-radius 2px · 0.5px border
Cards – Speciality Pages
Parish
St. Patrick's Cathedral
460 Madison Ave
New York, NY 10022
Event
Upcoming Mass
June 30, 2026 at 7:00 PM
St. Patrick's Cathedral
Series
Why Do Catholics…?
Episode 1 · Cardinal Dolan
1 min 19 sec
Cards: white bg · 1px border (var --border) · 2px top accent in brand color · border-radius 2px. Card title uses Cormorant Garamond 500.
Form Elements – Speciality Pages
Section 04
Hero Patterns
Dark Hero — Standard (Navy background) – Speciality Pages
Category
Page Title Goes Here
A short introductory sentence written in DM Sans - Web equivalent of Avenir italic, explaining the purpose of this page in an inviting way.
Background: var(--navy) #1A2D42 · Gold hairline top border · Radial gold glow · Use for content pages, ministry pages, series landing pages
Light Hero — White background (campaign / branded pages) – Speciality Pages
Archdiocese of New York · Campaign
Page Headline& Secondary Line
A short introductory sentence in DM Sans - Web equivalent of Avenir italic at 17–20px with light ink color for readability on white.
Background: #FFFFFF · 3px red top border · Red/blue rule divider · Use for: campaign pages (America 250), event pages, feature content with photos
Section 05
Layout Patterns
1fr
300–360px
list
340px
Section Header Pattern – Speciality Pages
Section Title Goes Here
Every major section uses this pattern: 1px bottom border + 2px gold accent bar 60px wide from left.
Content Width Constraints
Section 06
Design Rules
- Use navy (#1A2D42) for dark section backgrounds
- Use warm paper (#F7F2EA) as the default page background
- Use Cormorant Garamond for all display headlines
- Pair eyebrow labels (10px, uppercase, gold) above every headline
- Use the 2px gold underline on section headers
- Keep cards white on cream/paper backgrounds
- Use 2px colored top-border on cards to indicate category
- Maintain the full-bleed breakout pattern for hero sections in Craft
- Use US address format: Street on line 1, City, State ZIP on line 2
- Keep border-radius at 2–4px (never large rounded corners)
- Use brand red for primary CTAs on light backgrounds
- Use gold for accents on dark navy backgrounds
- Don't use Inter, Roboto, or system fonts on public-facing pages
- Don't use pill-shaped buttons or tags (border-radius > 4px)
- Don't use raw OpenStreetMap address strings (Nominatim format)
- Don't combine brand colors randomly — follow the palette
- Don't place the heraldry mark directly on a photo
- Don't use custom logos for individual ministries or offices
- Don't bold or uppercase body copy (use for UI labels only)
- Don't use purple gradients or generic "AI" color schemes
- Don't use box-shadows heavier than 0 2px 12px rgba(0,0,0,0.15)
- Don't mix more than 3 font families on a single page
- Don't use hero backgrounds that are just solid colors without depth
Spacing Scale
--space-xs4px · icon gaps, tight label spacing
--space-sm8px · between tag chips, form field gaps
--space-md16px · card internal padding, list gaps
--space-lg24px · between cards, section sub-blocks
--space-xl40px · section padding sides, between form groups
--space-2xl64px · section-to-section vertical spacing
Section 07
Craft CMS Implementation
Full-Bleed Breakout — Required for all Hero sections
Craft CMS wraps page content in a container div with a max-width. Any section that needs to span the full viewport width must use the breakout technique below.
Full-bleed CSS — apply to .hero, .video-section, .closing-banner, footer
.hero {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* ⚠ If parent has overflow:hidden, add: */
.your-craft-container { overflow: visible !important; }
CSS Variables — paste into every page <style> block
:root {
--navy: #1A2D42; --navy-mid: #1B3047;
--gold: #C9A84C; --gold-light: #E2C06A; --gold-muted: #A8893A;
--paper: #F7F2EA; --cream: #EDE4D3; --cream-mid: #E5D9C5;
--white: #FFFFFF; --ink: #1A1510; --text-muted: #7A6D5E;
--border: rgba(26,45,66,0.12); --border-mid: rgba(26,45,66,0.2);
--font-display: 'Cormorant Garamond', Georgia, sans-serif;
--font-body: 'DM Sans', system-ui, sans-serif;
--font-ui: 'DM Sans', system-ui, sans-serif;
}
.page-header hide — required on all custom pages
.page-header { display: none; }
Page Template Checklist
Every page must have:
- Google Fonts link in <head>
- CSS variables :root block
- .page-header { display:none }
- html, body overflow-x: hidden
- Full-bleed hero with breakout CSS
- Responsive breakpoints at 768px + 1024px
Section structure:
- Eyebrow label → Headline → Rule → Body
- Section header with gold underline accent
- max-width 960px for content areas
- 40px horizontal padding on desktop
- 20px horizontal padding on mobile
- 72–80px vertical section padding
Archdiocese of New York
Web Design System · Internal Reference
Brand Design questions: ricardo.paiba@archny.org
Web Related questions: lawrence.thomas@archny.org