# Federal Group Design System

> High-contrast monochrome utility meeting expansive landscape photography, anchored by wide-set geometric headings and sharp-edged containers.

**Source:** https://federalgroup.com.au | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** Parent | **Related brands:** None captured

## TL;DR
Federal Group utilizes a strict monochrome foundation where pure black `#000000` text and UI elements sit on a stark white `#ffffff` canvas. The identity is defined by its typography: the custom heading face **Gustavo** provides a wide, geometric presence, while **Centra No2** handles body copy with high legibility. Layouts are characterized by generous 30px spacing increments and a total absence of rounded corners on primary containers (0px radius). Visual interest is derived entirely from full-width environmental photography rather than UI color or complex elevation.

## Signature DNA
1. **Geometric Monochrome** (The system relies on `#000000` and `#ffffff` exclusively for UI, using high contrast to frame content without decorative color. Seen on all pages.)
2. **Wide-Set Headings** (The use of **Gustavo** for headings creates a distinct horizontal rhythm that mirrors the expansive landscape photography used in heroes. Seen on homepage and about.)
3. **Sharp Edge Protocol** (A strict `0px` border radius on cards and sections creates a professional, architectural feel. Seen in card components and section dividers.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, button text, icons | 14 | 0.8 | computed_style |
| `{color.white}` | `#ffffff` | Page background, button borders | 5 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.gray.muted}` | `#808080` | Card shadows (decorative_only) | 2 | 0.4 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|------------|
| Gustavo | 400 | Primary Heading | Montserrat (Wide) | Proprietary |
| Centra No2 | 400 | Primary Body | Inter | Proprietary |
| system-ui | 400, 500 | Utility/Error Headings | Sans-serif | System |
| Arial | 400 | Secondary Body | Helvetica | Standard |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h1}` | 24px | 48px | normal | 500 | Error/Utility Heading | `h1.next-error-h1` |
| `{type.body.lg}` | 16px | 22.4px | normal | 400 | Main Body Prose | `p:nth-of-type(1)` |
| `{type.body.md}` | 16px | normal | normal | 400 | Badge/UI Text | `div.grecaptcha-badge` |
| `{type.h2.sm}` | 14px | 28px | normal | 400 | Section Subheads | `h2` |
| `{type.button.sm}` | 13px | normal | normal | 400 | Banner Controls | `button.PrimaryBanner` |
| `{type.nav.link}` | 16px | normal | normal | 400 | Main Navigation | `nav a` |
| `{type.footer.link}` | 14px | 28px | normal | 400 | Footer Links | `footer a` |
| `{type.caption}` | 13px | normal | normal | 400 | Small labels | `button` |

### Principles
1. **Heading Width:** Headings use Gustavo to maximize horizontal footprint, often spanning the full width of text columns.
2. **Vertical Rhythm:** Line heights for body text are consistently 1.4x to 1.5x the font size (e.g., 16px/22.4px).
3. **Achromatic Hierarchy:** Importance is signaled by font weight and size rather than color shifts.

## Spacing
**Base unit:** 15px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.sm}` | 15px | 3 |
| `{space.md}` | 30px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Cards, Sections, Inputs | 8 occurrences |
| `{radius.full}` | 50px | Decorative panels/Badges | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.card}` | `rgb(128, 128, 128) 0px 0px 5px 0px` | Content cards on pricing/about | pricing page |

## Components

### Tier 1: Foundational

#### Card
**Role:** Content grouping for pricing and about sections.
**Pages observed:** `/pricing`, `/about`
**Spec:** Background: `transparent` / Text: `#000000` / Border: `0px` / Radius: `2px` / Shadow: `rgb(128, 128, 128) 0px 0px 5px 0px`
**States observed:** Default: captured | Hover: not captured

#### Rounded Button (Utility)
**Role:** Carousel pagination or small utility actions.
**Pages observed:** `homepage`
**Spec:** Background: `transparent` / Text: `#000000` / Border: `1px solid #ffffff` / Radius: `50%` / Typography: `13px`
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Top Navigation
**Role:** Global site header.
**Pages observed:** All
**Spec:** Background: `#ffffff` / Text: `#000000` / Height: ~80px / Typography: `Centra No2 16px`
**States observed:** Default: captured | Active: not captured

#### Footer
**Role:** Global site footer.
**Pages observed:** All
**Spec:** Background: `#1a2b26` (Note: Dark green observed in screenshots, though tokens reflect `#000000` dominance) / Text: `#ffffff` / Typography: `14px`
**States observed:** Default: captured

## Layout
| Property | Value |
|------|-------|
| Max-width | 1200px |
| Section Gap | 60px (2x `{space.md}`) |
| Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger menu; hero images stack vertically. |
| Desktop | 1440px | Horizontal nav visible; multi-column card layouts. |

## Imagery & decoration
Federal Group relies on high-resolution, wide-angle photography of Tasmanian landscapes and hospitality interiors. UI decoration is minimal, limited to a single serif "F" brand mark used as a divider. It avoids illustrations, gradients, and bright UI accents.

## Do's
- Use `#000000` for all primary text on `#ffffff` backgrounds.
- Maintain `0px` border radius on all content containers.
- Use **Gustavo** for all primary page headings.
- Ensure 30px padding between grouped elements.
- Use full-bleed photography for hero sections.

## Don'ts
- **Wrong:** Using a sub-brand color (e.g., a casino red or hotel gold) as a primary background on the parent site. **Right:** Keep the canvas `#ffffff`. **Reason:** Parent brand must remain monochrome to act as a neutral container for sub-brands.
- Do not use rounded corners (`>2px`) on cards or buttons.
- Do not use drop shadows on text.
- Do not use Centra No2 for display headings.
- Do not introduce secondary accent colors in the UI.

## Similar brands
- Aman Resorts
- Hyatt (Corporate)
- Knight Frank
- Savills

## Quick start

### CSS Custom Properties
```css
:root {
  --fg-black: #000000;
  --fg-white: #ffffff;
  --fg-space-md: 30px;
  --fg-radius-none: 0px;
  --font-heading: "Gustavo", sans-serif;
  --font-body: "Centra No2", sans-serif;
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "primary": { "value": "#000000" },
    "background": { "value": "#ffffff" }
  },
  "size": {
    "spacing": {
      "medium": { "value": "30px" }
    }
  }
}
```

## Agent prompt examples
- "Create a hero section with a full-width background image, a sharp-edged `#ffffff` overlay card with `0px` radius, and a heading in Gustavo weight 400."
- "Design a 3-column grid of cards using `#000000` text, `16px` Centra No2 body font, and a subtle `5px` gray shadow."
- "Generate a navigation bar with a white background and black text links using 16px Centra No2 with 30px horizontal spacing."

## Known gaps
- Hover and Active states for buttons were not captured in the automated crawl.
- The specific hex code for the dark footer background (appearing dark green in screenshots) was not explicitly declared in the foundation tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|----------|--------------|
| Homepage | https://federalgroup.com.au | 1440x900 | 2026-06-06 |
| Pricing | https://federalgroup.com.au/pricing | 1440x900 | 2026-06-06 |
| About | https://federalgroup.com.au/about | 1440x900 | 2026-06-06 |