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

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:

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