---
title: "Open Collective design system"
variant: extended
source: https://opencollective.com/
captured_at: 2026-10-12
theme: light
industry: nonprofit
generator: Design DNA (https://four.wiralomi.com/style/opencollective-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Open Collective · Design System

> Open, approachable finance for collective action.

**Theme:** light · **Industry:** nonprofit · **Source:** https://opencollective.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Open Collective pairs a clean, bright canvas with confident navy typography and approachable hand-drawn imagery. The homepage explains who the platform serves, introduces its stewardship, and uses impact statistics to reinforce trust.

## North star

Use generous white space, confident navy headlines, and human, transparent financial storytelling without letting decorative artwork overtake the content.

## Overview

The page is built on a near-white canvas, with deep navy reserved for the main headline and prominent pill-shaped calls to action. Dark slate and muted blue-gray carry navigation, body copy, and supporting labels, while pale gray-blue appears in the footer and restrained borders divide controls and cards. Inter provides a consistent, modern voice: a large, heavy, tightly tracked centered hero headline contrasts with calm, readable paragraphs and compact navigation. The layout uses generous vertical breathing room and centered content, then shifts into two audience cards, a stewardship introduction, a multi-column collective directory, and a softly tinted impact panel. The hero combines a finance-interface illustration with a human hand-drawn figure, adding warmth without disrupting the restrained palette. Hairline borders and rounded card edges define components; shadows are subtle rather than a defining visual effect. Colorful collective artwork and soft section textures are supporting content, not the core brand palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and background for the hero, stewardship content, and most section areas. |
| Harbor Slate | `#62748e` | `--color-harbor-slate` | neutral | Muted supporting copy and footer text, including secondary explanatory details. |
| Quiet Divider | `#e2e8f0` | `--color-quiet-divider` | semantic | Fine outlines around navigation, buttons, cards, and footer elements. |
| Collective Navy | `#0c2764` | `--color-collective-navy` | brand | Primary hero heading and filled pill CTAs, including the Sign Up control. |
| Slate Ink | `#1d293d` | `--color-slate-ink` | neutral | Navigation labels, links, and selected secondary headings. |
| Midnight Ink | `#0f172b` | `--color-midnight-ink` | neutral | Primary body text, footer headings, and dark text on outlined controls. |
| Graphite Blue | `#314158` | `--color-graphite-blue` | neutral | Supporting paragraph and heading text, providing softer contrast than the main ink. |
| Dusk Slate | `#45556c` | `--color-dusk-slate` | neutral | Secondary footer and explanatory text. |
| Cloud Blue | `#f1f5f9` | `--color-cloud-blue` | surface | Pale footer surface; a quiet tonal shift from the white content canvas. |
| Frost White | `#f8fafc` | `--color-frost-white` | surface | Light button text on navy CTAs and occasional pale text accents. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f1f5f9` (Cloud Blue) · `--color-text` → `#0f172b` (Midnight Ink) · `--color-text-muted` → `#62748e` (Harbor Slate) · `--color-text-subtle` → `#1d293d` (Slate Ink) · `--color-border` → `#e2e8f0` (Quiet Divider)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0f172b` | `#ffffff` | 17.83:1 | AAA |
| `#0f172b` | `#f1f5f9` | 16.28:1 | AAA |
| `#62748e` | `#ffffff` | 4.76:1 | AA |
| `#62748e` | `#f1f5f9` | 4.35:1 | AA-large |
| `#1d293d` | `#ffffff` | 14.62:1 | AAA |
| `#1d293d` | `#f1f5f9` | 13.34:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| inter | `--font-body` | webfont | 400, 500, 700, 600, 800 | Site-wide typeface for navigation, hero and section headings, body copy, links, buttons, and footer. | Inter |

- **inter:** Use heavy weights for the centered display headline, bold section headings, and regular-to-medium body and controls; sentence case, with tight tracking on display text.

### Type scale — Perfect Fourth (ratio ≈ 1.351, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 800 | 1 | -0.025em | — | inter | Oversized, tightly tracked hero headline treatment. |
| h1 | 60px | 700 | 1 | 0 | — | inter | Primary page headline and prominent top-level title. |
| h2 | 40px | 700 | 1.5 | 0 | — | inter | Centered section headings, including impact and audience sections. |
| h3 | 32px | 700 | 1.5 | 0 | — | inter | Card titles and supporting section-level headings. |
| h4 | 20px | 400 | 1.4 | 0 | — | inter | Smaller introductory or descriptive headings. |
| body | 16px | 400 | 1.63 | 0 | — | inter | Paragraphs describing the platform, collectives, and impact. |
| caption | 14px | 400 | 1.43 | 0 | — | inter | Compact supporting labels and footer details. |
| button | 16px | 500 | 1.5 | 0 | — | inter | Pill-shaped primary and secondary action labels. |
| nav | 16px | 500 | 1.5 | 0 | — | inter | Header navigation and utility links. |
| link | 32px | 700 | 1.5 | 0 | — | inter | Prominent bold editorial or stewardship links. |

OpenType features in use: `"calt", "rlig"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 16, 24, 30, 32, 40, 48, 64 px.
- Section rhythm 64px · element gap 8px · card padding 32px · max content width 1280px.

A comfortable, centered long-form homepage uses a measured maximum content width of 1280px and a 12-column-style rhythm expressed through single-column hero content, paired audience cards, three-column collective cards, and a three-column stats arrangement. Sections are separated by generous vertical space, with the hero headline and introduction centered. The footer becomes a multi-column utility area. Keep density low, align card content consistently, and let full-width section treatments frame narrower inner content.

## Shape & elevation

- Radius: button `9999px` · card `12px` · link `12px` · xs `12px` · sm `24px` · pill `9999px`
- Shadow `md` (card, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4p`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The overall interface is mostly flat, with thin gray-blue borders defining cards and controls. Rounded card corners and pill-shaped buttons soften the geometry. A measured medium shadow appears on some cards, but the page’s screenshot reads primarily through white space, borders, and tonal section treatments rather than strong elevation.

## Imagery

The hero pairs a product-interface illustration of financial activity with a hand-drawn person, mixing crisp UI details and soft, human linework. Collective cards use distinct organization artwork and logos; these images introduce brighter colors that belong to their subjects rather than the core brand palette. A softly textured blue section band and pale green impact treatment add restrained visual variation.

## Components

### Header navigation

Compact horizontal header with the Open Collective mark, centered navigation and search, plus a navy pill Sign Up action and an outlined Log In control.

### Hero introduction

Centered, heavy navy headline above concise centered body copy, followed by a large financial-interface illustration with a hand-drawn human figure.

### Audience choice cards

Two side-by-side audience cards on a softly textured band, each with a bold title, short descriptor, bullet points, and a navy pill CTA.

### Stewardship directory

Centered governance introduction followed by collective and organization cards, using image-led thumbnails, location labels, titles, and short descriptions.

### Impact panel

Softly tinted panel with a centered heading and six prominent metrics arranged in three columns across two rows.

### Footer

Pale footer surface with brand summary, language control, grouped platform and resource links, legal links, and compact social icons.

### Measured component styles

- **Primary button** (“Explore Organization Features”): background #0c2764 · text #f8fafc · radius 3.35544e+07px · padding 0px 32px · 500 16px inter
- **Secondary button** (“Log In”): transparent background · text #0f172b · border 1px solid #e2e8f0 · radius 3.35544e+07px · padding 0px 12px · 500 14px inter
- **Link** (“🇺🇸 United States Open Source Collectiv”): transparent background · text #0f172b · radius 12px · padding 24px · 400 16px inter
- **Card** (“Legally Incorporated For Foundations, No”): transparent background · text #0f172b · border 1px solid #e5e7eb · radius 12px · padding 32px · 400 16px inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Platform Solutions Resources Search Sign”): transparent background · text #0f172b · radius 0px · padding 0px · 400 16px inter

## Do

- Keep the main canvas white and leave generous breathing room around content.
- Use Collective Navy #0c2764 for key headings and primary pill CTAs.
- Use Inter consistently and reserve heavier weights for clear hierarchy.
- Center the hero and major section introductions.
- Use thin #e2e8f0 borders to define controls and cards.
- Treat bright artwork colors as illustration or organization-specific accents.

## Don't

- Do not add a strong gradient or dark page-wide background.
- Do not let decorative imagery compete with the hero message.
- Do not use heavy shadows as the primary way to separate sections.
- Do not turn the supporting copy into dense, tightly packed blocks.
- Do not mistake organization artwork colors for core brand colors.
- Do not replace rounded CTAs with sharp-cornered buttons.

## Agent prompt

Build a new Open Collective-style page with a bright, spacious canvas in Gallery White #ffffff and a clear, centered content hierarchy. Use Inter throughout, with a bold, prominent headline in Collective Navy #0c2764 and readable supporting text in Midnight Ink #0f172b or Harbor Slate #62748e. Keep navigation compact; use rounded navy pill CTAs with Frost White #f8fafc text, and outline secondary controls with Quiet Divider #e2e8f0. Organize content into generous sections with centered introductions, flexible card grids, and occasional pale Cloud Blue #f1f5f9 surfaces. Use approachable hand-drawn or product-interface illustrations sparingly, keeping any vivid colors within the imagery. Favor thin borders and restrained shadows over heavy elevation, and finish with a structured, light footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and introduction above a large finance-interface illustration. | Clear value proposition, Illustrative product preview | Large navy headline, Centered copy, Hand-drawn figure |
| 2 | comparison | Two audience cards side by side on a softly textured full-width band. | Audience self-selection, Compare organization types | Paired rounded cards, Bullet lists, Pill CTAs |
| 3 | feature-grid | Centered governance introduction followed by a multi-column set of organization cards. | Explain platform stewardship, Browse collective examples | Centered heading, Image-led cards, Location and title labels |
| 4 | stats | A centered heading above six metrics in a three-column, two-row panel. | Build credibility with metrics, Scan key outcomes | Soft tinted panel, Large bold numerals, Compact captions |
| 5 | footer | Brand and language controls alongside grouped links, followed by a slim social strip. | Browse site destinations, Change language | Pale footer surface, Multi-column link groups, Social icons |

## Source CSS custom properties (selected)

```css
--color-red-50: oklch(97.1% .013 17.38);
--color-red-100: oklch(93.6% .032 17.717);
--color-red-200: oklch(88.5% .062 18.334);
--color-red-300: oklch(80.8% .114 19.571);
--color-red-400: oklch(70.4% .191 22.216);
--color-red-500: oklch(63.7% .237 25.331);
--color-red-600: oklch(57.7% .245 27.325);
--color-red-700: oklch(50.5% .213 27.518);
--color-red-800: oklch(44.4% .177 26.899);
--color-red-900: oklch(39.6% .141 25.723);
--color-red-950: oklch(25.8% .092 26.042);
--color-orange-50: oklch(98% .016 73.684);
--color-orange-100: oklch(95.4% .038 75.164);
--color-orange-200: oklch(90.1% .076 70.697);
--color-orange-300: oklch(83.7% .128 66.29);
--color-orange-400: oklch(75% .183 55.934);
--color-orange-500: oklch(70.5% .213 47.604);
--color-orange-600: oklch(64.6% .222 41.116);
--color-orange-700: oklch(55.3% .195 38.402);
--color-orange-800: oklch(47% .157 37.304);
--color-orange-900: oklch(40.8% .123 38.172);
--color-orange-950: oklch(26.6% .079 36.259);
--color-amber-50: oklch(98.7% .022 95.277);
--color-amber-100: oklch(96.2% .059 95.617);
--color-amber-200: oklch(92.4% .12 95.746);
--color-amber-300: oklch(87.9% .169 91.605);
--color-amber-400: oklch(82.8% .189 84.429);
--color-amber-500: oklch(76.9% .188 70.08);
--color-amber-600: oklch(66.6% .179 58.318);
--color-amber-700: oklch(55.5% .163 48.998);
--color-amber-800: oklch(47.3% .137 46.201);
--color-amber-900: oklch(41.4% .112 45.904);
--color-amber-950: oklch(27.9% .077 45.635);
--color-yellow-50: oklch(98.7% .026 102.212);
--color-yellow-100: oklch(97.3% .071 103.193);
--color-yellow-200: oklch(94.5% .129 101.54);
--color-yellow-300: oklch(90.5% .182 98.111);
--color-yellow-400: oklch(85.2% .199 91.936);
--color-yellow-500: oklch(79.5% .184 86.047);
--color-yellow-600: oklch(68.1% .162 75.834);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/opencollective-com