# equals.com — Design Reference

## 1. Visual Theme & Atmosphere

Equals occupies the intersection of data utility and refined brand identity. The design communicates trustworthiness through a warm off-white canvas (`#FAF9F5`) rather than cold pure white — a subtle but meaningful choice that evokes paper and craft. The typographic system pairs a condensed serif (**Serrif Condensed**) for display with **Unica77** (a Swiss grotesque) for body, creating tension between editorial warmth and functional clarity.

The color system is rich and named — Orchid, Glacier, Peach, Amber — suggesting a brand that took care to name its palette. This is a product that knows who it is.

## 2. Color Palette & Roles

| Role | Value | Notes |
|------|-------|-------|
| Background | `#FAF9F5` (--brand-grey-1) | Warm off-white, not pure white |
| Primary text | `#000000` (--brand-black) | Maximum contrast |
| White | `#ffffff` (--brand-white) | Cards, surfaces |
| Accent — Amber/CTA | `rgb(240, 192, 0)` | Link hover, announcement banner |
| Accent — Orchid | `#B074CE` | Button variant, feature highlight |
| Accent — Purple | `#611848` | Brand secondary |
| Accent — Glacier | `#2DCBDC` | Feature accent |
| Accent — Green | `#20A277` | Success / data positive |
| Overlay tints | rgba(0,0,0, 0.05–0.15) | Subtle UI layers |

**What's absent:** No dark mode. The palette is intentionally warm and light — the product is for daytime knowledge workers.

## 3. Typography Rules

Four fonts are registered as CSS custom properties, each assigned a clear role:

| Element | Family | Size | Weight | Notes |
|---------|--------|------|--------|-------|
| H1 | Serrif Condensed | 110px | 400 | −2.2px tracking, 100% line height |
| H2 | Serrif Condensed | 48px | 400 | Tight line height (50px) |
| H3 | Serrif Condensed | 40px | 400 | — |
| H4 / Labels | Aeonik Fono | 14px | 400 | UPPERCASE, +0.28px tracking |
| Body | Unica77 | 18px | 400 | 24px line height, slight negative tracking |
| Para | Unica77 | 14px | 400 | 20px line height |

Serrif Condensed at regular weight is an unusual choice — it gives headlines editorial authority without weight-based hierarchy. Unica77 grounds the body in modernist utility.

## 4. Component Stylings

- **Buttons:** Rounded (60px radius — fully pill-shaped), Orchid fill for primary, Amber for CTAs
- **Cards/surfaces:** Subtle off-white to near-white (`#FAF9F5` → `#FAFAFA`), no shadows detected
- **Labels/tags:** Uppercase Aeonik Fono, small caps style
- **Announcement banner:** Full-width Amber (`rgb(240,192,0)`) strip
- **Dividers:** Light gray (`rgb(237,237,237)`) for UI separation
- **No hard borders** — separation achieved through background tints

## 5. Layout Principles

- Wide layout with breakpoints at 700, 1100, 1280px
- Max content width likely ~1100px centered
- Section rhythm driven by generous vertical spacing
- No CSS grid system detected — possibly custom flexbox layout
- Headline scale is proportional — 110px at desktop, proportionally reduced at 700px breakpoint

## 6. Depth & Elevation

No box shadows detected. Elevation is created through background color stepping:
- Canvas: `#FAF9F5` (warm off-white)
- Cards: `#FAFAFA` (near-white)
- Dividers: `rgb(237,237,237)`
- Overlay tints: `rgba(0,0,0,0.05–0.15)`

This creates a "paper stack" feel without any drop shadow theatrics.

## 7. Do's and Don'ts

**Do:**
- Use the warm off-white (`#FAF9F5`) as the canvas — never pure white
- Pair Serrif Condensed display with Unica77 body copy
- Use pill-shaped buttons (60px border-radius) for primary actions
- Reserve Orchid and Amber as accents — use sparingly
- Use Aeonik Fono uppercase for small labels and section markers

**Don't:**
- Add decorative shadows — this is a flat, layered system
- Use more than one accent color per component
- Set body copy in the display serif — it belongs only at headline scale
- Mix the warm background with pure white surfaces in the same view

## 8. Responsive Behavior

- Three primary breakpoints: 700px (tablet), 1100px (narrow desktop), 1280px (full)
- Headlines scale down but Serrif Condensed remains the display face
- Layout narrows to single column at mobile breakpoints
- Pill button shapes are preserved at all sizes

## 9. Agent Prompt Guide

> "Design in the style of equals.com: warm off-white canvas (`#FAF9F5`), not pure white. Display type in Serrif Condensed (or condensed serif) at regular weight — large scale, no bold. Body in a Swiss grotesque (Unica77 or Helvetica Neue). Accent palette with named brand colors (amber yellow for CTAs, muted orchid purple for secondary). Pill-shaped buttons. No shadows — depth through background stepping only."

---

*Generated by Sparkbites — extracted from live CSS analysis*