Skip to content
DesignMunkDesignMunk Submit a site

Chief

chief.com
Chief exists to create more possibilities for women’s power.
Business Education Gatsby Homepage neue-haas-grotesk Romie
Share Visit site
chief.com DESKTOP · 1440
Chief

AI Breakdown

Design export

---
version: alpha
name: Chief
description: Chief exists to create more possibilities for women’s power.
colors:
  primary: "#f8ead5"
  secondary: "#d1b963"
  tertiary: "#dcf15b"
  neutral: "#0a0a0a"
  border: "#374151"
  brand-darkest-forest: "#1d340c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Romie
    fontSize: 68px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.003em
  headline-md:
    fontFamily: Romie
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: -0.003em
  headline-sm:
    fontFamily: Romie
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.003em
  headline-xs:
    fontFamily: Romie
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.09
    letterSpacing: 0.018em
  body-md:
    fontFamily: Neue Haas Grotesk
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.52
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 12px
  sm: 20px
  md: 36px
  lg: 50px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#111e04"
    rounded: "{rounded.full}"
    padding: 20px 30px 19px
    height: 43px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 20px 30px 19px
    height: 43px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Chief: Dark Editorial Luxury With Citrus CTAs

## Overview

Chief's UI is dark, editorial, and confident. It serves senior women leaders, so the tone is premium and restrained rather than playful. Type carries hierarchy; color is minimal with a single vibrant accent. Spacing is generous, producing calm sections and easy scanning on long-form content and proof blocks.

## Colors

- Primary (#f8ead5): Warm cream for all primary text on dark surfaces.
- Secondary (#d1b963): Antique gold used for subtle accents and secondary highlights.
- Tertiary (#dcf15b): Citrus accent for primary CTAs and emphasized words.
- Neutral (#0a0a0a): Near-black base for the dark mode surface and overlays.
- Border (#374151): Slate line for dividers, table rules, and card outlines.
- Brand-darkest-forest (#1d340c): Deep forest green for branded sections and rich overlays.
- Surface ({colors.neutral} → #0a0a0a): Default page background in dark mode.
- On-surface ({colors.primary} → #f8ead5): Default text color on dark surfaces.

## Typography

- Romie (headlines lg/md/sm/xs): Custom high-contrast serif for display copy (68/48/28/22px at 400). Not freely available to load. Substitutes: Fraunces (Google Fonts, variable optical sizes) for a warm high-contrast serif; Cormorant Garamond (Google Fonts) for delicate editorial forms; Canela (Commercial) for luxury display work.
- Neue Haas Grotesk (body-md 21px, 1.52): Custom Swiss grotesk for paragraphs, nav, and UI labels. Not freely available. Substitutes: Inter (Google Fonts) for neutral UI text; IBM Plex Sans (Google Fonts) for a slightly more characterful grotesk; Helvetica Neue (Commercial) when available in brand environments.
- Formale Grotesque (accent display): Custom condensed grotesque occasionally used for emphatic labels or numerals. Not freely available. Substitutes: Oswald (Google Fonts) or Anton (Google Fonts) for tight, impact display; Suisse Int'l Condensed (Commercial) for premium condensed use.
Use sentence case by default; reserve all-caps for small labels and condensed display moments.

## Layout

Spacing follows a roomy vertical rhythm: xs 12px for tight UI gaps, sm 20px for inline spacing, md 36px for block spacing, lg 50px for section internals, and xl 80px for section paddings. Build long pages as stacked, full-bleed sections on the neutral surface. Within sections, use 3- or 4-column grids for stats and feature decks; shift to a single column on mobile while preserving md (36px) between elements. Constrain text width to comfortable reading (~60–70ch) and let hero headlines run wider for impact.

## Elevation & Depth

Hierarchy is primarily tonal: cream text on near-black, with accent color for actions. Use the Border color (#374151) for quiet separation and rules. Shadows are subtle and sparing: sm for floating CTAs or dropdowns, md for modals, lg is rare and reserved for promotional overlays. Many components (cards, hero photo overlays) rely on contrast and whitespace rather than heavy elevation.

## Shapes

Two radii define the system: sm 8px for cards and panels, full 9999px for pills and chip-like controls. Buttons are always fully rounded; links stay square. Avoid mixing arbitrary radii—use 8px blocks against pill actions to keep the visual language consistent.

## Components

Buttons and cards are the primary building blocks.
- Button—Primary: Background #dcf15b, text #111e04, pill radius 9999px, height 43px, padding 20px 30px 19px. Use for "Apply" and membership CTAs.
- Button—Secondary: Text #f8ead5 on transparent/dark surface, pill radius 9999px, same padding and height. Use for low-emphasis actions.
- Button—Link: Text #f8ead5, square edges, no fill; reserve for inline actions.
- Card: Background #0a0a0a, text #f8ead5, 8px radius, 16px padding. Pair with a subtle border (#374151) or sm shadow when elevation is needed.

Distinctive components
### Announcement Bar
- Full-width strip above the header for research or news. Background stays on brand neutrals; link is underlined and uses on-surface (#f8ead5). Spacing: sm (20px) vertical.
### Global Header
- Left-aligned logotype, primary nav ("For Individuals/Companies", "About Us"), and right-aligned actions. "Log In" uses secondary style; "Apply" uses the primary button.
### Hero With Photo Overlay
- Darkened photography background with headline-lg (68px Romie) and body-md (21px). CTA uses Button—Primary. Optional inline emphasis sets a single word in #dcf15b.
### Stats Trio
- Three columns featuring headline-md numerals (48px Romie), labels in body-md. Separate columns with vertical rules in Border (#374151). Section padding: xl (80px) top/bottom.
### Pillars Grid
- Three feature blocks ("Private Clubhouses", "Core Groups & Coaching", "Vetted Community") shown as 8px-radius cards, 16px internal padding, optional icon, and a brief body line.
### Logo Rail
- Monochrome partner logos in a centered, evenly spaced row; use Border color for faint separators if needed. Maintain equal optical sizes across marks.
### Survey Metrics Grid
- Alternating percentage callouts (headline-md) with supporting copy (body-md). Use generous md (36px) gaps and keep all percentages aligned to a single baseline per row.
### Thought Leadership List
- Three article cards: image or color block, title in headline-xs (22px Romie), excerpt in body-md, and a link styled as Button—Link.
### Footer Sitemap
- Multi-column link groups with md (36px) vertical rhythm. Emails sit last with clear affordance and on-surface color.

## Do's and Don'ts

- Do reserve #dcf15b for primary CTAs and rare inline emphasis; overuse dilutes the premium tone.
- Do keep paragraph text at body-md 21px/1.52 for readability on dark backgrounds.
- Do separate stats or columns with the Border color (#374151) instead of heavy boxes.
- Don't mix additional radii; use 8px blocks and 9999px pills only.
- Don't place long runs of text directly over busy photography—dim images and keep copy on solid surfaces.
- Don't label the same action two different ways in a single view; align on "Apply" or "Become a member."

## Agent Prompt Guide

Quick color reference — Text: #f8ead5, Background: #0a0a0a, Border: #374151, Accent/Primary CTA: #dcf15b.

1) Build the hero
- Background: #0a0a0a over a darkened photo.
- Headline: "Lead on." set at 68px, weight 400, Fraunces (substitute for Romie), line-height 1, letter-spacing -0.003em, color #f8ead5 with the first word optionally #dcf15b.
- Body: Inter 21px/1.52, color #f8ead5.
- Button: 43px tall pill, padding 20px 30px 19px, background #dcf15b, text #111e04, radius 9999px.
- Section padding: 80px top and bottom.

2) Global header with actions
- Row height 80px on background #0a0a0a.
- Nav links: Inter 21px, color #f8ead5 with 20px gaps.
- Secondary button "Log In": text #f8ead5, pill radius 9999px, no fill.
- Primary button "Apply": as above (#dcf15b), placed right.

3) Three-stat band
- Container background #0a0a0a.
- Grid: 3 equal columns with 36px column gap; vertical dividers in #374151 at 1px.
- Numbers: Fraunces 48px/1.04, color #f8ead5.
- Labels: Inter 21px/1.52, color #f8ead5 at 80% opacity if available.
- Section padding: 80px top/bottom.

4) Pillars grid of features
- Three cards, background #0a0a0a, 8px radius, 16px internal padding, 36px gaps.
- Titles: Fraunces 28px/1, color #f8ead5.
- Copy: Inter 21px/1.52.
- Optional link styled as Button—Link (text #f8ead5, no radius).

5) Thought leadership list
- Three article cards with 8px radius.
- Titles: Fraunces 22px/1.09, color #f8ead5.
- Excerpts: Inter 21px/1.52.
- Use sm shadow for hover (rgba(50,50,93,0.1) 0 7px 14px 0).

## Similar Brands

- MasterClass — Dark editorial palette with a warm accent and premium serif; heavier media motion vs. Chief's quieter stat-led approach.
- Soho House — Membership-driven brand with restrained typography and luxe, moody photography; leans more hospitality than leadership.
- Ellevest — Women-focused finance brand using serif/sans pairing and controlled accents; more transactional and product UI than community.
- Cartier — High-contrast serif typography on dark backgrounds with gold accents; more opulent imagery and retail focus than Chief.

More like this

Browse Business →
livetheresidency.com
The Residency Business
The Residency
Live and grow with ambitious builders through 3-month residencies.
Homepage · 7 days ago
brilliant.org
Brilliant AI
Brilliant
A world-class tutor for every home
Homepage · 7 days ago
hannahsenesh.org
Hannah Senesh Education
Hannah Senesh
Live with conviction—open, inclusive Jewish day school for K-8.
Homepage · 7 days ago
inspire360.com
Inspire 360 AI
Inspire 360
Elevating the industry together
Homepage · 1 week ago