Skip to content
DesignMunkDesignMunk Submit a site

Every

every.to
Build Faster With AI
AI Software Next.js Tailwind Blog Founders Grotesk Switzer
Share Visit site
every.to DESKTOP · 1440
Every

AI Breakdown

Design export

# Design brief: the Every design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/10170955/every-to-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/10170955/every-to-featured.webp
- On DesignMunk: https://designmunk.com/every/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Every: Literary Headlines on Deep Black with Aqua CTAs

## Overview

Every reads like a modern tech magazine in dark mode. The voice is literate and serious, with compact density balanced by generous hero imagery. The UI should feel confident, editorial, and calm—high contrast white on black with one aqua accent for actions. When in doubt, prefer tone shifts and whitespace over decoration.

## Colors

- **primary (#ffffff):** Core text and icons over dark surfaces.
- **secondary (#8c8c8c):** Secondary metadata, timestamps, and low-emphasis labels.
- **tertiary (#c0f0fb):** Accent for primary CTAs (e.g., Subscribe, Explore). Use sparingly.
- **neutral (#020202):** Base background; most sections sit on this near-black.
- **border (#e5e7eb):** Subtle dividers and hairlines on dark; keep at 1px.
- **surface ({colors.neutral} → #020202):** Section surfaces; same as base for continuity.
- **on-surface ({colors.primary} → #ffffff):** Text color atop surfaces and cards.

## Typography

- Headline-lg — Switzer 44px/1.2, 700. Used for major promos and section intros. Availability: custom/self-hosted. Substitutes: Inter (Google), Manrope (Google), Plus Jakarta Sans (Google).
- Headline-md — Signifier 34px/1.11, 400 with -0.058em tracking. Primary editorial headline style. Availability: custom/self-hosted. Substitutes: Playfair Display (Google), Spectral (Google), Cormorant Garamond (Google).
- Headline-sm — Signifier 26px/1.19 for smaller feature titles and callouts. Same availability and substitutes as above.
- Headline-xs — Switzer 20px/1.2 for subheads and list titles. Substitutes: Inter, Manrope, Plus Jakarta Sans.
- Body-md — Founders Grotesk 15px/1.4 for body, decks, and UI labels. Availability: custom/self-hosted. Substitutes: Work Sans (Google), Public Sans (Google), Space Grotesk (Google).
- Emoji — Noto Color Emoji (Google) for inline symbols when used in copy.

## Layout

- Spacing scale is tight and intentional: 10, 20, 34, 46, 72px. Build vertical rhythm from 20px (sm) and 34px (md); reserve 46–72px for section boundaries and hero wells.
- Cards use 14px internal padding, so nest content with 10–20px gaps to avoid crowding.
- Use a multi-column editorial grid: a wide content column for features, a narrower sidebar for lists, and stacked sections below. Gutters should be 20–34px.
- Keep headlines close to decks (10–20px) and place CTAs on the next step of the scale (20–34px) for scanability.

## Elevation & Depth

Depth is mostly tonal. Cards shift from #020202 to #111111 and gain a 10px radius to separate from the base. Hairline dividers use #e5e7eb at 1px. The only measured shadow is sm (subtle, soft) and should be reserved for overlays, dropdowns, or hover states where focus is critical; otherwise keep layers flat.

## Shapes

Two radii communicate function: 6px (controls) and 10px (containers). Buttons and inputs use 6px for a utilitarian feel; cards and tiles use 10px to read as modules. Avoid mixing radii on the same component.

## Components

- Button — Primary: #c0f0fb background, #000000 text, 6px radius, 12×16px padding, 51px fixed height. Use for actions you want noticed.
- Button — Secondary: #ffffff text on transparent/dark surface, 6px radius, 51px height. Ideal for "Read statements" or tertiary paths.
- Button — Link: Text-only, #ffffff, 0px radius. Use inline or in meta areas.
- Card: #111111 background, #ffffff text, 10px radius, 14px padding. Use for article promos and product tiles.

### Hero Thesis Banner
- Container on #020202. Headline uses Headline-lg (44px/700). Deck in Body-md (15px). Two CTAs: Primary (#c0f0fb) and Secondary (text only), spaced by 20px.

### Featured Article Hero
- Large image tile within a Card (10px radius). Title in Headline-md (34px, -0.058em). Deck in Body-md. Bottom actions follow Button styles.

### Recent Essays Rail
- Narrow column list. Section label in Headline-xs (20px). Each item stacks thumbnail, title, and author with 10–20px gaps and 1px #e5e7eb dividers.

### Product Suite Grid ("Built by Every")
- Grid of Cards (#111111) with product art, short description in Body-md, and a Primary "Try it" button. Gaps: 20–34px.

### Columnist Spotlight
- Compact bio block: avatar + text. Name in Headline-xs (20px), bio in Body-md, and a Link button for "Read more."

### Podcast Strip
- Episode cards as Cards with title in Headline-sm (26px) and meta in Body-md. Use the sm shadow on hover for affordance.

### Consulting Banner
- High-impact headline broken across lines in Headline-lg (44px/700). Single Primary CTA aligned right or below with 20–34px offset.

### Newsletter Signup
- Input with 6px radius next to a Primary button. Stack on small screens with 20px gap.

## Do's and Don'ts

- Do keep white text (#ffffff) on #020202 backgrounds and reserve #c0f0fb for primary CTAs only.
- Do use Signifier heads at 34px with the specified -0.058em tracking for editorial promos.
- Do space modules using the scale (20/34/46/72px) and keep card padding at 14px.
- Don't introduce heavy drop shadows; prefer #111111 cards and 1px #e5e7eb dividers.
- Don't mix radii on one component; controls 6px, containers 10px.
- Don't add extra accent colors; the single aqua is the brand signal.

## Agent Prompt Guide

Quick reference — Text: #ffffff, Background: #020202, Border: #e5e7eb (1px), Accent/Primary Button: #c0f0fb with 6px radius.

1) Build a hero promo matching Every's style
- Background: #020202.
- Headline: Inter 44px/1.2, weight 700 (Switzer substitute), color #ffffff.
- Deck: Work Sans 15px/1.4 (Founders Grotesk substitute), color #ffffff at 80–100%.
- Buttons: Primary — background #c0f0fb, text #000000, height 51px, radius 6px, padding 12px 16px. Secondary — text #ffffff, height 51px, radius 6px.
- Spacing: 20px between headline and deck; 20–34px between deck and CTAs.

2) Create a featured article card
- Container: #111111, radius 10px, padding 14px, optional sm shadow.
- Title: Playfair Display 34px/1.11, weight 400, letter-spacing -0.058em (Signifier substitute), color #ffffff.
- Deck: Work Sans 15px/1.4, color #ffffff.
- Actions: Primary button as above, aligned bottom-left with 20px top margin.

3) Build a "Recent Essays" sidebar list
- Column background: #020202. Section label: Inter 20px/1.2, color #ffffff.
- Each item: thumbnail + title stack with 10–20px gaps; title in Inter 20px/1.2; author in Work Sans 15px/1.4, color #8c8c8c.
- Divider: 1px solid #e5e7eb between items.

4) Assemble a product grid ("Built by Every")
- Grid gaps: 20–34px. Each tile is a #111111 card (radius 10px, padding 14px).
- Name: Playfair Display 26px/1.19, color #ffffff.
- Description: Work Sans 15px/1.4.
- CTA: Primary button (#c0f0fb, #000000 text, 51px height, radius 6px).

## Similar Brands

- WIRED: Bold editorial modules and strong typographic voice; WIRED skews brighter with more color accents, while Every stays minimal with one aqua.
- MIT Technology Review: Dark-mode magazine layouts and serious tone; Every runs denser lists and lighter ornamentation.
- The Verge: Card-driven homepage and a right-rail pattern; The Verge uses louder color palettes and heavier imagery.
- a16z (Future): Tech-editorial tone with serif headlines; Every is more compact and product-integrated.
- Stratechery: Minimal editorial framing; Every adds richer modules, podcast blocks, and product cards.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #8c8c8c;
  --color-tertiary: #c0f0fb;
  --color-neutral: #020202;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 44px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.2;
  --text-headline-md-size: 34px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.11;
  --text-headline-md-tracking: -0.058em;
  --text-headline-sm-size: 26px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.19;
  --text-headline-xs-size: 20px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.2;
  --text-body-md-size: 15px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.4;
  --font-switzer: "Switzer";
  --font-signifier: "Signifier";
  --font-founders-grotesk: "Founders Grotesk";

  /* Rounded */
  --radius-sm: 6px;
  --radius-md: 10px;

  /* Spacing */
  --spacing-xs: 10px;
  --spacing-sm: 20px;
  --spacing-md: 34px;
  --spacing-lg: 46px;
  --spacing-xl: 72px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #000000;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 12px 16px;
  --button-primary-height: 51px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 12px 16px;
  --button-secondary-height: 51px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #111111;
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 14px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #ffffff;
  --color-secondary: #8c8c8c;
  --color-tertiary: #c0f0fb;
  --color-neutral: #020202;
  --color-border: #e5e7eb;
  --color-surface: #020202;
  --color-on-surface: #ffffff;
  --font-headline-lg: "Switzer";
  --font-headline-md: "Signifier";
  --font-headline-sm: "Signifier";
  --font-headline-xs: "Switzer";
  --font-body-md: "Founders Grotesk";
  --text-headline-lg: 44px;
  --text-headline-md: 34px;
  --text-headline-sm: 26px;
  --text-headline-xs: 20px;
  --text-body-md: 15px;
  --tracking-headline-md: -0.058em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 6px;
  --radius-md: 10px;
  --spacing-xs: 10px;
  --spacing-sm: 20px;
  --spacing-md: 34px;
  --spacing-lg: 46px;
  --spacing-xl: 72px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.549,
                    0.549,
                    0.549
                ],
                "hex": "#8c8c8c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.753,
                    0.941,
                    0.984
                ],
                "hex": "#c0f0fb"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.008,
                    0.008,
                    0.008
                ],
                "hex": "#020202"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.008,
                    0.008,
                    0.008
                ],
                "hex": "#020202"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 34,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 46,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 72,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Switzer",
                "fontSize": {
                    "value": 44,
                    "unit": "px"
                },
                "fontWeight": 700
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Signifier",
                "fontSize": {
                    "value": 34,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.058,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Signifier",
                "fontSize": {
                    "value": 26,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Switzer",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Founders Grotesk",
                "fontSize": {
                    "value": 15,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Every**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
capsulecrm.com
Capsule Productivity
Capsule
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
gogallery.online
Gogallery Creative
Gogallery