StyleGuide


Style Guide

Henson Architecture — Design System Reference. All type is Helvetica Neue 300; headings are uppercase via the global h1–h6 rule. Default text color is #737373 unless noted.

Contents

  1. Typography
  2. Colors
  3. Buttons & Links
  4. Filter Buttons
  5. Home Hero (Carousel)
  6. Inner Page Hero
  7. Project & Blog Cards
  8. Hero Image Resolutions
  9. Image Specifications
  10. Team Card
  11. Team Profile Page

Typography

H1
Page hero titles

font-size: 28px; font-weight: 300; text-transform: uppercase; letter-spacing: -0.01em;

The Quick Brown Fox

H2
In-page section headings

font-size: 26px; font-weight: 300; text-transform: uppercase; letter-spacing: -0.01em;

The Quick Brown Fox

H3 — Card title
Card titles below thumbnails

font-size: 18px; font-weight: 300; text-transform: uppercase; letter-spacing: -0.01em;

The Quick Brown Fox

H3 — Metadata label
Sub-section labels (Registrations, year groupings)

font-size: 16px; text-transform: uppercase; color: #737373;

The Quick Brown Fox

Body
Default paragraph text (uses –muted-foreground)

font-size: 16px; font-weight: 300; line-height: 1.625; color: #737373;

Standard body text used throughout the site for general content.

Caption / eyebrow
Eyebrow labels, metadata

font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500;

CAPTION / LABEL TEXT

Inline link
Email, phone, inline references

color: #141414; hover: opacity: 0.7;

Colors

Background

--background
#FFFFFF

Foreground

--foreground
#141414

Primary

--primary
#1F1F1F

Primary Foreground

--primary-foreground
#FAFAFA

Secondary

--secondary
#F5F4F2

Muted

--muted
#F5F4F2

Muted Foreground

--muted-foreground
#737373

Accent

--accent
#F2EFEB

Border

--border
#E8E5E1

Buttons & Links

The site uses text-based, animated-underline links rather than filled buttons. The canonical example is the View All link.

Latest News

View All

View All News
Styles
font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; color: #737373; padding-bottom: 4px;
Hover
color: #141414; transition: color 150ms;
Underline
Animated 1px bottom underline grows from left on hover (300ms ease)
Visibility
Desktop: display: block at ≥768px in section header. Mobile: centered below grid.
Label
“View All {Section}” — e.g. View All News, View All Projects

Filter Buttons

Used for filtering grids on Projects, News, and tabbed sections. Sharp-cornered, bordered, uppercase tracked-wide labels. Active state inverts to a solid foreground fill.





Element
<button> or shadcn <TabsTrigger>
Container
background: transparent; display: flex; flex-wrap: wrap; gap: 8px;
Default state
border-radius: 0; border: 1px solid #E8E5E1; padding: 8px 16px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500;
Hover state
background-color: #141414; color: #FFFFFF;
Active state
background-color: #141414; color: #FFFFFF; border-color: #141414;
Used on
Projects (service filter), News (category filter), About tabs

Home Hero (Carousel)

Full-viewport image carousel used only on the homepage. Auto-advancing slides with a dark gradient overlay and bottom-left title block.

Upper West Side, NYC

Shaping New York’s Architectural Future

Container
height: 100vh; min-height: 500px; width: 100%; position: relative;
Image
position: absolute; inset: 0; object-fit: cover;
Overlay
background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
Title block
position: absolute; bottom: 0; padding: 0 20px 48px; color: #FFFFFF;
Navigation
Sits over hero (transparent). Logo + links rendered in white until scroll.
Auto-play
interval: 6000ms; pauses on hover.
Used on
Homepage only (/)

Inner Page Hero

Standardized header used on every sub-page (About, Services, News, Awards, Resources, Contact, Project Details). Single image, dark gradient, bottom-left H1 title aligned to global gutters.

About Us

Container
height: 60vh; min-height: 400px; max-height: 600px; position: relative; display: flex; align-items: flex-end;
Image
position: absolute; inset: 0; object-fit: cover;
Overlay
background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
Title
H1 — font-size: 28px; font-weight: 300; color: #FFFFFF; text-transform: uppercase;
Title block
position: absolute; bottom: 0; padding: 0 20px 48px (gutter = 20px);
Project Detail variant
height: 80vh; min-height: 500px; (no max-height) — full-bleed.
Used on
About, Services, News, Awards, Resources, Contact, Project Detail

Project & Blog Cards

Shared card pattern used in the Featured Projects grid and the Latest News grid. Identical structure: 1:1 image, plain text block below. No borders, no shadows, sharp corners.

Riverside Memorial Chapel

Historic Preservation

Upper West Side Co-op

Historic Preservation

21 Stuyvesant Street

East Village, NYC

Wrapper
<a> or <Link> — display: block; cursor: pointer; position: relative; overflow: hidden;
Image container
aspect-ratio: 1 / 1; overflow: hidden; background-color: #F5F4F2;
Image
width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease-out;
Image hover
transform: scale(1.05);
Text block
padding-top: 16px;
Title (H3)
font-size: 18px; font-weight: 300; color: #141414; transition: opacity 150ms;
Title hover
opacity: 0.7;
Meta line
font-size: 14px; color: #737373; margin-top: 4px;
Grid
1 col (≥768px: 2 cols; ≥1024px: 3 cols); gap: 16px (md: 24px);
Borders / shadow
None. Card is image + text only.

Hero Image Resolutions

Source file requirements for the homepage hero carousel and the standardized inner-page hero. All images served as optimized JPG. Keep focal points in the lower-left third so the H1 title block remains legible.

Section Aspect Ratio Min Recommended Max (Retina) File Size
Home Hero (Carousel) 16:9 (flexible) 1920 × 1080 2560 × 1440 3840 × 2160 < 500 KB
Inner Page Hero ~8:3 (panoramic) 1600 × 600 2400 × 900 3200 × 1200 < 400 KB
Home Hero container
height: 100vh; min-height: 500px; object-fit: cover;
Inner Hero container
height: 60vh; min-height: 400px; max-height: 600px; object-fit: cover;
Orientation
Landscape only. Avoid critical detail near top edge.
Format
Optimized JPG (sRGB, quality 75–82). Use WebP fallback where supported.

Image Specifications

Grid layouts (Projects, News, Awards) are strictly 1:1 site-wide. Upload square source files; non-square uploads are center-cropped via object-fit: cover.

Section Ratio Source
Latest News 1:1 800 × 800px
Featured Projects (Grid) 1:1 800 × 800px
Featured Projects (Horizontal Scroll) 3:4 600 × 800px
Project Detail Hero Native 80vh container, object-fit: contain
Team Profile Portrait 1:1 800 × 800px

Team Card

Used in the Meet Our Team grid on the About page. Center-aligned, borderless, square portrait, name (H3), title, short bio.

Scott Henson

Principal, FAIA

Scott Henson has advanced the field of preservation through his hands-on approach to craftsmanship and traditional building practices.

Grid
1 col (≥640px: 2; ≥1024px: 3); column-gap: 32px; row-gap: 64px;
Portrait
aspect-ratio: 1 / 1; overflow: hidden; object-fit: cover;

Team Profile Page

Reference implementation: /team/profile4. Top-to-bottom anatomy: Inner Page Hero with section title → Bio block (square portrait + name/title/paragraphs) → Accordion of citation-style sections → Back link. All elements aligned to the global 1280px container with 24px gutters.

1 — Hero (Section Title)

Our People

Container
height: 60vh; min-height: 400px; max-height: 600px; display: flex; align-items: flex-end;
Title
H1 — 28px / 300 / #FFFFFF / uppercase (section label “Our People”, not person name)
Overlay
linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.2), transparent);

2 — Bio Block (Person Name & Content)

Cory Trembath Rouillard AIA, APT RP, LEED AP

Preservation Architect

Bio paragraphs render as standard body copy in muted-foreground (#737373), separated by 16px vertical spacing. No drop caps, no pull-quotes.

Layout
1 col (≥768px: 3 cols); gap: 48px (md: 64px). Portrait 1 col, content 2 cols.
Portrait
aspect-ratio: 1 / 1; border-radius: 0; border: none;
Name (H2)
font-size: 28px; font-weight: 300; color: #141414; margin-bottom: 8px;
Suffix
inline <span>; color: #737373;
Title
font-size: 16px; font-weight: 300; color: #737373; letter-spacing: 0.025em;
Bio paragraphs
font-size: 16px; line-height: 1.625; color: #737373; gap: 16px between paragraphs;
Section padding
padding: 64px 0 (md: 96px 0);

3 — Accordion (Citation Sections)

About ▾

Registrations

New York

New Jersey

Affiliations

American Institute of Architects (AIA) — Member, Historic Resources Committee

Awards ▾

2024

Traditional Building. 25 Leaders – Who’s Who in Traditional Building.

APT Presidential Citation. Technical Committee on Sustainable Preservation.

Presentations ▸

Component
Radix Accordion (multi-open); default open: [“about”]
Item
border: none; (no dividers between items)
Trigger
font-size: 18px; font-weight: 300; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 0;
Trigger icon
ChevronDown 16px; rotate(180deg) on open; transition: 200ms;
Content wrapper
padding: 8px 0 24px; gap: 4px between blocks;
Sub-heading (H3)
font-size: 16px; uppercase; color: #737373; margin-bottom: 4px;
Citation line
font-size: 16px; color: #141414; line-height: 1.375;
Group spacing
padding-bottom: 12px between sub-grouped blocks;
Inline links
underline; text-underline-offset: 4px; decoration-color: rgba(115,115,115,.5); hover: #141414;

4 — Section Inventory & Citation Patterns

Section Format Citation Pattern
About Sub-grouped Plain lines under uppercase muted sub-heading
Awards Grouped by year {org}. {title}.
Project Awards Grouped by project (dl) {year}: {title}
Presentations Grouped by year {month} {year}. “{title}.” {org}. {location}.
Publications Flat list “{title}.” {publisher}. {year}.
Press Flat list {author}. “{title}.” {publication}, {date}.

5 — Back Link (Footer of Page)

Style
inline-flex; gap: 8px; font-size: 12px; uppercase; letter-spacing: 0.1em; font-weight: 500; color: #737373; hover: #141414;
Icon
ArrowLeft 16px; label “Back To Team”
Section padding
padding: 48px 0; max-width: 1280px; margin: 0 auto; horizontal padding: 24px;