Foundation

# Foundation — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by ZURB. "Foundation" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Foundation
**Owner:** ZURB
**Official documentation:** https://get.foundation/
**Visual character:** Responsive-web pioneer aesthetics: sturdy Helvetica, a dependable steel blue, and grid-first pragmatism from the ZURB years.

---

## Summary

The most advanced responsive front-end framework in the world.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Primary | `#1779ba` | `--foundation-primary` | Primary actions and links |
| Secondary | `#767676` | `--foundation-secondary` | Secondary actions |
| Success | `#3adb76` | `--foundation-success` | Success |
| Warning | `#ffae00` | `--foundation-warning` | Warnings |
| Alert | `#cc4b37` | `--foundation-alert` | Errors |
| Body Text | `#0a0a0a` | `--foundation-black` | Body text |
| White | `#fefefe` | `--foundation-white` | Surfaces |
| Medium Gray | `#cacaca` | `--foundation-medium-gray` | Borders |

## Typography

- **Body:** Helvetica Neue — weights 400, 600, 700 — `'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `48px` | `62px` |
| h2 | `40px` | `52px` |
| h3 | `31px` | `40px` |
| body | `16px` | `24px` |

## Spacing

Base unit: `16px (rem)`

Scale: `8px` · `16px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `3px` |

## Quick start (CSS)

```css
/* Foundation — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://get.foundation/ */

:root {
  /* Color */
  --foundation-primary: #1779ba; /* Primary actions and links */
  --foundation-secondary: #767676; /* Secondary actions */
  --foundation-success: #3adb76; /* Success */
  --foundation-warning: #ffae00; /* Warnings */
  --foundation-alert: #cc4b37; /* Errors */
  --foundation-black: #0a0a0a; /* Body text */
  --foundation-white: #fefefe; /* Surfaces */
  --foundation-medium-gray: #cacaca; /* Borders */

  /* Typography */
  --font-body: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;

  /* Type scale */
  --text-h1: 48px /* line-height 62px */;
  --text-h2: 40px /* line-height 52px */;
  --text-h3: 31px /* line-height 40px */;
  --text-body: 16px /* line-height 24px */;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;

  /* Radius */
  --radius-default: 3px;
}
```

## Engineering profile

- **Ships for:** CSS-only
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Foundation by ZURB — The most advanced responsive front-end framework in the world. Character: Responsive-web pioneer aesthetics: sturdy Helvetica, a dependable steel blue, and grid-first pragmatism from the ZURB years. Use a primary colour near #1779ba, the typeface "Helvetica Neue" (or a close equivalent), corner radius around 3px, a spacing rhythm on a 16px (rem) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Foundation documentation](https://get.foundation/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/foundation) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._