Steward Web Style Guide

Foundation

Build from a few repeatable rules

The goal is not to preserve every one-off style from the WordPress build. The goal is to create the smallest useful system that still feels like Steward.

Two font families

Audiowide provides the display voice. Inconsolata handles supporting copy, navigation, labels, links, buttons, and details.

One responsive type scale

Headings scale with the viewport but stop at a defined maximum. This prevents text from becoming oversized on wide screens.

Four content widths

Use extra-wide, wide, standard, and narrow containers instead of creating a custom width for every section.

Consistent spacing

Use shared gap, row, and section-spacing variables instead of entering unrelated padding values throughout the site.

Color system

Core colors

These values are based on the current Steward website and logo, then reduced to a practical set of named variables.

Ink #17363A Primary headings and deep backgrounds

Brand Teal #2B5055 Links, outlines, icons, and supporting accents

Dark Surface #2B5A60 Required dark-background type preview

Action Red #C44532 Primary calls to action

Brand Yellow #DAA540 Secondary calls to action and accents

Light Gold #E3BA6C Hover states and softer accent treatments

Cream #F7F2E8 Primary page background and text on dark brand surfaces

Service Surface #F4E4C9 Framed service-section background

White #FFFFFF Cards and neutral light surfaces only

Muted Text #667477 Captions, metadata, and legal text

Dark-surface type rule: Use Cream (--color-on-dark) for text on Ink, Brand Teal, and Dark Surface. Reserve White for cards and other neutral light surfaces.

Typography

Type styles on light and dark backgrounds

Each row represents one approved text style. Dark examples use #2B5A60 with Cream text. White is not used for type on Ink, Brand Teal, or Dark Surface backgrounds.

Style	Light background	Dark background
Eyebrow Inconsolata · 14px · 700 · uppercase	Website design and development	Website design and development
H1 / Display Audiowide · 46–56px · 400	Web development that builds community	Web development that builds community
H2 Audiowide · 36–46px · 400	We’re where membership and digital meet	We’re where membership and digital meet
H3 Audiowide · 28–38px · 400	Web design and development	Web design and development
H4 Inconsolata · 24–28px · 700	Responsive website support	Responsive website support
H5 Inconsolata · 20–22px · 700	Custom web programming	Custom web programming
H6 / Label Inconsolata · 16px · 700 · uppercase	Featured service	Featured service
Large body Inconsolata · 20–24px · 500	Steward provides website design and development for associations and societies.	Steward provides website design and development for associations and societies.
Body Inconsolata · 18px · 400	If your association website is dated, hard to use, or does not reflect the value you provide members, we can help.	If your association website is dated, hard to use, or does not reflect the value you provide members, we can help.
Small body Inconsolata · 15px · 400	Use for captions, attribution, metadata, and supporting information.	Use for captions, attribution, metadata, and supporting information.
Legal Inconsolata · 13px · 400	Use only for copyright, privacy, policy, consent, and other required secondary content.	Use only for copyright, privacy, policy, consent, and other required secondary content.
Inline link Inconsolata · inherited size · 700	Standard inline link	Standard inline link

Recommendation: Audiowide is used only for H1–H3 display headings. Inconsolata handles everything else. This keeps the brand character without making every element feel like a custom type treatment.

Optional heading shadow:

Add class="heading-shadow" to any H1–H6 when the gold drop-shadow treatment is needed. This is an optional visual effect and does not create a separate typography style.

Layout variables

Gaps, rows, and sections

These are the main spacing controls a developer should use when assembling pages.

Small gap --gap-sm: 1rem

Medium gap --gap-md: 1.5rem

Large gap --gap-lg: 2.5rem

Vertical row spacing --row-space

Vertical section spacing --section-space

Spacing classes: start with stack, then add one modifier when the default medium gap is not appropriate: stack stack-sm, stack stack-lg, stack stack-xl, or stack stack-section. Stack modifiers only change the gap and must be paired with the base stack class. Use gap-xs through gap-xl on shared grids. Use section-pad or section-pad--compact on the section itself instead of hardcoding page-specific padding.

Layout system

Choose columns and spacing in the HTML

Containers control the outer width. Shared layout classes control columns, gaps, alignment, and section spacing. Component classes should control appearance rather than creating their own page grid.

Two equal columns

layout-grid layout-grid--2-equal gap-lg

1 / 2

One-third / two-thirds

layout-grid layout-grid--1-2 gap-xl

1 / 3

2 / 3

Three equal columns

layout-grid layout-grid--3-equal gap-lg

1 / 3

Four equal columns

layout-grid layout-grid--4-equal gap-lg

1 / 4

Two-thirds / one-third

layout-grid layout-grid--2-1 gap-xl

2 / 3

1 / 3

Flexible content / auto-width action

layout-grid layout-grid--1-auto gap-xl items-center

Flexible content

Auto-width action

Full-width grid item

grid-span-full

Column one

Column two

Spans the full grid

Add grid-span-full to a grid child when it should cross every available column.

Alignment and sticky columns

items-start

Aligns grid children to the start of the row.

items-center

Centers grid children vertically within the row.

items-stretch

Stretches grid children to equal row height.

Add layout-sticky-top to a supporting column that should remain visible while its longer sibling scrolls. It returns to normal document flow at 64rem and below.

Page flow and responsive behavior

Apply page-flow to the page’s main wrapper when framed sections need the shared outer gap and top/bottom gutter. Continue to apply section-pad or section-pad--compact to each section.

At 64rem and below

Unequal ratio grids and the flexible/auto grid collapse to one column. Four equal columns become two, and sticky columns return to normal flow.

Add layout-grid--stack-tablet to any shared grid that contains dense content—such as long testimonials—and should become one column at this breakpoint.

At 48rem and below

Two-, three-, and four-column equal grids collapse to one column. Framed heroes release their shared minimum height.

System rule: use a container class for width, a layout-grid--* class for column ratios, a gap-* class for space between items, and section-pad or section-pad--compact for section padding. Use items-* for row alignment and grid-span-full for a child that must span every column. Change the HTML class to change the layout; do not add a page-specific grid-template-columns rule.

Actions

Buttons and links

The system includes four approved button styles. Every style uses the shared --radius-button: 100px variable so calls to action remain consistently pill shaped.

Buttons on light backgrounds

Primary · Red Secondary · Yellow Outline action Dark action

Buttons on dark backgrounds

Primary · Red Outline · Inverse

Reusable surfaces

Card variants

Start with the neutral card, then add one approved modifier when the content needs stronger emphasis or an inverse treatment.

Accent card

Use the red border and dark-surface heading to bring more attention to a benefit or other important supporting point.

Inverse muted card

Use the muted background with cream copy when light artwork or icons need a darker supporting surface.

Usage: combine the base .card component with either .card--accent or .card--inverse-muted. Keep container width, columns, and gaps on the surrounding shared layout classes.

Reusable supporting card

Logo cards

Use logo cards for clients, events, partners, or organizations that need a consistent mark-and-name treatment inside a shared grid.

The Canadian Society of Association Executives Annual Conference

Intel’s Employee Resource Group

Usage: the base .card still controls the panel. Add .logo-card and .logo-card__mark only to normalize alignment and logo size. The surrounding shared grid controls column count and gaps.

Reusable content card

Case-study cards

Use this full-card link to feature project stories on service pages and to suggest related work at the end of a case study.

Organization · Project type

Use an outcome-focused project title

Keep the summary concise enough to explain the challenge, intervention, and value without replacing the full story.

Read case study

Organization · Project type

Support the title with useful context

A consistent image ratio, content area, and anchored action keeps uneven story lengths aligned across the row.

Read case study

Organization · Project type

Make the complete card interactive

Hover and keyboard-focus states apply to the card link, so the entire component has one clear destination.

Read case study

Usage: place .case-study-card items inside a shared grid. The component controls the card’s border, image ratio, internal padding, hover state, and action placement. The surrounding container, grid, and gap utilities still control page layout.

Structure

Containers

Content containers control alignment and readable width. The framed section shell is a separate outer layer for near-full-width sections that need a visible border, rounded corners, and contained artwork.

Outer section treatment

Framed section shell

Use this near-full-width shell for major branded sections such as the homepage hero. Nest an approved content container inside it.

.section-frame + .container-extra-wide

Extra-large content container · 90% width · 1728px maximum

Wide container · 1360px maximum

Standard container · 1200px maximum

Narrow reading container · 760px maximum

Keep the responsibilities separate: .section-frame controls the outer border, radius, background, and overflow. A container controls the section's maximum width. A layout-grid--* class controls the columns inside that container. Components should not set their own outer width or page-level column ratio.

Shared page introduction

Two-column page hero

Use the shared particle-backed hero when an interior page needs introductory copy beside one primary illustration. The layout grid determines the columns; the hero component supplies only the branded surface and artwork behavior.

Interior page

Lead with one clear idea

Keep the copy focused and use the second column for one approved illustration.

Primary action

Halftone illustration of hands working on a laptop

Usage: combine .page-hero with .section-frame and .section-frame--hero. Compose the inner structure with an approved container, .layout-grid--2-equal, gap, and alignment utilities. Use .page-hero__copy and .page-hero__art only for their component-level behavior.

Conversion

Illustrated contact CTA

Use this shared treatment for the final “Want to talk?” section. The component controls the branded background and centered content; existing type, spacing, container, and button classes control the content inside it.

Want to talk?

Build a website that works harder

Center the content inside the artwork’s focal area and keep the supporting copy to a readable line length.

Contact Us

Usage: combine .contact-cta with .section-frame and a section-padding class. Use .contact-cta__content on an approved container composed with the base .stack and a stack-spacing modifier.

Social proof

Testimonials

Use the standard treatment for a featured quote and the compact modifier when several testimonials need to remain visible in a fixed grid.

Portrait of Brian Duty, MD — **Brian Duty, MD** Website Committee Chair, The Endourological Society

“The compact treatment keeps supporting testimonials readable without competing with the primary page message.”

Client name Role, organization

“Use a shared grid to create the row. The testimonial component should not choose its own container width or column count.”

Client name Role, organization

Two font families

One responsive type scale

Four content widths

Consistent spacing

Web development that builds community

Web development that builds community

We’re where membership and digital meet

We’re where membership and digital meet

Web design and development

Web design and development

Responsive website support

Responsive website support

Custom web programming

Custom web programming

Featured service

Featured service

Two equal columns

One-third / two-thirds

Three equal columns

Four equal columns

Two-thirds / one-third

Flexible content / auto-width action

Full-width grid item

Alignment and sticky columns

Page flow and responsive behavior

At 64rem and below

At 48rem and below

Buttons on light backgrounds

Buttons on dark backgrounds

Accent card

Inverse muted card

Use an outcome-focused project title

Support the title with useful context

Make the complete card interactive

Framed section shell

Lead with one clear idea

Build a website that works harder