---
name: Firstandforemost
description: "This site is a great example of using a single, high-chroma color and massive typography to create a strong, memorable brand identity without visual clutter."
version: alpha

colors:
  background: "#FFF7F1"
  primary: "#FF4501"
  line: "rgba(255,69,1,1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 200px
    lineHeight: 0.8
    fontWeight: 900
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-0.5px"
  title:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 2.0
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 8px
  lg: 80px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A branding agency website that balances massive, impactful typography with warm, earthy tones and organic illustrations.

*A modern editorial layout for a design agency that values impact and nature.*

## Colors

A restrained, high-contrast palette using a single vibrant orange as the primary foreground color over a warm, soft off-white background, creating a natural and impactful look.

- **Background (`#FFF7F1`)** — uses `bg` token
- **Primary text (`#FF4501`)** — uses `ink` token
- **Borders (`rgba(255,69,1,1.0)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

## Layout

Single-column layout with a sticky header and full-width hero.

*Rhythm:* Generous vertical padding (160px) separates major sections, with tight internal spacing.

## Elevation & Depth

- rgba(153, 18, 2, 0.36) -32px 32px 80px 0px
- Borders: 1px solid rgba(255,69,1,1.0) for outlines and separators.

## Shapes

- `sm`: 0px
- `md`: 8px
- `lg`: 80px
- `pill`: 999px

## Components

- **button:** Simple text links with hover effects, no solid background buttons visible.
- **card:** No distinct cards visible; content is presented in open layouts.
- **chip:** No chips visible.
- **input:** No inputs visible.
- **hero:** Massive, oversized typography spanning the full viewport width, accompanied by an orange botanical illustration at the bottom.

## Do's and Don'ts

**Don't:**
- Don't use multiple competing colors — the palette is strictly orange and off-white.
- Don't use thin, delicate typography — the design relies on heavy, bold weights.
- Don't use standard grid layouts for everything — the hero breaks the grid with massive type.
- Don't use dark backgrounds — the site is strictly light with warm tones.
- Don't use complex, busy UI components — the design is minimal and open.
- Don't use small, cramped spacing — the layout uses generous whitespace and padding.

---

## System Prompt (paste into AI agent)

```
This website is for a branding agency called First and Foremost. It features a warm, off-white background (#FFF7F1) and a single, dominant vibrant orange (#FF4501) for all text and illustrations. The typography is a humanist sans-serif used at a massive scale, with the hero text reaching 200px. The layout is minimal and editorial, with generous padding between sections and a full-width hero. Key critical don'ts include: never use dark backgrounds, never use multiple competing colors, and never use thin, delicate typography. The overall feel is earthy, bold, and responsible.
```