Logo

ArchitectFWD Brand & Style Guide

ArchitectFWD Brand & Style Guide

This document outlines the visual identity and design standards for the ArchitectFWD Strategic Advisory and its associated platforms (enterprise and prfrm).

1. Core Philosophy

  • Tone: Executive, sharp, and outcome-driven.
  • Vibe: Professional “Platform” aesthetic (SaaS-like) rather than a personal biography.
  • Key Logic: “Structure and Organization, assisted by AI.”

2. Color Palette (Slate & Blue-400)

We use a Slate-based light theme with a vibrant Blue-400 accent to mirror the prfrm and enterprise platform environments.

Variable HEX Usage
$brand-dark #ffffff Primary background color.
$brand-accent #60a5fa Primary action color (Blue-400), highlights, and active states.
$brand-text-main #0f172a Deep Slate-900 for headlines and primary body text.
$brand-text-sub #475569 Slate-600 for secondary text and sub-headlines.
$brand-card #f1f5f9 Slate-100 for panel backgrounds and pillar cards.
$brand-border #e2e8f0 Slate-200 for subtle dividers and card borders.

3. Typography

  • Font Family: San Francisco, Helvetica Neue, Arial.
  • Headlines (H1): 3.5rem on Desktop, 2.2rem on Mobile. Tracking (Letter-spacing) should be tightened to -0.03em for a modern UI feel.
  • Sub-headlines: Weight 700 (Bold) when used in the Hero section to ensure “pop.”

4. Components

The Hero Section

  • Background: Deep architectural imagery with a dark blue top-fade gradient: linear-gradient(to bottom, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0) 100%).
  • Text Logic:
    • First Sentence (H1): White (#ffffff).
    • Second Sentence (Subtext): Blue-400 ($brand-accent).
  • Alignment: Forced vertical and horizontal centering using Flexbox, overriding legacy SASS top: 50% positioning.

Pillar Cards

  • Background: $brand-card.
  • Behavior: Uses flex-direction: column with margin-top: auto on buttons to ensure that all buttons align at the bottom of the row, regardless of content length.
  • Interactivity: On hover, cards translate -10px on the Y-axis and shift border color to $brand-accent.

Buttons

| Style | Class | Appearance | | :— | :— | :— | | Primary | .button a | Solid $brand-accent background, White text. | | Ghost/Alt | .button.alt a | Transparent background, $brand-accent border and text. | | Pill/CTA | .a.highlight | Fully rounded (50px), used in navigation for “Get Started.” |

5. Header & Navigation

  • Layout: Fixed-height white header with a bottom border ($brand-border).
  • Logo: Original branding (no filters) centered vertically.
  • Links: Platform links (enterprise, prfrm) are styled as secondary buttons with subtle borders to distinguish them from standard page links.
  • Mobile: Nav-toggle (hamburger) icon uses $brand-accent. Buttons stack vertically and take full width for better “tapability.”
  • Background: $brand-card.
  • Social Icons: Monochromatic Slate-400 icons that transition to $brand-accent on hover.
  • Legal Line: Separated by a $brand-border top-margin, centering the trademark and policy links.

7. Technical Implementation Notes (SASS)

  • Variables: Always use variables from _sass/variables.scss to maintain theme integrity.
  • Flexbox: Use the %flexbox extendable placeholder for consistent cross-browser alignment.
  • Mobile-First: Ensure all containers use box-sizing: border-box to prevent horizontal overflow on mobile devices.
  • Legacy Overrides: When styling the Hero, use position: static !important on .hero-text to prevent conflict with the old Jekyll theme’s absolute positioning.

Updated: May 2026