---
version: alpha
name: Designed by Women
description: Editorial activist minimalism — a near-black ink (#231f20) on white canvas, a single electric orange (#ff5000) as the load-bearing accent, the custom Lelo grotesque for everything and a heavier DBW display cut for headlines, with generous pill radii and an index-card directory aesthetic.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f5f5f5"
  ink: "#231f20"          # near-black warm ink — the brand's primary text color
  ink-pure: "#000000"

  # Signature accent
  primary: "#ff5000"      # electric orange — the load-bearing brand accent

  # Secondary accents (data / category coding)
  green: "#00a541"
  green-deep: "#00664f"
  red: "#d50032"
  coral: "#ff6a6a"
  lilac: "#bda1f3"
  amber: "#ec9730"
  purple: "#6200ee"

  # Interactive
  link: "#ff5000"
  focus-blue: "#007aff"

  # Neutral scale
  gray-700: "#666666"
  gray-500: "#999999"
  gray-300: "#c9c9c9"
  gray-200: "#dddddd"
  gray-100: "#efefef"
  gray-50: "#f3f3f3"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "DBW, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: 0px
  section-heading:
    fontFamily: "DBW, Helvetica, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: 0px
  card-title:
    fontFamily: "Lelo, Arial, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: 0px
  body-large:
    fontFamily: "Lelo, Arial, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Lelo, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-light:
    fontFamily: "Lelo, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.50
    letterSpacing: 0px
  ui-label:
    fontFamily: "Lelo, Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.30
    letterSpacing: 0px
  caption:
    fontFamily: "Lelo, Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0px
  micro-label:
    fontFamily: "Lelo, Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.30
    letterSpacing: 2px
  mono:
    fontFamily: "monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 3px
  sm: 4px
  md: 6px
  lg: 10px
  xl: 15px
  2xl: 70px
  3xl: 110px
  pill: 9999px
  circle: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.ui-label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.ui-label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.ui-label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.micro-label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  badge-neutral:
    backgroundColor: "{colors.gray-100}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 10px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.gray-100}"

  card-feature:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    rounded: "{rounded.xl}"
    padding: 24px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 12px 16px
    borderColor: "{colors.gray-200}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 12px 16px
    borderColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.ui-label}"
    padding: 16px 24px
    borderColor: "{colors.gray-100}"

  avatar:
    backgroundColor: "{colors.gray-100}"
    rounded: "{rounded.circle}"
    width: 48px
    height: 48px

  tag-chip:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.gray-200}"
---

# Designed by Women Design System

## Overview

Designed by Women is a directory and archive celebrating the work of women and non-binary designers, and its visual language reads exactly like that mission: an editorial, activist minimalism that lets the work speak while the chrome stays out of the way. The canvas is pure white (`{colors.background}`) carrying a warm near-black ink (`{colors.ink}`) — not a cold `#000000`, but `#231f20`, a hair softer, which gives long lists of names and projects a print-directory warmth rather than screen harshness. Against this restrained ground, a single electric orange (`{colors.primary}`) does almost all of the expressive work: it marks links, active states, primary buttons, and the brand's own identity.

Typography is the system's spine. Everything runs on **Lelo**, a custom humanist grotesque used at three weights (300 light, 400 regular, 700 bold), while a heavier display cut named **DBW** handles the largest headlines. This is a two-typeface system where one family does the talking and the other shouts — there is no serif body, no decorative script, just confident sans-serif type at generous sizes. The pairing keeps the index/directory feel: clean, legible, repeatable across hundreds of entries.

What gives the system its character beyond the monochrome-plus-orange base is its shape vocabulary. Radii run from a tight `3px` on small functional elements up to dramatic pill and capsule values (`70px`, `110px`, full pill) on buttons, tags, and feature blocks — the soft, rounded "sticker" geometry that signals friendliness and contemporary editorial confidence. A secondary palette of category-coding colors (green `{colors.green}`, red `{colors.red}`, coral, lilac, amber) appears sparingly to differentiate data, never as decorative noise.

**Key Characteristics:**
- Warm near-black ink (`{colors.ink}` = `#231f20`) on pure white — directory warmth, not screen-black harshness
- A single electric orange (`{colors.primary}` = `#ff5000`) carries links, primary actions, and brand identity
- Custom **Lelo** grotesque across the whole system at weights 300 / 400 / 700; heavier **DBW** cut for display headlines
- Generous pill and capsule radii (`70px`, `110px`, full pill) sit alongside tight `3px` functional corners
- Secondary accent set (green, red, coral, lilac, amber) used only for category/data coding
- Index-card / archive aesthetic — clean rows, repeatable cards, minimal chrome
- Circular avatars for the people-driven directory

## Colors

### Primary
- **Warm Ink** (`{colors.ink}`): Primary text, headings, dark buttons. A softened near-black (`#231f20`).
- **White** (`{colors.background}`): Page background, card surfaces, text on dark.
- **Electric Orange** (`{colors.primary}`): The signature accent — links, primary CTAs, active states, brand identity.

### Secondary Accents (category / data coding)
- **Green** (`{colors.green}`): Positive / category coding.
- **Deep Green** (`{colors.green-deep}`): Darker category variant.
- **Red** (`{colors.red}`): Alert / category coding.
- **Coral** (`{colors.coral}`): Soft accent variant.
- **Lilac** (`{colors.lilac}`): Soft category accent.
- **Amber** (`{colors.amber}`): Warm category accent.
- **Purple** (`{colors.purple}`): Occasional highlight.

### Interactive
- **Link** (`{colors.link}`): Orange links, matching the brand accent.
- **Focus Blue** (`{colors.focus-blue}`): System focus ring on interactive elements.

### Neutral Scale
- **Gray 700** (`{colors.gray-700}`): Secondary text.
- **Gray 500** (`{colors.gray-500}`): Muted / placeholder text.
- **Gray 300** (`{colors.gray-300}`): Hairline dividers.
- **Gray 200** (`{colors.gray-200}`): Input borders, outlines.
- **Gray 100** (`{colors.gray-100}`): Card borders, subtle fills.
- **Gray 50** (`{colors.gray-50}`): Subtle surface tint.

## Typography

### Font Family
- **Display**: `DBW`, with fallbacks `Helvetica, Arial, sans-serif` — the heavier headline cut.
- **Primary**: `Lelo`, with fallbacks `Arial, Helvetica, sans-serif` — the humanist grotesque used for everything else.
- **Monospace**: `monospace` for occasional technical/code labels.
- **Weights**: 300 (light), 400 (regular), 700 (bold). No middle weights — the contrast is deliberately binary.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | Largest DBW headlines — hero/billboard |
| `section-heading` | DBW section titles (30px) |
| `card-title` | Directory entry / card titles |
| `body-large` | Intros, lead paragraphs |
| `body` | Standard reading text |
| `body-light` | Lighter-weight supporting copy (300) |
| `ui-label` | Buttons, nav, bold labels |
| `caption` | Metadata, tags, fine print |
| `micro-label` | Uppercase tracked labels (2px letter-spacing) |
| `mono` | Technical/code labels |

### Principles
- **One family, one job**: Lelo carries the entire interface; DBW only appears at headline scale. No serif, no script.
- **Binary weight contrast**: 700 for emphasis and labels, 400 for reading, 300 for soft supporting copy — nothing in between.
- **Tracking is restrained**: letter-spacing stays at 0 everywhere except the small uppercase `micro-label` (2px), which earns its spacing.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is roughly 8px, with generous jumps (`{spacing.2xl}` 40px, `{spacing.3xl}` 64px, `{spacing.4xl}` 96px) for editorial breathing room between archive sections.

### Grid & Container
- Centered content column with comfortable side margins
- Directory views as repeating card grids and clean index rows
- People entries use circular avatars in a consistent grid rhythm

### Whitespace Philosophy
- **Archive calm**: lots of white between entries so dense directory data stays scannable
- **Accent restraint**: orange appears in small, intentional doses against the white field
- **Repetition as structure**: separation comes from spacing and hairline `{colors.gray-300}` dividers, not heavy boxes

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved / flush edges |
| `xs` | 3px | Small functional elements, inline chips |
| `sm` | 4px | Tight controls |
| `md` | 6px | Small buttons, inputs |
| `lg` | 10px | Cards, inputs, default container radius |
| `xl` | 15px | Feature blocks |
| `2xl` | 70px | Large capsule buttons / blocks |
| `3xl` | 110px | Dramatic capsule containers |
| `pill` | 9999px | Buttons, tags, badges |
| `circle` | 50% | Avatars, icon buttons |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Orange fill, white text, full pill. The default CTA.
- **`button-dark`** — Ink fill, white text, full pill. Secondary emphasis.
- **`button-outline`** — White surface, ink text and border, full pill. Tertiary action.

### Badges & Tags
- **`badge`** — Orange pill with white uppercase `micro-label` text for brand-marked status.
- **`badge-neutral`** — Soft gray chip for quiet metadata.
- **`tag-chip`** — Outlined pill for filter/category tags.

### Cards
- **`card`** — White surface, hairline `{colors.gray-100}` border, `{rounded.lg}` corners. The directory entry unit.
- **`card-feature`** — Inverted ink surface with white text and larger radius for featured/highlight blocks.

### Inputs
- **`input`** — White surface, `{colors.gray-200}` border, `{rounded.lg}`. Focus deepens the border to `{colors.ink}`.

### Navigation
- **`nav-bar`** — White header, ink Lelo bold labels, hairline bottom border. Orange marks the active item.

### People
- **`avatar`** — Circular (`{rounded.circle}`) gray-filled placeholder, central to the people-driven directory.

## Do's and Don'ts

### Do
- Keep the canvas white and text in warm ink `{colors.ink}` (`#231f20`), not pure black
- Use orange `{colors.primary}` as the single load-bearing accent — links, primary actions, brand marks
- Run the whole interface on Lelo; reserve DBW for the largest headlines
- Use full pill / capsule radii on buttons and tags for the soft editorial feel
- Use the secondary palette only to code categories or data
- Let whitespace and hairline dividers do the separating

### Don't
- Don't introduce a serif or script face — this is a two-grotesque system
- Don't spread the secondary accents decoratively; they are for data coding
- Don't use pure `#000000` for body text — the warm `{colors.ink}` is intentional
- Don't add middle font weights — the 700 / 400 / 300 contrast is the identity
- Don't box every entry heavily; repetition and spacing carry the structure
- Don't let orange become a background wash — it works as a small, intentional accent

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Designed by Women. Brand names and trademarks belong to their respective owners.