World 50 Group Design guidelines

Designing
for World 50

Everything you need to make something that looks like it belongs to World 50: the palette, the two typefaces, the spacing discipline, and the component rules that hold it together.

Version 2.0 · September 2026

01

Getting started

Two files. Everything else is a token or a component.

Link the stylesheet and you have the fonts, the full color palette, the type scale and the spacing tokens as CSS custom properties. Add the bundle and you have the React components used on this page.

Styles & tokens

<link rel="stylesheet" href="styles.css">

<h1 class="w50-display-1">Member pulse</h1>
<p style="color:var(--text-secondary)">Body copy</p>

Components

<script src="_ds_bundle.js"></script>
<script>
  const { Button, Card, Input } =
    window.World50DesignSystem_66dae4;
</script>
02

Principles

If a decision is ambiguous, these break the tie.

Editorial, not promotional

Near-black ink on white, condensed uppercase titles, hairline rules. It should read like a well-set print guideline, not a marketing page.

Blue is an event

One accent, used for the primary action and little else. If two things on a screen are Sky Blue, one of them is probably wrong.

Space over ornament

Wide gutters and generous leading do the work that borders, shadows and fills would do elsewhere. Let the page breathe.

Lines, not boxes

A 1px rule under a section header beats a gray panel. Cards are white with a hairline border and almost no shadow.

Photography carries the warmth

Candid, in-the-room images of members are the visual richness. No illustration, no 3D, no abstract gradients.

Respect the reader

The audience is a sitting C-suite executive. Short declarative sentences, sentence case, no hype words, no emoji.

03

Color

Monochrome core, one hero accent, semantics for status only.

Brand Black and White do most of the work. The warm-neutral ink ramp handles text, borders and fills. Sky Blue is the single accent. Semantic ramps are reserved for status and never used decoratively.

Monochrome core

Brand Black
--w50-black · #141413
Ink 900
--w50-ink-900 · #21201B
Ink 800
--w50-ink-800 · #45443F
Ink 700
--w50-ink-700 · #686764
Ink 500
--w50-ink-500 · #8C8B88
Ink 400
--w50-ink-400 · #AFAEAD
Ink 300
--w50-ink-300 · #D3D2D1
Ink 200
--w50-ink-200 · #EDEDED

Blues

Sky Blue — accent
--accent · #109EDA
Hover
--accent-hover · #177BBD
Pressed
--accent-pressed · #2158A1
Blue 300
--w50-blue-300 · #53B7E4
Ice Blue
--accent-soft · #DAE8F8
Blue 50
--w50-blue-50 · #F0F7FF
Deep Blue
--w50-blue-deep · #002393
Bright Blue
--w50-blue-bright · #36D6F9

Semantic — status only

Success
--success · #0C8D52
Warning
--warning · #C1840D
Danger
--danger · #C32F0B
Info
--info · #109EDA

Do

Default every surface to white. Use Ice Blue for the one tinted band (page header), and Sky Blue for the primary action, links, active states and focus rings.

Don't

Wash a section in saturated Sky Blue, introduce a second accent, tint body text, or use semantic colors for emphasis or decoration.

04

Typography

Oswald for display, Inter for everything else.

Display type is Oswald Regular, always uppercase, with tight leading. It is the brand's voice for page titles, section headers and big numbers. Everything functional — headings, body, data, labels — is Inter.

Display 1
Oswald 400 · 42px / 110%
.w50-display-1
Member pulse survey
Display 2
Oswald 400 · 36px / 116%
.w50-display-2
Secondary blues
H1
Inter 500 · 24px / 150%
.w50-h1
The pace of AI investment
H2 · Title LG
Inter 600 · 16px / 150%
.w50-h2
What members told us
H3 · Title SM
Inter 600 · 14px / 150%
.w50-h3
Three themes from the room
Body LG
Inter 400 · 16px / 150%
.w50-body-lg
Accelerating is the single most common answer at 34 percent, but slowing or stopping together account for 43 percent.
Body MD
Inter 400 · 14px / 150%
.w50-body-md
The default body size for product UI and long-form copy. Never go below 13px in an interface.
Caption
Inter 400 · 13px / 20px
.w50-caption
Source: World 50 Member Pulse Survey, September 2026; N=164 respondents
Label
Inter 600 · 11px · +0.04em
.w50-label
Confidential
05

Layout & spacing

4px base scale, wide gutters, hairline rules.

Spacing scale

--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-6 · 24px
--space-8 · 32px
--space-12 · 48px
--space-16 · 64px
--space-24 · 96px
page gutter · 75px

Radii

xs · 2px
checkbox, chips
md · 8px
cards, inputs
xl · 16px
large panels
pill · 999px
buttons, tags, avatars

Elevation

--shadow-xs
--shadow-sm
--shadow-md

Rules

  • Section header: 1px Brand Black rule above the title.
  • Divider: 0.5–1px neutral line — --border-subtle or --border-default.
  • Never a dark drop shadow or a heavy gray panel.
06

Components

Live specimens — these are the real components, not pictures of them.

Button

  • Pill shape at every size. Primary is Sky Blue with an ink label — not white — and a trailing arrow.
  • Hover puts an ink disc behind the arrow; press lightens the fill to --w50-blue-300.
  • Secondary is a Sky Blue outline on white; it turns ink on press. Use it beside a primary, never alone as the main action.
  • One primary per view. Ghost for tertiary actions, danger only for destructive ones.
  • Sizes: lg 54px, md 44px, sm 34px. Never below 44px for a touch target.
<Button variant="primary" size="lg">Request a seat</Button>
<Button variant="secondary">Cancel</Button>

Input

  • Label above the field, sentence case, 8px radius, hairline border.
  • Focus is the Sky Blue ring (--shadow-focus) — don't replace it with a color change alone.
  • Errors get a message, not just a red border. Helper text stays one line.
<Input label="Work email" placeholder="you@company.com"
       helperText="We never share this." />

Checkbox & switch

  • Checkbox is a 2px-radius square with a Sky Blue fill and white check.
  • Switch is a pill with a Sky Blue track when on. Use it for settings that apply immediately; use a checkbox inside a form that gets submitted.

Card

  • White surface, 1px neutral border, 8px radius, little or no shadow.
  • Accent card swaps the border to Sky Blue for a selected or highlighted item — one per group.
  • Interactive adds a small lift on hover; only for whole-card links.
<Card>…</Card>
<Card accent interactive padding={24}>…</Card>

Tag, badge, avatar

  • Tag is the uppercase pill label — topic, group, category. Keep it to one or two words.
  • Badge is for status only, and carries the semantic color with a leading dot.
  • Avatar is circular; initials fall back when there's no photograph. 40px default.

Divider & quote

  • Divider is the brand's signature separator. strong for a Brand Black section rule, default for a neutral hairline, label for a centered uppercase caption.
  • Quote is the editorial pull-quote: Sky Blue rounded border that opens at opposite corners. One per page — it loses its force repeated.

Tabs & icon button

  • Tabs are underlined with a Sky Blue active indicator. Labels are sentence case; counts sit after the label.
  • Icon buttons always carry an aria-label. Ghost in toolbars, outline when it needs to read as a control, solid round for a single add action.
07

Motion & states

Short, functional, ease-out. Nothing springs.
  • Duration: 120ms for color and opacity (--dur-fast), 200ms for movement (--dur-normal), 320ms only for entering panels.
  • Easing: --ease-standard for most things, --ease-out for entrances.
  • Hover: primary deepens or gains its arrow disc; ghost surfaces pick up a faint neutral tint; links underline. No scale-up.
  • Press: lighten or deepen the fill; an optional 1px nudge. Never a bounce.
  • Focus: the 3px Sky Blue ring, on every interactive element, always visible for keyboard users.
  • Disabled: muted fill with ink-900 or ink-400 text — still legible, never a 40%-opacity ghost.
  • No parallax, looping decoration, or animated illustration.

Icons

  • Thin single-weight line icons, 24×24 box, ~1.5px stroke, rounded joins, monochrome.
  • Lucide is the working set — a close match for the tool kit's Iconsax linear icons.
  • Never emoji as icons, and never mix the "50" bug into an icon row — it's a logo.
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<i data-lucide="search"></i>
<script>lucide.createIcons();</script>
08

Logo & photography

The mark is quiet; the photography is warm.

The mark

World Fifty Group logo The 50 bug
  • Use the wordmark for headers and documents; the bug for favicons, avatars and footers.
  • Clear space of at least the bug's height on all sides. Never crowd it with type.
  • Don't place the bug on saturated Sky Blue. White, Brand Black (reversed) or Ice Blue only.
  • Don't recolor, stretch, outline or add effects to either mark.

Photography

  • Candid over posed. Group shots beat solo portraits — look for interaction and reactions.
  • The best moments come from breaks and small-group sessions, and from members engaging with a unique venue.
  • Avoid projected slides, handheld mics, and clutter — water bottles, uncleared tables.
  • Feel: warm, natural light, in the room. Not corporate stock, not staged.
  • Treatment: full-bleed when the image carries the page; a legibility scrim only when type sits over it.
09

Token reference

Copy this block if you can't link the stylesheet.
:root{
  /* monochrome */
  --w50-black:#141413; --w50-white:#FFFFFF;
  --w50-ink-900:#21201B; --w50-ink-800:#45443F; --w50-ink-700:#686764;
  --w50-ink-500:#8C8B88; --w50-ink-400:#AFAEAD; --w50-ink-300:#D3D2D1; --w50-ink-200:#EDEDED;
  /* blues */
  --w50-blue-sky:#109EDA; --w50-blue-deep:#002393; --w50-blue-bright:#36D6F9; --w50-blue-ice:#DAE8F8;
  --w50-blue-50:#F0F7FF; --w50-blue-100:#9BEDFF; --w50-blue-200:#97CFEE;
  --w50-blue-300:#53B7E4; --w50-blue-500:#177BBD; --w50-blue-700:#2158A1;
  /* semantic */
  --success:#0C8D52; --warning:#C1840D; --danger:#C32F0B; --info:#109EDA;
  /* aliases */
  --text-primary:var(--w50-black); --text-secondary:var(--w50-ink-700); --text-tertiary:var(--w50-ink-500);
  --surface-page:var(--w50-white); --surface-header:var(--w50-blue-ice); --surface-sunken:var(--w50-ink-200);
  --border-strong:var(--w50-black); --border-default:var(--w50-ink-300); --border-subtle:var(--w50-ink-200);
  --accent:var(--w50-blue-sky); --accent-hover:var(--w50-blue-500); --accent-pressed:var(--w50-blue-700); --accent-soft:var(--w50-blue-ice);
  /* type */
  --font-display:"Oswald",Arial,sans-serif; --font-sans:"Inter",-apple-system,"Segoe UI",Arial,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --type-display-1-size:42px; --type-display-1-lh:1.1;
  --type-h1-size:24px; --type-body-md-size:14px; --type-caption-size:13px; --type-label-size:11px;
  /* space, radius, motion */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px; --space-page-gutter:75px;
  --radius-xs:2px; --radius-md:8px; --radius-xl:16px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(20,20,19,.08),0 1px 2px rgba(20,20,19,.04);
  --shadow-md:0 4px 12px rgba(20,20,19,.08),0 1px 3px rgba(20,20,19,.05);
  --shadow-focus:0 0 0 3px rgba(16,158,218,.35);
  --ease-standard:cubic-bezier(.2,0,0,1); --dur-fast:120ms; --dur-normal:200ms;
}

Fonts: Oswald 200–500 and Inter 300–700, both from Google Fonts. The full set of 132 tokens lives in tokens/colors.css, tokens/typography.css and tokens/spacing.css.