# Hudson Gavin Martin — Style Reference
> Architectural blueprint on white canvas.
**Theme:** light
Hudson Gavin Martin uses a structured, grid-based layout with strong black borders defining content areas. A minimal, formal typography set is contrasted by occasional bursts of subtle, tinted surface colors, creating a sense of organized professionalism with approachable accents. The overall feel is that of an architectural blueprint, where clean lines and precise boundaries dictate visual flow and hierarchy.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink Black | `#000000` | `--color-ink-black` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color |
| Cloud White | `#ffffff` | `--color-cloud-white` | Page backgrounds, primary card surfaces, ghost button backgrounds, default text in interactive elements |
| Carbon Gray | `#333333` | `--color-carbon-gray` | Secondary text, link borders, subtle decorative borders, section dividers |
| Ash Gray | `#797979` | `--color-ash-gray` | Muted text, metadata, subtle card borders |
| Sky Tint | `#ecf1fb` | `--color-sky-tint` | Subtle background for specific card sections, indicating thematic grouping |
| Rose Tint | `#fff3f5` | `--color-rose-tint` | Subtle background for specific card sections, indicating thematic grouping |
| Mint Tint | `#f1fbf6` | `--color-mint-tint` | Subtle background for specific card sections, indicating thematic grouping |
| Forest Green | `#00ac38` | `--color-forest-green` | Specific heading accent color, often paired with bold borders. Functions as a thematic identifier, not a primary interaction color |
## Tokens — Typography
### Arial — Arial — detected in extracted data but not described by AI · `--font-arial`
- **Weights:** 400, 700
- **Sizes:** 14px, 16px
- **Line height:** 1, 1.43
- **Role:** Arial — detected in extracted data but not described by AI
### Helvetica Neue LT Pro — Body text, small labels, button text, and compact headings. Provides a modern, utilitarian base. · `--font-helvetica-neue-lt-pro`
- **Substitute:** Helvetica Neue, Arial, sans-serif
- **Weights:** 400
- **Sizes:** 10px, 12px, 16px, 20px, 22px, 24px
- **Line height:** 1.00, 1.25, 1.45, 1.50, 1.67, 1.75
- **Letter spacing:** 0.033em (10px), 0.040em (12px), normal (16px), normal (over 16px)
- **Role:** Body text, small labels, button text, and compact headings. Provides a modern, utilitarian base.
### Helvetica Neue LT Pro — Bold headings, navigation, and large display text. The negative letter-spacing contributes to its compact, impactful appearance. · `--font-helvetica-neue-lt-pro`
- **Substitute:** Helvetica Neue, Arial, sans-serif
- **Weights:** 400
- **Sizes:** 16px, 18px, 22px, 30px, 50px, 90px, 100px
- **Line height:** 1.00, 1.08, 1.11, 1.25, 1.33
- **Letter spacing:** -0.018em
- **Role:** Bold headings, navigation, and large display text. The negative letter-spacing contributes to its compact, impactful appearance.
### Tiempos Headline Web — Primary marketing headlines. A serif font choice that adds a touch of classic authority and gravitas. · `--font-tiempos-headline-web`
- **Substitute:** Georgia, serif
- **Weights:** 400, 700
- **Sizes:** 26px, 50px, 60px
- **Line height:** 1.15, 1.24, 1.28
- **Letter spacing:** normal
- **Role:** Primary marketing headlines. A serif font choice that adds a touch of classic authority and gravitas.
### Tiempos Text Web — Long-form body text within cards, offering a contrasting, more traditional readability. · `--font-tiempos-text-web`
- **Substitute:** Georgia, serif
- **Weights:** 400
- **Sizes:** 18px
- **Line height:** 1.44
- **Letter spacing:** normal
- **Role:** Long-form body text within cards, offering a contrasting, more traditional readability.
### Helveticaneueltpro roman — Helveticaneueltpro roman — detected in extracted data but not described by AI · `--font-helveticaneueltpro-roman`
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.75
- **Role:** Helveticaneueltpro roman — detected in extracted data but not described by AI
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1 | 0.033px | `--text-caption` |
| body | 16px | 1.75 | — | `--text-body` |
| subheading | 18px | 1.44 | — | `--text-subheading` |
| heading-sm | 22px | 1.11 | -0.018px | `--text-heading-sm` |
| heading | 30px | 1.25 | -0.018px | `--text-heading` |
| heading-lg | 50px | 1.24 | — | `--text-heading-lg` |
| display | 90px | 1.08 | -0.018px | `--text-display` |
## Tokens — Spacing & Shapes
**Density:** comfortable
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 5 | 5px | `--spacing-5` |
| 6 | 6px | `--spacing-6` |
| 9 | 9px | `--spacing-9` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 15 | 15px | `--spacing-15` |
| 18 | 18px | `--spacing-18` |
| 20 | 20px | `--spacing-20` |
| 30 | 30px | `--spacing-30` |
| 40 | 40px | `--spacing-40` |
| 65 | 65px | `--spacing-65` |
| 100 | 100px | `--spacing-100` |
### Border Radius
| Element | Value |
|---------|-------|
| all | 0px |
### Layout
- **Section gap:** 40px
- **Card padding:** 30px
- **Element gap:** 6px
## Components
### Ghost Button
**Role:** Primary action button for key calls to action.
Text: Ink Black (#000000), Helvetica Neue LT Pro (400, 12px, 0.040em). Background: Cloud White (#ffffff). Border: 1px solid Ink Black (#000000). Padding: 9px vertical, 15px horizontal. Radius: 0px.
### Thematic Content Card
**Role:** Categorized content blocks with distinct background tints.
Background: Sky Tint (#ecf1fb), Rose Tint (#fff3f5), or Mint Tint (#f1fbf6). Border: 1px solid Ink Black (#000000). Padding: 65px top, 40px right, 30px bottom, 30px left. Radius: 0px. Text color: Ink Black (#000000).
### Standard Content Card
**Role:** General content blocks that fit into the grid.
Background: Cloud White (#ffffff). Border: 1px solid Ink Black (#000000). Padding: 65px top, 40px right, 30px bottom, 30px left. Radius: 0px. Text color: Ink Black (#000000).
### Text Link with Arrow
**Role:** Navigational links within content, guiding users to deeper information.
Text: Ink Black (#000000), Helvetica Neue LT Pro (400, 16px). Includes a right-pointing arrow icon often, implied by '→'.
### Header Navigation Link
**Role:** Main site navigation.
Text: Helvetica Neue LT Pro (400, 16px), Ink Black (#000000). Minimal styling, often 'MENU' in all caps, implying a dynamic dropdown or overlay.
## Do's and Don'ts
### Do
- Always define vertical and horizontal content separation with 1px solid Ink Black (#000000) borders.
- Use Tiempos Headline Web (400, 50px, normal letter-spacing, 1.24 lineHeight) for primary page-level headings to convey authority.
- Apply specific background tints (Sky Tint #ecf1fb, Rose Tint #fff3f5, Mint Tint #f1fbf6) to content cards to delineate thematic sections within the main grid.
- Ensure all interactive elements, including buttons and card links, have a border radius of 0px to maintain the sharp, architectural aesthetic.
- Employ Helvetica Neue LT Pro (400, 12px, 0.040em letter-spacing) for all compact labels and button text for legibility at small sizes.
- Maintain 6px as the default `elementGap` between small, inline elements to preserve density and visual grouping.
### Don't
- Avoid using rounded corners; the system strongly relies on a 0px border-radius across all components for its structured feel.
- Do not use drop shadows or elevation effects; the design emphasizes flat surfaces and defined borders for depth.
- Do not introduce new vibrant colors outside of the defined thematic accent and very limited brand green; the palette is intentionally restrained.
- Do not use generic system fonts when custom fonts are specified; font choices are critical to establishing the brand's formal yet modern tone.
- Avoid overly spacious layouts; the design prioritizes a comfortable but contained density, particularly with `elementGap` at 6px and `cardPadding` at 30px.
- Do not use filled buttons for primary actions; the system prefers ghost buttons with strong borders to maintain visual lightness and structure.
## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Cloud White Canvas | `#ffffff` | Primary page background, expansive white space for hero sections. |
| 1 | Cloud White Card | `#ffffff` | Default surface for content cards before thematic tints are applied. Defined by Ink Black borders. |
| 1 | Sky Tint Card | `#ecf1fb` | Thematic card background, providing subtle differentiation for content categories. |
| 1 | Rose Tint Card | `#fff3f5` | Thematic card background, providing subtle differentiation for content categories. |
| 1 | Mint Tint Card | `#f1fbf6` | Thematic card background, providing subtle differentiation for content categories. |
## Imagery
The site utilizes product-focused photography and graphic elements that emphasize conceptual clarity. Photography primarily features hands in symbolic gestures, often isolated against a clean white background, treated minimally without heavy effects. This imagery serves as conceptual metaphors rather than decorative elements. Icons are typically single-color (Ink Black) outlined, reflecting the overall minimalist and structured aesthetic. The density of imagery is balanced, providing visual breaks but remaining subservient to the strict grid and typographic hierarchy.
## Layout
The page adheres to a strong, box-model layout with both full-bleed and max-width sections typically framed by prominent Ink Black borders. The hero section often features a split layout: conceptual imagery on one side and a prominent headline stack with a ghost button on the other. Subsequent sections are highly grid-based, using 2- or 3-column arrangements for content cards and thematic blocks. Vertical rhythm is established through consistent section gaps and strong horizontal dividers. Navigation is minimal, typically a 'MENU' button in the top right that likely triggers an off-canvas or full-screen overlay.
## Agent Prompt Guide
Quick Color Reference:
text: #000000
background: #ffffff
border: #000000
accent: #00ac38
primary action: no distinct CTA color
Example Component Prompts:
1. Create a hero section with a Ghost Button: Full-width layout. Left side: image of hands gesture. Right side: stacked content. Headline: 'We get it, business is changing fast.' (Tiempos Headline Web, 50px, #000000, normal letter-spacing, 1.24 lineHeight). Body: 'Our corporate, commercial advisory and dispute resolution services help businesses of all sizes navigate...' (Helvetica Neue LT Pro, 16px, #000000, 1.75 lineHeight). Button: 'Meet the team' (Ghost Button: background #ffffff, text #000000, border 1px solid #000000, 0px radius, 9px 15px padding, Helvetica Neue LT Pro 400, 12px, 0.040em letter-spacing).
2. Create a 'Tech' Thematic Content Card: Background #fff3f5, border 1px solid #000000, 65px top, 40px right, 30px bottom, 30px left padding. Heading: 'Tech' (Helvetica Neue LT Pro bold, 50px, #000000, -0.018em letter-spacing, 1.08 lineHeight). Link: '→ TECH CAPABILITIES' (Text #000000, Helvetica Neue LT Pro 400, 16px).
## Similar Brands
- **AIGA Design** — Shares a strong grid-based layout with defined borders for content blocks and minimal color accents.
- **Dropbox Design** — Utilizes a clean, structured layout with a focus on clear typography and understated color use, often with subtle background tints.
- **Verge** — Known for extensive use of borders and a structured grid to delineate content, relying on strong lines rather than shadows for separation.
- **Pentagram** — Employs an architectural, often monochrome approach with robust typography and precise layout to convey professionalism.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-ink-black: #000000;
--color-cloud-white: #ffffff;
--color-carbon-gray: #333333;
--color-ash-gray: #797979;
--color-sky-tint: #ecf1fb;
--color-rose-tint: #fff3f5;
--color-mint-tint: #f1fbf6;
--color-forest-green: #00ac38;
/* Typography — Font Families */
--font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-helvetica-neue-lt-pro: 'Helvetica Neue LT Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-tiempos-headline-web: 'Tiempos Headline Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-tiempos-text-web: 'Tiempos Text Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-helveticaneueltpro-roman: 'Helveticaneueltpro roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 10px;
--leading-caption: 1;
--tracking-caption: 0.033px;
--text-body: 16px;
--leading-body: 1.75;
--text-subheading: 18px;
--leading-subheading: 1.44;
--text-heading-sm: 22px;
--leading-heading-sm: 1.11;
--tracking-heading-sm: -0.018px;
--text-heading: 30px;
--leading-heading: 1.25;
--tracking-heading: -0.018px;
--text-heading-lg: 50px;
--leading-heading-lg: 1.24;
--text-display: 90px;
--leading-display: 1.08;
--tracking-display: -0.018px;
/* Typography — Weights */
--font-weight-regular: 400;
--font-weight-bold: 700;
/* Spacing */
--spacing-4: 4px;
--spacing-5: 5px;
--spacing-6: 6px;
--spacing-9: 9px;
--spacing-10: 10px;
--spacing-12: 12px;
--spacing-15: 15px;
--spacing-18: 18px;
--spacing-20: 20px;
--spacing-30: 30px;
--spacing-40: 40px;
--spacing-65: 65px;
--spacing-100: 100px;
/* Layout */
--section-gap: 40px;
--card-padding: 30px;
--element-gap: 6px;
/* Named Radii */
--radius-all: 0px;
/* Surfaces */
--surface-cloud-white-canvas: #ffffff;
--surface-cloud-white-card: #ffffff;
--surface-sky-tint-card: #ecf1fb;
--surface-rose-tint-card: #fff3f5;
--surface-mint-tint-card: #f1fbf6;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-ink-black: #000000;
--color-cloud-white: #ffffff;
--color-carbon-gray: #333333;
--color-ash-gray: #797979;
--color-sky-tint: #ecf1fb;
--color-rose-tint: #fff3f5;
--color-mint-tint: #f1fbf6;
--color-forest-green: #00ac38;
/* Typography */
--font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-helvetica-neue-lt-pro: 'Helvetica Neue LT Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-tiempos-headline-web: 'Tiempos Headline Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-tiempos-text-web: 'Tiempos Text Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-helveticaneueltpro-roman: 'Helveticaneueltpro roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 10px;
--leading-caption: 1;
--tracking-caption: 0.033px;
--text-body: 16px;
--leading-body: 1.75;
--text-subheading: 18px;
--leading-subheading: 1.44;
--text-heading-sm: 22px;
--leading-heading-sm: 1.11;
--tracking-heading-sm: -0.018px;
--text-heading: 30px;
--leading-heading: 1.25;
--tracking-heading: -0.018px;
--text-heading-lg: 50px;
--leading-heading-lg: 1.24;
--text-display: 90px;
--leading-display: 1.08;
--tracking-display: -0.018px;
/* Spacing */
--spacing-4: 4px;
--spacing-5: 5px;
--spacing-6: 6px;
--spacing-9: 9px;
--spacing-10: 10px;
--spacing-12: 12px;
--spacing-15: 15px;
--spacing-18: 18px;
--spacing-20: 20px;
--spacing-30: 30px;
--spacing-40: 40px;
--spacing-65: 65px;
--spacing-100: 100px;
}
```
Black & White Blueprint: A stark,…
Architectural blueprints on…

Architectural Blueprint on White…
Architectural Blueprint Precision
gallery wall contrast
Architectural blueprint on warm…

Architectural blueprint on white…
digital-first canvas
Type Foundry Blueprint: precision…
organized content on frosted glass
Midnight Command Center: precise…
High-contrast precision blueprint.
Sculpted Minimalism on Canvas. An…
Architectural Blueprint on White…
High-contrast monochrome blueprint
Precise White Lab

High-contrast research tool; like…
Monochromatic architectural…

High-contrast geometric clarity

Frosted glass on crisp canvas