OWA Computer

Generated Nov 8, 2026

DESIGN.md for bakerroofing.com

bakerroofing.com6 colors6 componentsfield-gothic-xcondensed + trade-gothic-next

Remix

2 screenshots captured· bakerroofing.com

1 / 2 · Baker Roofing | Commercial Roofing Contractor · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Bakerroofing
description: |
  Baker Roofing's design system embodies industrial confidence and heritage
  craftsmanship merged with modern clarity. The palette merges warm earth tones
  with bold red accents, evoking both the safety and durability of roofing work
  and the company's century-long legacy. Typography is emphatic and
  uppercase-heavy, commanding attention with compressed, geometric letterforms
  that communicate strength and reliability. Hero imagery dominates the
  experience, layered with dark gradient overlays to ensure text legibility and
  maintain focus on messaging. The overall mood is professional yet
  approachable—this is a company with deep roots that builds and protects, and
  the design reflects both authority and trustworthiness through restrained use
  of colour, generous whitespace, and a disciplined hierarchical system.
source:
  url: "https://bakerroofing.com"
  pagesAnalyzed: 1
  extractedAt: 2026-11-08
  tokensMeasured: true
colors:
  primary: "#FD3A20"
  canvas: "#F5F5F5"
  surface: "#3B3835"
  surface-alt: "#165051"
  on-primary: "#F5F5F5"
  ink: "#3B3835"
  body: "#D0BA95"
  neutral-1: "#FFFFFF"
typography:
  display-xxl:
    fontFamily: field-gothic-xcondensed
    fontSize: 119.952px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -1.2px
    textTransform: uppercase
  display-xl:
    fontFamily: field-gothic-xcondensed
    fontSize: 98px
    fontWeight: 600
    lineHeight: 0.78
    letterSpacing: 0px
    textTransform: uppercase
  display-lg:
    fontFamily: field-gothic-xcondensed
    fontSize: 97.92px
    fontWeight: 600
    lineHeight: 0.8
    letterSpacing: -0.98px
    textTransform: uppercase
  display-md:
    fontFamily: field-gothic-xcondensed
    fontSize: 48px
    fontWeight: 600
    lineHeight: 0.83
    letterSpacing: -0.48px
    textTransform: uppercase
  display-md-loose:
    fontFamily: field-gothic-xcondensed
    fontSize: 48px
    fontWeight: 600
    lineHeight: 0.84
    letterSpacing: 0px
    textTransform: uppercase
  display-sm:
    fontFamily: field-gothic-xcondensed
    fontSize: 47.52px
    fontWeight: 600
    lineHeight: 0.9
    letterSpacing: 0px
    textTransform: uppercase
  heading-md:
    fontFamily: field-gothic-xcondensed
    fontSize: 28px
    fontWeight: 400
    lineHeight: 0.86
    letterSpacing: 0px
    textTransform: uppercase
  heading-md-strong:
    fontFamily: trade-gothic-next
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0px
  heading-sm:
    fontFamily: field-gothic-xcondensed
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.24px
    textTransform: uppercase
  quote:
    fontFamily: field-gothic-xcondensed
    fontSize: 63.936px
    fontWeight: 600
    lineHeight: 0.9
    letterSpacing: 0px
    textTransform: uppercase
  body-xl:
    fontFamily: field-gothic-xcondensed
    fontSize: 24px
    fontWeight: 400
    lineHeight: 0.86
    letterSpacing: 0px
    textTransform: uppercase
  body-xl-strong:
    fontFamily: field-gothic-xcondensed
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
    textTransform: uppercase
  body-xl-trade-gothic-next:
    fontFamily: trade-gothic-next
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px
  body-lg:
    fontFamily: trade-gothic-next
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-lg-tight:
    fontFamily: trade-gothic-next
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: trade-gothic-next
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.84px
    textTransform: uppercase
  button:
    fontFamily: trade-gothic-next
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.29
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 4px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 36px
  band: 40px
borderWidths:
  thin: 1px
shadows:
  sm: "rgba(0, 0, 0, 0.25) 0px 20px 60px 0px"
  md: "rgba(0, 0, 0, 0.08) 0px 14px 30px 0px"
  lg: "rgba(20, 18, 18, 0.08) 0px 2px 10px 0px"
elevationStrategy: progressive
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#F5F5F5"
    surface: "#3B3835"
    surfaceRaised: "#3B3835"
    text: "#3B3835"
    textMuted: "#D0BA95"
    border: "#DFDEDE"
    accent: "#FD3A20"
    accentFg: "#000000"
    focusRing: "#FD3A20"
    elevation: shadow
  dark:
    bg: "#140B0A"
    surface: "#221A19"
    surfaceRaised: "#2E2625"
    text: "#FFF7F6"
    textMuted: "#A69D9C"
    border: "#3A3231"
    accent: "#FD3A20"
    accentFg: "#0B0B0C"
    focusRing: "#FD3A20"
    elevation: "border+surface"
  contrastFailures:
    - "light: muted on bg = 1.73:1 (needs 4.5:1)"
    - "light: text on surface = 1:1 (needs 4.5:1)"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(90deg, rgba(0, 0, 0, 0) 31%, rgba(0, 0, 0, 0.4) 100%), url(\"https://bakerroofing.com/wp-content/uploads/2026/06/history-sign-scaled.webp\")"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(0, 0, 0, 0.08) 4%, rgba(0, 0, 0, 0.75) 100%), url(\"https://bakerroofing.com/wp-content/uploads/2026/06/service-roof-repair-scaled.webp\")"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(0, 0, 0, 0.08) 4%, rgba(0, 0, 0, 0.75) 100%), url(\"https://bakerroofing.com/wp-content/uploads/2026/06/service-roof-replacement-scaled.webp\")"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(0, 0, 0, 0.08) 4%, rgba(0, 0, 0, 0.75) 100%), url(\"https://bakerroofing.com/wp-content/uploads/2026/06/service-restoration-waterproofing.webp\")"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(0, 0, 0, 0.08) 4%, rgba(0, 0, 0, 0.75) 100%), url(\"https://bakerroofing.com/wp-content/uploads/2026/06/BRC-Academy-54-400x267.jpg\")"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(0, 0, 0, 0.08) 4%, rgba(0, 0, 0, 0.75) 100%), url(\"https://bakerroofing.com/wp-content/uploads/2026/07/Dual-Brand-Finished-9-400x300.jpg\")"
components:
  button-primary:
    typography: "{typography.body-xl}"
    textColor: "{colors.neutral-1}"
    height: 56px
    padding: "16px 20px 16px 20px"
    rounded: 3px
    backgroundColor: "{colors.primary}"
  button-primary-2:
    typography: "{typography.body-xl-strong}"
    textColor: "{colors.on-primary}"
    height: 56px
    padding: "10px 20px 10px 20px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.primary}"
  button-text:
    typography: "{typography.button}"
    textColor: "{colors.ink}"
    height: 44px
  button-text-2:
    typography: "{typography.body-lg-tight}"
    textColor: "{colors.ink}"
    height: 44px
  card-featured:
    typography: "{typography.body-lg-tight}"
    textColor: "{colors.on-primary}"
    padding: "32px 32px 32px 32px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.surface}"
  card:
    typography: "{typography.body-lg-tight}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.canvas}"
  card-sm:
    typography: "{typography.display-md}"
    textColor: "{colors.ink}"
  badge-primary:
    typography: "{typography.body-md}"
    textColor: "{colors.on-primary}"
    height: 43.5938px
    padding: "12px 12px 12px 12px"
    rounded: "4px 4px 0px 0px"
    backgroundColor: "{colors.primary}"
  navigation:
    typography: "{typography.body-lg-tight}"
    textColor: "{colors.ink}"
  footer:
    typography: "{typography.body-lg-tight}"
    textColor: "{colors.ink}"
    padding: "68px 0px 72px 0px"
    backgroundColor: "{colors.surface}"
  link:
    typography: "{typography.button}"
    textColor: "{colors.ink}"
  link-lg:
    typography: "{typography.body-lg-tight}"
    textColor: "{colors.neutral-1}"
states:
  other-focus:
    target: other
    state: focus
    textColor: "rgb(68, 68, 68)"
    textDecoration: none
    backgroundColor: "rgb(221, 221, 221)"
  other-hover:
    target: other
    state: hover
    textDecoration: underline
  button-hover:
    target: button
    state: hover
    textDecoration: none
  nav-hover:
    target: nav
    state: hover
    backgroundColor: "rgb(212, 47, 26)"
  link-hover:
    target: link
    state: hover
    textColor: "{colors.primary}"
  link-focus-visible:
    target: link
    state: focus-visible
    outline: "{colors.canvas} solid 2px"
    outlineColor: "{colors.on-primary}"
    outlineWidth: 2px
  card-hover:
    target: card
    state: hover
    filter: "brightness(1.04)"
  input-focus-visible:
    target: input
    state: focus-visible
    outline: "{colors.primary} solid 2px"
    borderColor: "{colors.ink}"
    outlineColor: "{colors.primary}"
    outlineWidth: 2px
  other-focus-visible:
    target: other
    state: focus-visible
    outline: "{colors.primary} solid 2px"
    outlineColor: "{colors.primary}"
    outlineWidth: 2px
  button-focus-visible:
    target: button
    state: focus-visible
    outline: "rgb(24, 99, 220) solid 2px"
    outlineColor: "rgb(24, 99, 220)"
    outlineWidth: 2px
breakpoints:
  - width: 375
    containerWidth: 335
    gridColumns: 2
    navLinksVisible: 14
    menuToggleVisible: true
    headingPx: 58
    bodyPx: 16
    sectionPaddingX: 20
  - width: 768
    containerWidth: 688
    gridColumns: 2
    navLinksVisible: 14
    menuToggleVisible: true
    headingPx: 64
    bodyPx: 16
    sectionPaddingX: 40
  - width: 1024
    containerWidth: 880
    gridColumns: 4
    navLinksVisible: 14
    menuToggleVisible: true
    headingPx: 85
    bodyPx: 16
    sectionPaddingX: 72
  - width: 1280
    containerWidth: 1136
    gridColumns: 5
    navLinksVisible: 20
    menuToggleVisible: true
    headingPx: 107
    bodyPx: 16
    sectionPaddingX: 72
  - width: 1440
    containerWidth: 1296
    gridColumns: 5
    navLinksVisible: 20
    menuToggleVisible: true
    headingPx: 120
    bodyPx: 16
    sectionPaddingX: 72
coverage:
  statesFound: 61
  gradientsFound: 6
  rolesUnassigned: 1
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Baker Roofing

1. Visual Theme & Atmosphere

Baker Roofing's design system embodies industrial confidence and heritage craftsmanship merged with modern clarity. The palette merges warm earth tones with bold red accents, evoking both the safety and durability of roofing work and the company's century-long legacy. Typography is emphatic and uppercase-heavy, commanding attention with compressed, geometric letterforms that communicate strength and reliability. Hero imagery dominates the experience, layered with dark gradient overlays to ensure text legibility and maintain focus on messaging. The overall mood is professional yet approachable—this is a company with deep roots that builds and protects, and the design reflects both authority and trustworthiness through restrained use of colour, generous whitespace, and a disciplined hierarchical system.

Key Characteristics

Bold, uppercase typography with tight tracking on display sizes—sharp, architectural feel
Dominant brand red ({colors.primary} — #FD3A20) used sparingly but decisively for CTAs and accents
Warm neutral palette anchored by dark surfaces for contrast and legibility
Full-bleed background imagery with dark gradient overlays for visual depth
Flat, sharp-cornered component design with minimal shadows—industrial aesthetic
Strong semantic use of color: red for action, warm neutrals for content, dark grays for surfaces
Uppercase text treatment across headings and labels—reinforces authority and craftsmanship

2. Color Palette & Roles

Primary

Brand Accent ({colors.primary} — #FD3A20): Primary call-to-action buttons, hover states, active indicators, and brand mark. Energetic red that commands attention without overwhelming.

Neutral Scale

Canvas / Light Background ({colors.canvas} — #F5F5F5): Default page background, light card surfaces, and label text when placed on brand-coloured surfaces.
Surface / Dark ({colors.surface} — #3B3835): Primary card and panel backgrounds; dominant headings and body text. Deep charcoal provides strong contrast.
Surface Alt / Accent ({colors.surface-alt} — #165051): Alternating section band colour; used to break up long pages and create visual rhythm.
Body Text ({colors.body} — #D0BA95): Body copy and secondary text. Warm taupe maintains readability while softening the dark surface palette.
Neutral / Pure White ({colors.neutral-1} — #FFFFFF): Decorative and pure white text or borders; minimal structural use.

Interactive & Semantic

No explicit error, success, or warning colors are declared in the system. Semantic states are communicated through opacity, transform, and red hover states only.

3. Typography Rules

Font Family

Primary Display Font: field-gothic-xcondensed — a condensed, geometric sans-serif for all display and heading roles. Fallback: sans-serif.

Secondary Body Font: trade-gothic-next — a neutral, open sans-serif for body, buttons, and form text. Fallback: sans-serif.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	field-gothic-xcondensed	98px	600	0.78	0px	Largest hero headlines
Display XXL	field-gothic-xcondensed	119.952px	600	1	-1.2px	Oversized statements; tight tracking
Display LG	field-gothic-xcondensed	97.92px	600	0.8	-0.98px	Secondary hero size; compressed
Display MD	field-gothic-xcondensed	48px	600	0.83	-0.48px	Mid-tier section headers; uptight tracking
Display MD Loose	field-gothic-xcondensed	48px	600	0.84	0px	Alternative display size; looser tracking
Display SM	field-gothic-xcondensed	47.52px	600	0.9	0px	Compact display; secondary emphasis
Quote	field-gothic-xcondensed	63.936px	600	0.9	0px	Pull quotes and testimonials
Heading MD	field-gothic-xcondensed	28px	400	0.86	0px	Uppercase section subheadings
Heading MD Strong	trade-gothic-next	28px	700	1.15	0px	Bold body headings; serif alternative
Heading SM	field-gothic-xcondensed	24px	600	1	-0.24px	Smaller headings; tight letter-spacing
Body XL	field-gothic-xcondensed	24px	400	0.86	0px	Large uppercase body text
Body XL Strong	field-gothic-xcondensed	24px	600	1.5	0px	Emphasised large text
Body XL Trade Gothic Next	trade-gothic-next	24px	700	1.33	0px	Bold 24px body in serif font
Body LG	trade-gothic-next	16px	400	1.6	0px	Primary body copy; generous leading
Body LG Tight	trade-gothic-next	16px	400	1.5	0px	Links and tight body text
Body MD	field-gothic-xcondensed	14px	400	1.4	0.84px	Uppercase labels and small caps
Button	trade-gothic-next	14px	400	1.29	0px	Button and link text
Body XS (code)	—	—	—	—	—	Not measured; code styles not extracted

Principles

Uppercase dominance: All display and heading sizes use text-transform: uppercase, reinforcing the industrial, authoritative brand voice.
Negative letter-spacing on display: Display sizes (XXL, LG, MD) employ tight tracking (-1.2px, -0.98px, -0.48px) to create visual compression and draw attention.
Compact line-height: Display and heading line-heights cluster between 0.78–0.86, stacking lines tightly for dramatic impact.
High contrast in serif: trade-gothic-next is reserved for secondary display, body emphasis, and action text, creating visual hierarchy without size alone.
Warm, human body text: Body copy in trade-gothic-next at 16px with 1.6 line-height provides excellent readability and approachability on long-form content.

4. Component Stylings

Buttons

Primary Button

Font: field-gothic-xcondensed, 24px, weight 400, line-height 20.568px
Padding: {spacing.md} {spacing.md} {spacing.md} {spacing.md} (16px 20px)
Background: {colors.primary} (#FD3A20)
Text: {colors.neutral-1} (#FFFFFF)
Border: none
Border Radius: {rounded.xs} (4px)
Height: 56px, Width: 210px
Box Shadow: none
Hover state: background #D63312 (darker red)

Primary Button Variant 2

Font: field-gothic-xcondensed, 24px, weight 600, line-height 36px
Padding: 10px 20px 10px 20px
Background: {colors.primary} (#FD3A20)
Text: {colors.canvas} (#F5F5F5)
Border: none
Border Radius: {rounded.xs} (4px)
Height: 56px, Width: 179px
Box Shadow: none
Hover state: background #D63312

Text Button

Font: trade-gothic-next, 14px, weight 400, line-height 18.004px
Padding: 0px
Background: transparent
Text: {colors.surface} (#3B3835)
Border: none
Border Radius: {rounded.none} (0px)
Height: 44px, Width: 189px
Box Shadow: none
Hover state: text decoration underline, text #FD3A20

Text Button Variant 2

Font: trade-gothic-next, 16px, weight 400, line-height 24px
Padding: 0px
Background: transparent
Text: {colors.surface} (#3B3835)
Border: none
Border Radius: {rounded.none} (0px)
Height: 44px, Width: 64px
Box Shadow: none
Hover state: opacity 0.8, transform translateX(3px)

Cards & Containers

Featured Card

Font: trade-gothic-next, 16px, weight 400, line-height 24px
Padding: {spacing.xxxl} (32px)
Background: {colors.surface} (#3B3835)
Text: {colors.canvas} (#F5F5F5)
Border: none
Border Radius: {rounded.xs} (4px)
Height: 240px, Width: 428.25px
Box Shadow: none
Hover state: filter brightness(1.04), box-shadow rgba(253, 58, 32, 0.5) 0px 4px 32px 0px, text #FD3A20

Default Card

Font: trade-gothic-next, 16px, weight 400, line-height 24px
Padding: 0px
Background: {colors.canvas} (#F5F5F5)
Text: {colors.surface} (#3B3835)
Border: none
Border Radius: {rounded.xs} (4px)
Height: 591.719px, Width: 646.5px
Box Shadow: none
Hover state: filter brightness(1.04), color #FD3A20, text-decoration underline

Small Card

Font: field-gothic-xcondensed, 48px, weight 600, line-height 39.984px
Padding: 0px
Background: transparent
Text: {colors.surface} (#3B3835)
Border: none
Border Radius: {rounded.none} (0px)
Height: 162.922px, Width: 373px
Box Shadow: none
Hover state: color #FD3A20, transform translateX(4px)

Inputs & Forms

Text Input

Font: trade-gothic-next, 16px, weight 400, line-height 24px
Border: 1px solid {colors.surface} (#3B3835)
Background: {colors.neutral-1} (#FFFFFF)
Text: {colors.surface} (#3B3835)
Border Radius: {rounded.none} (0px)
Padding: {spacing.md} (16px)
Focus state: outline 2px solid #FD3A20, border-color #3B3835

Navigation

Primary Navigation

Font: trade-gothic-next, 16px, weight 400, line-height 24px
Background: transparent
Text: {colors.surface} (#3B3835)
Border: none
Border Radius: {rounded.none} (0px)
Height: 100px, Width: 803px
Box Shadow: none
Link hover state: color #FD3A20, background transparent, outline 2px solid #FD3A20
Link active/current: background #F5F5F5, color #FD3A20

Badges

Primary Badge

Font: trade-gothic-next, 14px, weight 400, line-height 19.6px
Padding: {spacing.sm} (12px)
Background: {colors.primary} (#FD3A20)
Text: {colors.canvas} (#F5F5F5)
Border: none
Border Radius: {rounded.xs} (4px) on top, {rounded.none} (0px) on bottom
Height: 43.5938px, Width: 277.531px
Box Shadow: none

Footer

Footer Section

Font: trade-gothic-next, 16px, weight 400, line-height 24px
Padding: 68px 0px 72px 0px
Background: {colors.surface} (#3B3835)
Text: {colors.surface} (#3B3835)
Border: none
Border Radius: {rounded.none} (0px)
Height: 346px, Width: 1440px
Box Shadow: none

5. Layout Principles

Spacing System

Baker Roofing employs a precise 4px base unit with a 10-step scale:

{spacing.xxs} = 4px — Minimal gaps, internal padding on small components
{spacing.xs} = 8px — Tight spacing between adjacent elements
{spacing.sm} = 12px — Badge and small component padding
{spacing.md} = 16px — Standard component padding; primary body text margin
{spacing.lg} = 20px — Medium section margins; button padding
{spacing.xl} = 24px — Large heading spacing; featured card padding adjustment
{spacing.xxl} = 28px — Major content spacing; footer padding
{spacing.xxxl} = 32px — Large card padding; section internal spacing
{spacing.section} = 36px — Section margin; gap between major content blocks
{spacing.band} = 40px — Large band spacing; page section vertical rhythm

Usage Context:

Buttons and small components use {spacing.md} padding internally.
Featured cards employ {spacing.xxxl} for generous internal breathing room.
Section-level spacing progresses from {spacing.section} (36px) to {spacing.band} (40px) for visual hierarchy.

Grid & Container

Viewport	Content Column	Grid Columns	Section Padding-X
375px	335px	2	`{spacing.lg}` (20px)
768px	688px	2	`{spacing.band}` (40px)
1024px	880px	4	72px
1280px	1136px	5	72px
1440px	1296px	5	72px

The system uses a flexible multi-column grid that scales with viewport. Mobile layouts employ 2 columns with conservative padding; desktop transitions to 4–5 columns at 1024px and above. Maximum container width reaches 1296px at 1440px viewport, providing generous whitespace on ultra-wide displays.

Whitespace Philosophy

Whitespace is used strategically to frame content and create visual hierarchy rather than as decorative filler. Hero sections employ full-bleed imagery with dark overlays, focusing attention on text. Card-based layouts maintain generous internal padding ({spacing.xxxl}) to prevent visual crowding. Vertical spacing between major sections escalates from {spacing.section} to {spacing.band} to reinforce information structure. The system favours breathing room over density—text blocks, card groupings, and interactive elements are never packed tightly. This approach reflects the brand's professional, confident aesthetic: content matters, and it deserves space to be appreciated.

Border Radius Scale

{rounded.none} = 0px — Cards, overlays, and most container elements; sharp industrial aesthetic
{rounded.xs} = 4px — Buttons, badges, and interactive elements; subtle softening without compromising sharpness

The system is predominantly sharp-cornered, with minimal rounding reserved for interactive components (buttons, badges, inputs). This reinforces the industrial, architectural character of the brand.

Border Widths

Thin (1px) — Applied to dividers and light visual separators; used sparingly to maintain visual clarity without adding visual weight.

6. Depth & Elevation

Baker Roofing employs a color-blocking elevation strategy; depth comes from surface colour changes and strategic use of subtle shadows rather than a graduated shadow ladder.

Level	Treatment	Use
Base	No shadow; flat surface	Body backgrounds, default text
Overlay / Modal	`rgba(0, 0, 0, 0.25) 0px 20px 60px 0px`	Modal windows and high-priority overlays
Dropdown / Floating	`rgba(0, 0, 0, 0.08) 0px 14px 30px 0px`	Floating panels, dropdowns, hover-state cards
Navigation	`rgba(20, 18, 18, 0.08) 0px 2px 10px 0px`	Navigation header; subtle lift only

Shadow Philosophy: Shadows are used sparingly and never as the primary depth indicator. Instead, the system relies on semantic colour shifts (e.g., {colors.surface} for dark surfaces, {colors.canvas} for light surfaces) to establish spatial relationships. When shadows do appear, they are soft and diffuse, conveying subtlety rather than dramatic lift. Hover states employ brightness filters and slight shadows (rgba(253, 58, 32, 0.5) 0px 4px 32px 0px on featured cards) to suggest interactivity without disrupting the flat, industrial aesthetic.

Opacity Levels

40% opacity (0.40) — Subtle background overlays and disabled states
45% opacity (0.45) — Mid-tone overlays on hero imagery to ensure text legibility

These opacity levels are used exclusively in gradient overlays atop background imagery to preserve content contrast while maintaining visual impact.

Z-index / Layering

Base layers: 1, 2, 3 — Default document flow and stacking contexts
Dropdown / Floating elements: 10, 30, 40, 50 — Progressively layered popovers, tooltips, and floating panels
Sticky elements: 100 — Navigation headers and persistent UI elements that sit above all other content

7. Do's and Don'ts

Do

Use {colors.primary} (#FD3A20) intentionally and sparingly—reserve it for primary CTAs, hover states, and brand moments that demand attention.
Apply uppercase text treatment to all headings and labels for consistency with the brand's authoritative voice.
Employ generous padding on cards and containers ({spacing.xxxl}) to maintain visual breathing room and professionalism.
Layer dark gradient overlays on hero imagery to ensure text legibility and create visual depth.
Use {colors.surface} (#3B3835) for dark surfaces and {colors.canvas} (#F5F5F5) for light surfaces to establish clear hierarchy.
Employ the field-gothic-xcondensed font family for all display and heading roles to reinforce the industrial, geometric aesthetic.
Include hover states on interactive elements—shift colour to #FD3A20, apply brightness filters, or use transform (translateX) to signal interactivity.
Maintain consistent border-radius: {rounded.none} (0px) for most surfaces, {rounded.xs} (4px) for interactive elements only.
Use box shadows sparingly; prefer colour blocking and subtle opacity shifts for depth.
Scale typography and padding progressively across breakpoints to maintain proportion and readability.

Don't

Never use {colors.primary} as a background for body text or large content blocks; reserve it for focal interactive elements.
Avoid lowercase text in headings or call-to-action labels—the system is uppercase-forward.
Don't apply rounded corners to cards or container elements; maintain the sharp, industrial aesthetic.
Never stack shadows; the system uses at most one shadow level per component.
Avoid serif fonts outside of trade-gothic-next; field-gothic-xcondensed is the exclusive display font.
Don't abbreviate spacing values or mix units; maintain strict adherence to the 4px base scale.
Avoid low-contrast text combinations; always pair dark text ({colors.surface}) with light backgrounds or light text ({colors.canvas}) with dark backgrounds.
Don't apply opacity below 40% or exceed 45% on overlays; maintain legibility and visual clarity.
Avoid cluttering components with decorative elements; the system favours clean, purposeful design.
Never modify the line-height of display typography below 0.78 or above 1; maintain the compressed, dramatic aesthetic.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Grid Columns	Content Column	Largest Heading	Body Size	Key Changes
Mobile	375px	2	335px	58px	16px	Single-column layout; horizontal padding `{spacing.lg}` (20px); heading compression begins
Tablet	768px	2	688px	64px	16px	Modest content expansion; padding increases to `{spacing.band}` (40px); heading scales moderately
Landscape	1024px	4	880px	85px	16px	Multi-column grid; padding stabilizes at 72px; full heading hierarchy visible
Desktop	1280px	5	1136px	107px	16px	Extended column count; max-width constraints relax; largest headings approach full scale
Full HD	1440px	5	1296px	120px	16px	Maximum content width; all typography at full size; generous horizontal margins

Collapse Point: The navigation menu toggle remains visible across all breakpoints (375px–1440px), indicating persistent mobile-optimized navigation even on larger screens.

Touch Targets

Interactive elements (buttons, links, inputs) maintain a minimum height of 44–56px and width of 64–210px to ensure reliable touch activation on mobile devices. Buttons scale to 56px height across all breakpoints. Navigation links are spaced generously to prevent accidental mis-taps. Focus states include 2px solid outlines in #FD3A20 to provide clear keyboard navigation feedback.

Collapsing Strategy

Mobile (375–767px): 2-column grid, single-column content layout; horizontal padding reduces to {spacing.lg} (20px); typography scales down (58px largest heading); navigation collapses to menu toggle.
Tablet (768–1023px): 2-column grid persists; horizontal padding increases to {spacing.band} (40px); headings grow to 64px; content maintains narrow column.
Landscape (1024–1279px): 4-column grid activates; horizontal padding standardizes at 72px; headings expand to 85px; full multi-column layouts become viable.
Desktop & Beyond (1280px+): 5-column grid; content column reaches 1136–1296px; largest headings scale to 107–120px; horizontal margins stabilize; no further adjustments needed.

All elements maintain semantic padding and spacing values across breakpoints; absolute pixel adjustments are applied only to horizontal margins and column counts, preserving proportional rhythm.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA / Brand Accent: Primary (#FD3A20) — use for main call-to-action buttons, brand marks, active/hover states
Dark Surface / Text Container: Surface (#3B3835) — card backgrounds, primary heading text, footer surfaces
Light Surface / Neutral Background: Canvas (#F5F5F5) — default page background, light card surfaces, label text on dark backgrounds
Alternating Section Band: Surface Alt (#165051) — use sparingly to break up long pages; teal accent for visual rhythm
Body Text / Secondary Content: Body (#D0BA95) — warm taupe for body copy and secondary messaging on dark surfaces
Pure White / Decorative: Neutral-1 (#FFFFFF) — white text on dark surfaces, borders, decorative elements

Iteration Guide

Always uppercase display and heading text. All sizes from Display XL down to Heading SM use text-transform: uppercase. Body and button text follows label conventions (uppercase for labels, sentence case for body).
Apply negative letter-spacing only to display sizes (>48px). Display XL, XXL, LG, and MD employ tight tracking (-1.2px, -0.98px, -0.48px) to create visual compression. Body and button text use 0px or positive tracking (0.84px on labels).
Use field-gothic-xcondensed exclusively for display, headings, and quotes. trade-gothic-next is reserved for body, buttons, navigation, and form text. Never mix fonts within a single heading or content block.
Buttons are always primary or text variants. Primary buttons are 56px tall with {colors.primary} background and white text. Text buttons are link-styled with no background and hover state underline or colour shift to red.
Cards employ featured or default variants. Featured cards are dark ({colors.surface}) with light text and generous padding ({spacing.xxxl}). Default cards are light with dark text. Apply {rounded.xs} (4px) border-radius to all cards.
Hover states always shift to #FD3A20 or apply opacity/brightness filters. Links and text elements shift text colour. Cards apply filter: brightness(1.04) with optional box-shadow rgba(253, 58, 32, 0.5) 0px 4px 32px 0px. Buttons darken to #D63312 or apply filter: brightness(0.9).
Spacing follows the 4px scale strictly. All padding, margin, and gaps must use tokens from {spacing.xxs} (4px) through {spacing.band} (40px). Never use arbitrary px values.
Responsive padding adjusts only horizontal margins. Horizontal padding shifts from {spacing.lg} (20px) at 375px to {spacing.band} (40px) at 768px to 72px at 1024px and beyond. Vertical padding remains consistent across breakpoints.
No shadows on base surfaces. Shadows are reserved for modals, dropdowns, and hover states. Default surfaces are flat with no box-shadow. Use colour blocking (dark vs. light) for depth instead.
Focus states use 2px outlines in #FD3A20. All interactive elements (buttons, links, inputs) must include :focus-visible state with outline: 2px solid #FD3A20 for keyboard accessibility.

10. Known Gaps

Interaction states for disabled elements: The extraction captured :hover, :focus, and :focus-visible states for many components, but no explicit :disabled state styling is recorded. Implement disabled state as reduced opacity (0.4–0.45) or greyscale filter unless otherwise specified.
No semantic status colours: The site does not declare error, success, warning, or info colours in its markup or stylesheets. Only the primary brand red (#FD3A20) is available for interactive/highlight purposes. Add semantic status colours to this system if validation or feedback messaging is required.
1 extracted colour with no measurable role: {colors.neutral-1} (#FFFFFF) appeared in component measurements but has no semantic purpose beyond decorative use. It is pure white for borders and text overlays, not a designated role.
Typography for code/monospace elements not measured: The system does not include code block or monospace styling. If code display is needed, select an appropriate fallback (e.g., Courier New or Monaco) and pair it with the existing body text sizing.
No explicit focus ring or keyboard navigation styling: While focus states include outlines in #FD3A20, focus ring behaviour (thickness, dashing, animation) is not fully specified. Implement 2px solid outlines as a safe default.
Dark/Light mode not implemented: The extraction represents a single visual theme. No alternative dark or light mode is present in the live site or captured in this document.
Surfaces behind authentication not visited: The extraction analysed only public-facing pages. Private or account-restricted sections may employ different styling conventions not captured here.
Interaction performance states not extracted: Animated transitions, loading states, and skeleton screens are not recorded. Implement these patterns using the colour and spacing systems as guides.
Subtle animation or transform timing not measured: Hover states include transform: translateX(3px–4px) and filter: brightness() changes, but CSS transition timing (transition-duration, transition-timing-function) is not specified. Use standard web animation timing (e.g., 0.2s ease-out) as a reasonable default.

Document Version: 1.0 | Brand: Baker Roofing | Analysed Pages: 1 (public homepage) | Last Updated: 2025

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from bakerroofing.com

Primary

#FD3A20

Primary CTA, brand accent, active state

Neutral

#F5F5F5

Default page background; label colour on brand surfaces

#3B3835

Card / panel background; Headings / primary text

#165051

Alternating section band

#D0BA95

Body copy

#FFFFFF

Neutral

Typography · field-gothic-xcondensedGoogle Fonts

h198px · 600 · 76.048px

h2119.952px · 600 · 119.952px

h348px · 600 · 39.984px

quote63.936px · 600 · 57.5424px

display47.52px · 600 · 42.768px

display48px · 600 · 40.32px

display97.92px · 600 · 78.336px

display47.52px · 600 · 47.52px

display63.936px · 600 · 53.2587px

display97.92px · 400 · 75.9859px

body24px · 600 · 36px

display64px · 400 · 52.48px

heading28px · 400 · 23.996px

heading24px · 600 · 24px

body24px · 400 · 20.568px

Typography · trade-gothic-nextGoogle Fonts

body16px · 400 · 25.6px

link16px · 400 · 24px

button14px · 400 · 18.004px

body24px · 700 · 31.992px

body14px · 400 · 19.6px

body16px · 700 · 24px

heading28px · 700 · 32.2px

body15px · 700 · 24px

Spacing

4px

8px

12px

16px

20px

24px

28px

32px

Elevation

rgba(0, 0, 0, 0.25) 0px 20px 60px 0px

rgba(0, 0, 0, 0.08) 0px 14px 30px 0px

rgba(20, 18, 18, 0.08) 0px 2px 10px 0px

Components · 6

Remixes of bakerroofing.com

Latest remixes

No public remixes yet. Be the first to make one.

Remix it