Ron Anderson & Sons Ltd. Design System

Overview

Ron Anderson & Sons Ltd. presents a commanding digital presence rooted in industrial construction expertise. The design vocabulary speaks directly to its domain—prefabricated wood framing and concrete formwork—through an unapologetic dark-mode canvas dominated by a deep forest-green brand color ({colors.primary} at #045339). This is not a tentative accent; it's the foundation upon which every surface, from the near-black top navigation ({colors.surface-dark}) to the full-width hero band, is anchored.

The typographic architecture operates across three distinct voice layers. Gainsborough Sans commands attention at {typography.display-lg} scale (56.5344px) for headlines and value propositions, delivering an editorial weight that feels both established and contemporary. The navigation system deploys Omnes Pro in uppercase at 26.64px, creating clear wayfinding with an industrial-strength clarity that matches the brand's trade. Body copy rests in Clarkson—a humanist sans-serif at 22px—that balances approachability with professional authority.

Brand voltage concentrates in specific high-impact zones: the primary CTA button ({component.button-primary-inverse}), the bottom-hugging value proposition banner ({component.value-prop-banner}), and section headings rendered in the signature green against white card surfaces. The shape language is deliberately restrained—buttons are sharp-edged ({rounded.DEFAULT} at 0px), cards carry only subtle 4px rounding, and the overall geometry favors rectangular confidence over softness.

The imagery strategy leverages full-bleed construction-site photography—exposed framing, workers on elevated platforms, raw materials—as the hero's visual anchor, establishing immediate credibility before any text appears. A bottom banner in solid brand green then locks in the core service description ("THE SUPPLY AND INSTALL OF PREFAB WOOD FRAMING & CONCRETE FORMWORK") with maximum legibility.

Key Characteristics:

• Deep forest-green brand identity ({colors.primary} — #045339) serving as both canvas and action color
• Dark-mode-first design with near-black navigation bar ({colors.surface-dark} — #2a2829)
• Three-typeface system: Gainsborough Sans for displays, Omnes Pro for UI/navigation, Clarkson for body text
• Sharp-edged buttons and containers ({rounded.DEFAULT} — 0px radius) conveying industrial precision
• Uppercase navigation labels at 26.64px in Omnes Pro for authoritative wayfinding
• Full-bleed hero photography overlaid with white display type at 56.5344px
• Signature bottom banner carrying the core value proposition in reversed green-on-white treatment
• High contrast throughout: white on dark surfaces, black on light card surfaces, green for emphasis

Colors

Brand & Accent

• Primary ({colors.primary} — #045339): The foundational brand green used for the main canvas background, primary button fills, the bottom value proposition banner, and heading accents on light surfaces.
• Primary Hover ({colors.primary-hover} — #056646): Slightly lifted green variant for interactive hover states on primary-colored elements.
• Primary Active ({colors.primary-active} — #034030): Pressed/deeper state for primary actions when engaged.

Surface

• Canvas ({colors.canvas} — #045339): The default page-level background in the hero zone—deep forest green matching the primary brand color.
• Surface Dark ({colors.surface-dark} — #2a2829): Near-charcoal background for the top navigation bar, providing visual separation from the green canvas below.
• Surface Soft ({colors.surface-soft} — #ffffff): Pure white used for content cards, form backgrounds, and any light-mode content sections.
• Surface Neutral ({colors.surface-neutral} — #f7f7f7): Near-white neutral for subtle background variation within content areas.
• Surface Light ({colors.surface-light} — #fafafa): Lightest neutral surface for delicate background needs.
• Overlay Black ({colors.overlay-black} — rgba(0, 0, 0, 0.5)): Semi-transparent black for dimming overlays and modal backdrops.
• Overlay White ({colors.overlay-white} — rgba(255, 255, 255, 0.8)): Semi-transparent white for lightening effects on dark surfaces.

Text

• Ink ({colors.ink} — #ffffff): Primary text color on dark surfaces—used for navigation labels, hero headlines, and all copy appearing on {colors.canvas} or {colors.surface-dark}.
• Body ({colors.body} — #000000): Pure black text for content on light surfaces—card bodies, paragraphs within white sections.
• Muted ({colors.muted} — #e7e7e7): Light gray for secondary information on dark surfaces, providing hierarchy without competing with {colors.ink}.
• Muted Dim ({colors.muted-dim} — rgba(255, 255, 255, 0.35)): Heavily reduced-opacity white for tertiary elements like disabled states or decorative lines.
• Muted Subtle ({colors.muted-subtle} — rgba(255, 255, 255, 0.3)): Faintest white opacity for track backgrounds and minimal UI chrome.
• On Primary ({colors.on-primary} — #ffffff): White text guaranteed to satisfy contrast requirements atop {colors.primary} green surfaces.
• On Dark ({colors.on-dark} — #ffffff): White text for any dark-surface context.
• On Surface ({colors.on-surface} — #000000): Black text for light-surface contexts.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(255, 255, 255, 0.15)): Subtle white-tinted dividers for separating zones within dark surfaces without harshness.
• Border Input ({colors.border-input} — rgba(38, 38, 38, 0.9)): Dark translucent border for input fields and range controls.

Semantic

• Link ({colors.link} — #045339): Inline links inherit the primary green, maintaining brand consistency in interactive text.

Typography

Font Family

The system employs three distinct typefaces, each assigned to a specific functional role:

Gainsborough Sans (gainsborough-sans-9g32ww) serves as the display and headline face. It's a proprietary Squarespace font delivered via their CDN, characterized by elegant proportions and confident letterforms that command attention at large sizes. This face handles all H2 through H4 level headings, the hero display text, and the prominent value proposition banner copy. Its regular weight (400) is the only weight deployed—no bold variants appear in the system, allowing size alone to establish hierarchy.

Omnes Pro (omnes-pro) functions as the UI and navigation typeface. Available in weights 500 (medium) and 700 (bold) plus italics, it provides the uppercase navigation folder titles, button label text, caption-sized UI elements, and interactive component copy. Its geometric, slightly friendly character tempers the gravitas of Gainsborough Sans with approachable clarity.

Clarkson (Clarkson, Arial, sans-serif) is the workhorse body face. A humanist sans-serif with excellent readability at paragraph scale, it renders all body copy, descriptive text, and longer-form content at 22px. The fallback to Arial ensures graceful degradation if the webfont fails to load.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 56.5344px | 400 | 1.047 | 0.565344px | Maximum-impact hero headlines | | {typography.display-lg} | 56.5344px | 400 | 1.047 | 0.565344px | Section hero headlines, value prop banner | | {typography.title-md} | 30.2688px | 400 | 1.117 | 0.302688px | Major section headings (H3) | | {typography.title-sm} | 20.4192px | 400 | 1.144 | 0.204192px | Sub-section headings (H4), card titles | | {typography.body-lg} | 22px | 400 | 1.6 | 0 | Lead paragraphs, body copy on dark | | {typography.body-md} | 22px | 400 | 1.6 | 0 | Standard body copy | | {typography.body-sm} | 18px | 400 | 1.4 | 0 | Button text, secondary body | | {typography.nav-link} | 26.64px | 400 | 1.2 | 0 | Navigation folder titles (uppercase) | | {typography.button} | 18px | 400 | 1.25 | 0 | CTA button labels | | {typography.caption} | 14px | 500 | 1.4 | 0 | Small UI labels, metadata | | {typography.label} | 19.728px | 400 | 1.3 | 0 | Form labels, icon button text |

Principles

The typographic system trusts scale over weight as its primary hierarchy mechanism. Every heading—from {typography.display-lg} down to {typography.title-sm}—uses weight 400 exclusively. The dramatic size differential between the 56.5344px display faces and the 20.4192px sub-headings creates unmistakable visual stratification without resorting to heavy weights that would feel industrial-aggressive.

Letter-spacing expands proportionally with size: the largest display faces carry ~0.57px tracking, medium titles ~0.3px, and small titles ~0.2px. This slight opening of letterforms at display scales enhances legibility and imparts an editorial, premium quality to the headlines.

Uppercase is reserved strictly for navigation labels ({typography.nav-link}). No other text element in the system employs uppercase transformation—not even buttons or CTAs. This selective application makes the navigation feel like a distinct signposting system within the page, separate from content voice.

The line-height ratios compress as size increases: display text sits at ~1.05x (nearly flush), titles around 1.12-1.14x, and body copy opens to 1.6x for comfortable reading. This inverse relationship between size and leading is characteristic of well-calibrated editorial systems.

Note on Font Substitutes

Gainsborough Sans has no direct Google Fonts equivalent—it is a Squarespace-exclusive typeface. For open-source substitution, consider DM Serif Display for similar editorial character, or Playfair Display for a more widely-available serif alternative with comparable proportions. Define these as fallbacks in your CSS variable stack:

--font-display: 'gainsborough-sans-9g32ww', 'DM Serif Display', 'Georgia', serif;
--font-ui: 'omnes-pro', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Clarkson', 'Source Sans Pro', 'Arial', sans-serif;

Omnes Pro can be approximated by Montserrat (weights 500/700) for geometric similarity, or Nunito for a friendlier feel. Clarkson substitutes cleanly to Source Sans Pro or Open Sans.

Layout

Spacing System

• Base unit: The spacing vocabulary clusters around a modified 5px-ish grid with values at 2px, 3px, 5px, 10px, 13px, 15px, 18px, 20px, 24px, 36px, 43px, and 95px.
• Tokens: {spacing.xxs} (2px) for hairline gaps; {spacing.xs} (3px) for micro-adjustments; {spacing.sm} (5px) for tight internal spacing; {spacing.base-sm} (10px) for compact element margins; {spacing.md} (13px) for standard small gaps; {spacing.base-md} (15px) for comfortable inline spacing; {spacing.lg} (18px) for list item separation; {spacing.xl} (20px) for component internal padding; {spacing.xxl} (24px) for card-level padding; {spacing.section-sm} (36px) for minor section breaks; {spacing.section-md} (43px) for major vertical rhythm; {spacing.section-lg} (95px) for hero-to-content transitions.
• Section padding (vertical): {spacing.section-lg} (95px) — used between the hero image area and subsequent content bands; also applied as horizontal breathing room in the value proposition banner.
• Card internal padding: Components like {component.section-card} use {spacing.xxl} (24px) internally, or literal compound values like "24px" depending on context.
• Gutters: Navigation items space horizontally via auto-layout; content columns maintain approximately 24-36px gutters at desktop widths.

Grid & Container

• Max content width: 1440px for main, article, section, and header containers—the Squarespace template enforces this as the outer wrapper constraint.
• Editorial density: The layout favors full-bleed imagery (hero video/photo) with text overlays rather than constrained centered columns. Content sections below likely adopt a centered column with max-width around 800-900px for readable body copy.
• Grid behaviors: At desktop, the header spans full width with logo left-aligned, navigation center-distributed, and CTA right-flush. The hero occupies 100% viewport width. Content below follows a single-column or two-column editorial flow.
• Hero column splits: Text overlays sit in the lower third of the hero (the value proposition banner), spanning nearly full width, while the upper portion remains pure imagery.

Whitespace Philosophy

This system practices generous negative space within constrained bands. The dark surfaces absorb whitespace, making it felt rather than seen—the hero image breathes because it has no competing chrome above it (the nav overlays transparently). Within content cards on white backgrounds, 24px internal padding creates room for the 22px body text to breathe. It's not airy-minimal; it's industrial-deliberate—every gap exists to separate functional zones.

Header Architecture

┌──────────────────────────────────────────────────────────────────────┐
│ [RAS LOGO]     WHAT WE DO  OUR PROCESS  OUR PROJECTS  ABOUT US  [CTA]│ ← 1440px max, 80px h
│                ───nav-folder-titles (uppercase, 26.64px)───         │    bg: #2a2829
└──────────────────────────────────────────────────────────────────────┘
                    ↑ center-distributed nav items

The header uses a classic three-zone layout: brand mark left, navigation center, utility CTA right. The background is {colors.surface-dark} (#2a2829), creating a darker band than the green hero beneath. All navigation text is uppercase Omnes Pro in white ({colors.ink}).

Hero Section

┌──────────────────────────────────────────────────────────────────────┐
│                                                                      │
│                     [ FULL-BLEED VIDEO / IMAGE ]                      │
│                   Construction site photography                       │
│                         (100vw × ~70vh)                              │
│                                                                      │
├──────────────────────────────────────────────────────────────────────┤
│ [RAS LOGO]  THE SUPPLY AND INSTALL OF PREFAB WOOD FRAMING            │
│             & CONcrete FORMWORK                                       │
│                                                                      │ ← Value Prop Banner
│             bg: #045339 | text: #ffffff | 56.5344px Gainsborough     │   padding: 36px 24px
└──────────────────────────────────────────────────────────────────────┘

The hero is a two-part assembly: an upper full-viewport imagery zone (video or static photo showing construction work in progress), and a lower fixed banner in {colors.primary} green containing the RAS logo alongside the mission-critical value proposition in {typography.display-lg} white text.

Content Sections (Below Fold)

┌──────────────────────────────────────────────────────────────────────┐
│                                                                      │
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐       │
│  │  SECTION CARD   │  │  SECTION CARD   │  │  SECTION CARD   │       │
│  │  (white bg)     │  │  (white bg)     │  │  (white bg)     │       │
│  │  Title: Green   │  │  Title: Green   │  │  Title: Green   │       │
│  │  Body: Black    │  │  Body: Black    │  │  Body: Black    │       │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘       │
│                                                                      │
│              Centered column, ~900px max for body text               │
└──────────────────────────────────────────────────────────────────────┘

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, no border | Base surfaces ({colors.canvas}, {colors.surface-dark}) | | 1 (Subtle) | No visible elevation; relies on color contrast | Cards sitting on colored backgrounds | | 2 (Overlay) | Semi-transparent overlays ({colors.overlay-black}, {colors.overlay-white}) | Video player overlays, modal backdrops | | 3 (Input) | Slight border ({colors.border-input}) + rounded container | Range inputs, form controls |

The depth philosophy here is color-block layering, not shadow-based elevation. Because the dominant surfaces are already dark (green and charcoal), traditional drop shadows would be invisible or muddy. Instead, depth is achieved through:

• Value contrast: The near-black nav (#2a2829) sits perceptibly "above" the lighter green canvas (#045339)
• Opacity layering: Overlays at 50% and 80% transparency create z-index perception without shadows
• Full-bleed stacking: The hero image → overlay → text banner sequence creates natural forward progression
• Card lift: White cards on any background automatically advance visually due to luminance difference

No box-shadows were detected in the extracted CSS. The system is intentionally flat in the Material Design sense—depth comes from color relationships, not simulated lighting.

Decorative Depth

The hero video/image serves as the primary decorative depth element—a photographic plane that provides texture, environmental context (construction sites, framing structures, workers), and visual interest that no flat color could achieve. The value proposition banner overlapping the bottom edge of this imagery creates a hard-edge compositional break that feels architectural rather than soft.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Content cards, subtle container rounding | | {rounded.DEFAULT} | 0px | Buttons, navigation elements, primary CTAs—sharp industrial edges | | {rounded.md} | 8px | Input fields, range slider tracks | | {rounded.lg} | 26px | Range slider thumbs, highly-rounded UI elements | | {rounded.pill} / {rounded.full} | 9999px / 100% | Avatars, fully-rounded badges (if needed) |

The shape language is predominantly rectangular, reflecting the brand's domain: wood framing, concrete forms, structural engineering. Buttons have zero border radius ({rounded.DEFAULT}), projecting confidence and angular precision. Only functional UI elements (inputs, sliders) receive modest rounding for tactile affordance. Content cards carry a gentle 4px radius that prevents visual harshness without abandoning rectilinear character.

Photography Geometry

Hero images are full-bleed, uncropped to viewport width, with no border radius—they extend edge-to-edge. The aspect ratio is cinematic wide (~16:9 or wider), optimized for showcasing expansive construction scenes. No corner rounding is applied to photography anywhere in the system; images maintain sharp rectangular edges consistent with the industrial aesthetic.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & CTAs

{component.button-primary} — The primary call-to-action button, filled with {colors.primary} green and white text ({colors.on-primary}). Uses Omnes Pro at 18px weight 400 ({typography.button}), with substantial padding of 18px vertical × 36px horizontal ({spacing.button-padding-y} × {spacing.button-padding-x}). Sharp corners ({rounded.DEFAULT} — 0px). Appears in the top-right of the navigation bar as "SEND US YOUR TENDER INVITES". No border, no box-shadow. Transitions use {extensions.motion.transitions.background} for smooth state changes.

{component.button-primary-inverse} — Identical specification to {component.button-primary}, designated for contexts where the button sits on a non-standard background (light surfaces or imagery overlays). Same green fill, same dimensions, same type treatment.

{component.button-skip-content} — Accessibility skip-link button matching the primary button spec: green background, white text, 18px/36px padding. Positioned off-screen until focused, where it becomes visible for keyboard users navigating past the header.

{component.burger-menu-btn} — Mobile menu toggle button with transparent background, white icon/text at 19.728px ({typography.label}). Minimal padding of 1px × 6px. Contains hamburger/close icon SVG. Appears at smaller breakpoints when the navigation collapses.

Navigation

{component.top-nav} — The persistent header navigation bar spanning full width at 80px height ({height}). Background is {colors.surface-dark} (#2a2829)—darker than the hero green below, creating visual stratum separation. Contains the logo, navigation folders, and CTA.

{component.top-nav-logo} — The RAS wordmark/logo positioned at the far left of the nav bar. Transparent background, white rendering, approximately 48px × 80px hit area. Likely an inline SVG or optimized PNG.

{component.nav-folder-title} — Individual navigation menu items ("WHAT WE DO", "OUR PROCESS", "OUR PROJECTS", "ABOUT US"). Each is a button element with transparent background, white text in {typography.nav-link} (Omnes Pro, 26.64px, uppercase), and minimal vertical padding (2.664px). These are horizontally distributed in the nav bar's center zone. Text-transform is explicitly uppercase.

Hero & Banner Components

{component.hero-band} — The full-viewport hero section occupying the area above the fold. Background is {colors.canvas} (#045339) green, but typically overridden by the full-bleed video/image element. Contains no intrinsic padding—the imagery fills edge-to-edge.

{component.hero-video-container} — The media element (video tag or image) filling the hero zone. Black fallback background, contains the actual construction-site footage or photograph.

{component.hero-overlay-text} — Any text superimposed directly onto the hero imagery (if present beyond the banner). White text, display-scale typography, positioned absolutely over the media.

{component.hero-headline} — The primary hero message if rendered as text overlay rather than in the banner. Uses {typography.display-lg} (56.5344px Gainsborough Sans, white, 0.565344px tracking).

{component.value-prop-banner} — The signature bottom-fixed banner in solid {colors.primary} green spanning full width. Contains the RAS logo (left) and the value proposition headline (right): "THE SUPPLY AND INSTALL OF PREFAB WOOD FRAMING & CONCRETE FORMWORK". Text uses {typography.display-lg} in white ({colors.on-primary}). Padding of 36px vertical × 24px horizontal ({spacing.section-sm} × {spacing.xxl}). This is the most text-heavy branded element in the system.

{component.value-prop-banner-text} — The text node within the value prop banner, inheriting display-lg specs in white on green.

Content Cards

{component.section-card} — Standard content card with {colors.surface-soft} (white) background and {colors.body} (black) text. Rounded at {rounded.sm} (4px), padded at 24px ({spacing.xxl}). Body text inside uses {typography.body-md} (Clarkson, 22px). These cards likely appear in grid layouts below the hero for services, projects, or process steps.

{component.section-card-heading} — Card title element using {typography.title-sm} (20.4192px Gainsborough Sans) in {colors.primary} green. Creates visual anchor within each card.

{component.section-card-body} — Card body/description using {typography.body-lg} (Clarkson, 22px) in black ({colors.body}). Comfortable 1.6 line-height for readability.

Inputs & Forms

{component.input-range} — Range slider input control (likely for video scrubbing or image comparison). Background {colors.border-input} (dark semi-transparent), white text, {typography.label} sizing (19.728px), {rounded.md} (8px) corners, 10px horizontal padding.

{component.input-range-track} — The visible track portion of a range slider. Transparent background, faint white/rule color ({colors.muted-subtle}), highly rounded at {rounded.lg} (26px) for pill-shaped track appearance.

Structural Components

{component.footer} — Page footer area with {colors.canvas} green background and white text ({typography.body-sm}). Padding of 36px vertical × 24px horizontal. Contains copyright, links, and possibly secondary navigation.

{component.footer-logo} — RAS logo instance within the footer, rendered in white ({colors.on-primary}) against the green background.

{component.announcement-bar-dropzone} — Placeholder for an optional promotional/announcement strip between header and main content. Currently empty/transparent in the extracted markup.

{component.floating-cart} — E-commerce cart icon (hidden by default class). Present in markup but not visibly active—suggests latent commerce functionality.

Do's and Don'ts

Do

• Do use {colors.primary} (#045339) as both your canvas background and your primary action color—this dual-role usage is intentional to the brand's monolithic green identity.
• Do render all navigation labels in uppercase Omnes Pro at 26.64px ({typography.nav-link})—the all-caps treatment is exclusive to wayfinding and signals "this is how you move through the site."
• Do keep button border-radius at {rounded.DEFAULT} (0px) for primary CTAs—the sharp edges communicate industrial precision and differentiate from generic soft-UI patterns.
• Do reserve Gainsborough Sans ({typography.display-lg}, {typography.title-md}, {typography.title-sm}) exclusively for headings and display text; never deploy it for body copy or UI labels.
• Do apply {typography.body-md} (Clarkson, 22px) with 1.6 line-height for all paragraph content—this combination ensures accessibility and readability for the construction industry's audience.
• Do place the value proposition banner ({component.value-prop-banner}) at the bottom of the hero or as a persistent sticky element—the green-on-white reversal makes it the highest-contrast text block on the page.
• Do use full-bleed imagery (no margin, no radius, no shadow) for the hero photograph/video—let the construction-site visuals command the entire viewport width.
• Do limit border-radius to {rounded.sm} (4px) for content cards—any more rounding undermines the rectilinear, structural aesthetic.
• Do ensure white text on dark surfaces meets WCAG AA contrast ratio—{colors.ink} (#ffffff) on {colors.surface-dark} (#2a2829) and {colors.canvas} (#045339) both exceed 7:1.
• Do leverage the three-typeface hierarchy consistently: Gainsborough = headlines, Omnes Pro = interface, Clarkson = reading content.

Don't

• Don't introduce gradient backgrounds or rainbow treatments to any surface—the brand palette is intentionally flat, opaque, and single-hue per zone.
• Don't apply bold (weight 700) to Gainsborough Sans headings—all display text remains at weight 400; size carries the hierarchy, not weight.
• Don't add drop shadows to cards or buttons—the extracted CSS shows zero box-shadow usage; depth comes from color blocking and opacity, not simulated lighting.
• Don't use {colors.primary} green for body text on light surfaces—it's reserved for headings and interactive elements; body copy stays {colors.body} (black).
• Don't convert navigation labels to sentence case or title case—the uppercase convention is a deliberate branding signal tied to {typography.nav-link}.
• Don't expand the border-radius vocabulary beyond the defined tokens—{rounded.lg} (26px) is reserved specifically for range slider thumbs, not general UI rounding.
• Don't place light text ({colors.ink}) on {colors.surface-soft} (white)—always switch to {colors.body} (black) when the background flips to light mode.
• Don't pad buttons less than 18px vertically—the current {spacing.button-padding-y} ensures adequate touch/click targets for industrial-sector users who may have imprecise input devices on job sites.
• Don't omit the letter-spacing values from display typography—the 0.565344px tracking on {typography.display-lg} is essential to the editorial character.
• Don't treat the value prop banner as optional copy—it's the single most important text element communicating what RAS actually does; give it full {typography.display-lg} prominence.

Motion & Animation

Transition Tokens

--transition-all: all;
--transition-background: background 0.14s ease-in-out 0.14s, transform 0.14s ease-in-out;
--transition-padding: padding 0.14s ease-in-out;
--transition-opacity-fast: opacity 0.1s linear;
--transition-opacity-medium: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-opacity-slow: opacity 0.9s;

The motion system is deliberately restrained with a 140ms base duration ({extensions.motion.duration}). Transitions favor ease-in-out timing, creating a sense of mechanical precision appropriate to the construction domain—nothing bouncy, nothing theatrical.

Keyframe Animations

• fonts-loading — A system-level animation (likely from Squarespace's font-loading detection) that manages the flash-of-unstyled-text prevention during custom typeface loading.

Interaction Patterns

• Background/color transitions: Buttons and interactive surfaces shift background color over 140ms with a 140ms delay on the transform property, suggesting coordinated entrance animations.
• Padding morphing: Some expandable elements (possibly accordion sections or dropdown panels) animate their padding property over 140ms ease-in-out.
• Opacity fades: Multiple opacity transition durations exist (0.1s, 0.4s, 0.9s), indicating staggered reveal sequences for multi-element entrances—likely hero text blocks fading in sequentially.
• Font-load handling: The fonts-loading keyframe ensures Gainsborough Sans and Omnes Pro swap in smoothly without layout jitter when webfonts finish downloading.
• Video player controls: Range inputs suggest video scrubbing capability with styled track/thumb interactions.

No explicit scroll-triggered parallax or intersection-observer animations were detected in the extracted CSS—these may be handled by JavaScript libraries (Squarespace's built-in animation engine) rather than declarative CSS.

Imagery Style

• Photographic, documentary-style construction site imagery featuring exposed wood framing, concrete formwork, workers in safety gear, and building skeletons at various completion stages.
• Full-bleed, edge-to-edge composition with no frames, borders, or inset treatments—images occupy the entire hero viewport.
• Natural daylight lighting with authentic job-site conditions (no studio staging, no artificial perfection).
• Earthy, warm color temperature in photographs—wood browns, concrete grays, safety yellow/orange PPE, blue sky—creating organic contrast against the synthetic green brand color.
• Human scale inclusion—workers visible in frame provide scale reference for the massive structural elements, emphasizing the hands-on craft nature of the business.
• Mid-ground to aerial perspective shots that showcase the scope and complexity of prefab installation projects.
• No filters or heavy post-processing—imagery retains documentary authenticity, aligning with the "we actually build things" brand promise.
• Image-as-hero dominance—the photograph is the primary visual communication tool; text plays supporting role in the overlay/banner zone.
• Logo watermarking visible on construction materials in photos (RAS stamped on plywood sheathing) reinforces brand ownership of the work depicted.

Icon System

• Library: Custom SVG icons (Squarespace-native symbol definitions detected in the source markup).
• Specific icons observed: Cart/shopping icon (icon-cart), burger menu icon (three-line hamburger), close/X icon (for menu dismissal), and additional symbol definitions in the SVG sprite (paths present but not visually confirmed in the screenshot—likely social icons, arrow icons, or utility glyphs).
• Treatment: Stroke-based icons with currentColor fill inheritance (class icon--stroke icon--fill). Icons adapt to the text color of their parent container (white on dark surfaces, black/dark on light surfaces). Size appears to be in the 20-24px range based on surrounding element proportions.
• Alignment: Icons sit inline with adjacent text or function as standalone tappable targets with padding (the burger button uses 1px × 6px internal spacing).

Recommended Frontend Stack

- Framework:      Squarespace 7.1 (Fluid Engine) / Next.js (for rebuild)
- Styling:        Squarespace native CSS variables + custom CSS injection / Tailwind CSS v4
- Fonts:          Squarespace CDN-hosted (Gainsborough Sans, Omnes Pro) + system fallbacks
- Animation:      Squarespace built-in animation engine / Framer Motion (for rebuild)
- Icons:          Custom SVG sprite (inline symbols) / Lucide stroke icons
- Component lib:  Squarespace native blocks / Radix Primitives (for accessible nav/menu)

For a rebuild outside Squarespace, Next.js with Tailwind CSS would closely replicate the token-driven approach while enabling the precise 140ms transition timings and custom font loading orchestration observed in the original.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Nav collapses to burger menu; hero image scales to 100vw; value prop banner stacks logo above text; cards go single-column | | Tablet | 768px – 1024px | Navigation may show abbreviated items; two-column card grids possible; padding reduces moderately | | Desktop | 1024px – 1440px | Full navigation visible; three-column card layouts; max container width of 1440px active | | Wide | > 1440px | Container centers with auto margins; hero imagery may show more horizontal coverage |

Touch Targets

• {component.button-primary}: 18px × 36px internal padding plus inherent element height yields approximately 54–60px total height—exceeds WCAG AAA 44×44px minimum comfortably.
• {component.burger-menu-btn}: 1px × 6px padding suggests the icon itself is the target; recommend expanding to minimum 44×44px for mobile usability.
• {component.nav-folder-title}: Touch target height determined by font-size (26.64px) plus 2.664px padding—approximately 32px total, which falls short of 44px recommendation. Consider increasing padding on touch devices.
• {component.input-range}: Slider controls should be minimum 44px tall for reliable thumb interaction on tablets used at job sites.

Collapsing Strategy

• Navigation: The four folder titles ("WHAT WE DO", "OUR PROCESS", etc.) collapse into a {component.burger-menu-btn} trigger below ~1024px (or 768px depending on template settings), revealing a fullscreen or slide-out menu panel.
• Hero columns: The value proposition banner stacks vertically on mobile—logo above headline text—rather than maintaining the side-by-side desktop arrangement.
• Card grids: Multi-column card layouts reflow to single-column stacks, with each {component.section-card} taking full container width minus gutters.
• Typography scaling: Display text ({typography.display-lg} at 56.5344px) likely reduces 20–30% on mobile to prevent overflow; {typography.nav-link} at 26.64px definitely reduces for mobile nav menus.
• Button sizing: {component.button-primary} may reduce horizontal padding from 36px to 24px on narrow screens to prevent overflow.

Image Behavior

• Hero video/image: Maintains 100vw width at all breakpoints; height scales via object-fit cover to preserve composition without distortion. On mobile, the focal point likely shifts to emphasize foreground elements (workers, framing details) rather than expansive site views.
• Card imagery (if present): Would scale to 100% of card width, maintaining aspect ratio (likely 16:9 or 4:3) with {rounded.sm} corners preserved.
• Logo: The RAS wordmark likely reduces in max-width percentage on mobile to avoid consuming excessive horizontal space in the collapsed nav or stacked banner.

Iteration Guide

1. Build a landing page that closely mimics the design system in this DESIGN.md. Use Next.js with Tailwind CSS (or remain in Squarespace with custom CSS injection) as the implementation foundation.
2. Pull every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} paths. Never hard-code a value that has a token—for example, always reference {colors.primary} never write #045339 inline in component code.
3. Add state variants (-hover, -disabled, -focus) per your stack's conventions; the spec documents Default and Active/Pressed only. For {component.button-primary}, implement hover as a slight lighten toward {colors.primary-hover} and active as darken to {colors.primary-active}.
4. When adding a new component, decide first which sub-system it belongs to: hero/display components (full-bleed, green/white palette), content components (white cards, black/green text), or navigation/chrome (dark gray surface, uppercase labels).
5. Variants of an existing component live as separate frontmatter entries (button-primary-active, never nested objects). If you need a ghost/outlined button variant, create button-ghost as a new top-level key.
6. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically. Pay special attention to contrast warnings on {colors.muted-dim} and {colors.muted-subtle} which fall below AA thresholds by design.
7. When in doubt about emphasis: bigger type before bolder type (never exceed weight 400 on Gainsborough Sans), signature green surfaces before secondary colors, and full-bleed imagery before contained thumbnails.
8. Implement font-loading detection to match the fonts-loading keyframe behavior—swap to system fonts immediately, then upgrade to Gainsborough Sans/Omnes Pro/Clarkson once webfonts load, preventing layout shift.
9. Maintain the 140ms transition duration as a system-wide constant. If you need slower reveals for narrative effect (staggered text entrance), use the opacity-specific durations (0.4s, 0.9s) rather than extending the base transition token.
10. Test the value proposition banner at multiple viewport heights—it must remain visible above the fold or become sticky on scroll, as it carries the only explicit statement of what the company does.

Font Setup

Map the proprietary Squarspace fonts to production-ready sources:

/* Gainsborough Sans - Display Headlines */
@font-face {
  font-family: 'gainsborough-sans';
  src: url('https://file.squarespace-cdn.com/content/v2/namespaces/fonts/libraries/603d792c9b2ff375c0f46cb9/assets/e3ab944a-c588-48c1-a494-7d9bd7d4b7fd/font.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Omnes Pro - UI & Navigation (Adobe Fonts / Typekit) */
/* Weight 500 (Medium) */
@font-face {
  font-family: 'omnes-pro';
  src: url('https://use.typekit.net/af/09c03f/000000000000000077359bed/31/l?subset_id=2&fvd=n5&v=3') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Weight 700 (Bold) */
@font-face {
  font-family: 'omnes-pro';
  src: url('https://use.typekit.net/af/e23d3e/000000000000000077359c3e/31/l?subset_id=2&fvd=n7&v=3') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Clarkson - Body Text (system fallback chain) */
/* Clarkson is self-hosted or served via Squarspace; fall back to Source Sans Pro */
:root {
  --font-display: 'gainsborough-sans', 'DM Serif Display', Georgia, serif;
  --font-ui: 'omnes-pro', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Clarkson', 'Source Sans Pro', 'Arial', sans-serif;
}

Known Gaps

• Hover state styling: Per the no-hover policy, interactive hover states (background shifts, subtle lifts, underline appearances) were not extractable from the static screenshot and CSS snapshot. Implement hover states during development using {colors.primary-hover} as the guide for primary-button interactions.
• Loading skeletons/pending states: No skeleton loaders, spinners, or placeholder shimmer patterns were detected. Determine appropriate loading UX for video assets and dynamic content sections.
• Form validation states beyond focus: Only default and focus-like states for inputs were captured; error, warning, success, and disabled input styling require design decisions based on semantic colors ({colors.error}, {colors.success} if defined later).
• Dashboard/authenticated flows: The screenshot captures the public marketing landing page only. Client portal, project dashboard, tender submission forms, or account management surfaces were not available for analysis.
• Mobile navigation panel: The expanded mobile menu (triggered by {component.burger-menu-btn}) was not visible in the screenshot—its layout, animation direction (slide-from-right vs. fullscreen overlay), and item styling are undetermined.
• Secondary pages (What We Do, Our Process, Our Projects, About Us): Only the homepage hero zone was analyzed. Interior page layouts, unique component patterns, and sub-navigation states are unknown.
• E-commerce functionality: The presence of {component.floating-cart} in the DOM suggests latent store capability, but no product listing, cart, or checkout UI was visible for extraction.
• Accessibility annotations: ARIA labels, focus-visible ring styles, screen-reader-only text, and skip-link positioning (beyond the button existence) require implementation-time decisions.
• Print stylesheet: No print-optimized styles were evident; construction clients may want to print project specifications or company profiles.
• Internationalization/localization: The site appears English-only (Canadian construction sector). No RTL layout considerations or multi-language string patterns were detectable.