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

# Contra · Design System

> A quiet canvas for standout creative work

**Theme:** light · **Industry:** design · **Source:** https://contra.com/?view=projects · **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._

Contra presents a creative talent marketplace through a bright, restrained interface that lets project imagery take center stage. A prompt-led hero, topic cards, category filters, and curated project feeds guide visitors from discovery toward hiring.

## North star

Keep the interface visually quiet and let the creators’ project imagery supply the color, character, and proof.

## Overview

The page is built on a white canvas, with a near-black wordmark and navigation establishing a crisp, high-contrast entry point. Most sections stay white; pale gray appears in compact chips and profile metadata rather than as broad alternating bands. Rounded dark buttons provide the main action contrast, while cool blue and violet accents are restrained and do not compete with the work imagery. GT Standard’s clean sans-serif forms keep headings, labels, and dense project metadata readable; the hierarchy is made through scale and weight, not decorative typography. A centered prompt-led hero opens into horizontal trending cards, then a sequence of compact project galleries with clear section titles and “View more” links. The page uses a broad desktop content area and four-column project grids, separated by generous vertical breathing room. Photography, motion previews, and graphic design mockups bring nearly all the color and texture, framed as a browsable creative feed.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the dominant background behind the hero, project sections, and footer. |
| Cloud Mist | `#f2f4f7` | `--color-cloud-mist` | surface | Soft fill for creator profile metadata and select subdued chips or controls. |
| Slate Ink | `#222834` | `--color-slate-ink` | brand | Dark fill and outline for primary pill buttons, plus dark MAX badges and inverse UI details. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Appears as a dark surface within challenge-media links and image-overlay content, not the page canvas. |
| Carbon Text | `#14171f` | `--color-carbon-text` | neutral | Primary heading, navigation, and body text color. |
| Soft Divider | `#e5e7eb` | `--color-soft-divider` | neutral | Light control and navigation borders; use as a subtle hairline rather than a section boundary. |
| Midnight Blue | `#030531` | `--color-midnight-blue` | accent | Opening dark stop in a measured gradient; treat as decorative media or graphic color, not a general page surface. |
| Deep Indigo | `#040527` | `--color-deep-indigo` | accent | Closing dark stop in a measured gradient used in decorative visual content. |
| Quiet Slate | `#677084` | `--color-quiet-slate` | neutral | Muted headings, helper text, and secondary labels such as the hero suggestion chips. |
| Ice Tint | `#cdf3fd` | `--color-ice-tint` | accent | Pale cyan stop in a measured accent gradient; reserve for decorative visual treatments. |
| Sky Signal | `#9ddef9` | `--color-sky-signal` | accent | Cool blue accent-gradient stop, not a dominant interface color in the screenshots. |
| Periwinkle Signal | `#979df1` | `--color-periwinkle-signal` | accent | Soft violet accent-gradient stop for restrained graphic effects. |
| Neutral Graphite | `#666666` | `--color-neutral-graphite` | neutral | Secondary measured border tone; use only for low-emphasis dividers where needed. |
| Cloud Border | `#d0d4dc` | `--color-cloud-border` | neutral | Fine border around a raised prompt card or other softly outlined panel. |
| Blue Charcoal | `#373f51` | `--color-blue-charcoal` | neutral | Supporting link, button, and text tone in secondary UI details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Pure Black) · `--color-surface-2` → `#f2f4f7` (Cloud Mist) · `--color-surface-3` → `#222834` (Slate Ink) · `--color-text` → `#14171f` (Carbon Text) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#677084` (Quiet Slate) · `--color-border` → `#222834` (Slate Ink) · `--color-accent` → `#9ddef9` (Sky Signal) · `--color-accent-2` → `#979df1` (Periwinkle Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#14171f` | `#ffffff` | 17.92:1 | AAA |
| `#14171f` | `#000000` | 1.17:1 | fail |
| `#14171f` | `#f2f4f7` | 16.26:1 | AAA |
| `#14171f` | `#222834` | 1.21:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#f2f4f7` | 1.1:1 | fail |
| `#ffffff` | `#222834` | 14.78:1 | AAA |
| `#677084` | `#ffffff` | 4.97:1 | AA |
| `#677084` | `#000000` | 4.23:1 | AA-large |
| `#677084` | `#f2f4f7` | 4.51:1 | AA |

### Gradients

- `linear-gradient(rgb(3, 5, 49) 52.16%, rgb(4, 5, 39) 66.55%)`
- `linear-gradient(90deg, rgb(205, 243, 253) 0%, rgb(157, 222, 249) 42.88%, rgb(151, 157, 241) 94.62%)`
- `linear-gradient(90deg, rgb(104, 106, 120), rgb(104, 106, 120)), radial-gradient(circle at 77.1393% 26.5847%, rgb(0, 240, 255) 0%, rgba(0, 0, 0, 0) 47.7402%), radial-gradient(circle at 49.7392% 21.7708%, rgb(250, 255, 0) `
- `radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.22))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT Standard M | `--font-body` | webfont | 500, 400, 600 | Primary family for navigation, body text, links, buttons, and captions. | Inter |
| GT Standard L | `--font-display` | webfont | 500, 600, 400 | Light display and heading family, with selective use for compact uppercase eyebrows. | Inter |

- **GT Standard M:** Use measured regular, medium, and semibold weights. Keep tracking close to neutral or slightly tight; sentence case is the norm.
- **GT Standard L:** Measured headings are moderate in weight with slight positive tracking; eyebrows are uppercase, strongly tracked, and very small.

### Type scale — Major Third (ratio ≈ 1.282, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 23px | 500 | 1.39 | 0.02em | — | GT Standard L | Centered hero headline, set larger than surrounding interface copy. |
| h2 | 19px | 400 | 1.47 | 0.02em | — | GT Standard L | Project and creator section headings, aligned to the left. |
| body | 14px | 500 | 1.43 | -0.01em | — | GT Standard M | Hero support copy, descriptions, and creator or project details. |
| caption | 12px | 500 | 1.33 | -0.01em | — | GT Standard M | Compact card metadata and low-priority labels. |
| button | 14px | 400 | 1.43 | -0.01em | — | GT Standard M | Primary actions and small card-level action labels. |
| nav | 14px | 500 | 1.4 | 0 | — | GT Standard M | Top navigation and category navigation labels. |
| link | 14px | 500 | 1.43 | -0.01em | — | GT Standard M | View-more links and other navigational text. |
| eyebrow | 8px | 600 | 0.88 | 0.15em | uppercase | GT Standard L | Small uppercase section labels such as trending-topic markers. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 7, 8, 10, 12, 16, 20, 24 px.
- Section rhythm 72px · element gap 4px · card padding — · max content width 1368px.

The desktop page spans a broad centered content area measured at a maximum width of 1368px, with the hero centered and subsequent section headings aligned left. Project feeds use four-column grids; studio projects use three columns, while the trending rail is horizontally browsable. A measured 72px section gap establishes a relaxed rhythm, balanced by compact 4px element spacing and a comfortable overall density. The long page remains mostly white instead of alternating large color bands.

## Shape & elevation

- Radius: button `9999px` · card `20px` · media `50%` · badge `4px` · nav `10px` · link `16px` · xs `4px` · sm `8px` · md `10px` · lg `16px` · xl `20px` · pill `9999px`
- Shadow `hairline` (media): `rgba(74, 82, 100, 0.498) 0px 0px 0px 0px`
- Shadow `lg` (button): `rgba(34, 40, 52, 0.05) 0px 4px 10px 0px, rgba(34, 40, 52, 0.04) -2px 18px 18px 0px`
- Shadow `inset` (badge): `rgb(19, 24, 25) 0px 1px 3px 0px inset`
- Shadow `inset-2` (other): `rgb(0, 240, 255) 0px 0px 3.006px 0px inset, rgba(0, 0, 0, 0.4) 0px 0px 0.72px 0px inset`
- Shadow `inset-3` (other): `rgba(0, 0, 0, 0.2) 0px 0px 0.594px 0px inset, rgba(0, 0, 0, 0.3) 0px 0px 1.314px 0px inset, rgba(0, 0, 0, 0.15) 0px 0px 2.16px 0px inset`
- Shadow `hairline-2` (media): `rgb(255, 255, 255) 0px 0px 0px 2px`
- Motion: standard transition `0.17s ease-out` on interactive elements.

Most content sits flat on the white canvas, with layout and image boundaries doing the organizational work. The hero prompt uses a light border and restrained shadow to read as an interactive panel; buttons may receive a soft shadow. Rounded cards and pill actions add definition, while hairlines stay subtle and dark borders are limited to specific controls.

## Imagery

Creator work is the page’s main color source: project thumbnails include brand systems, product interfaces, campaign graphics, photography, and moving previews. Cards use a consistent rectangular gallery framing, with occasional creator markers or overlays kept on top of the image. The trending row uses darkened, text-overlaid challenge artwork; other galleries favor vivid, edge-to-edge previews without decorative framing around every tile.

## Components

### Primary navigation

A clean white top bar with a dark Contra wordmark, text links, outlined “Post a job” action, dark pill “Sign up” button, and a plain login link.

### Prompt hero

Centered headline and muted supporting line above a wide, lightly bordered prompt panel. The panel includes a short placeholder and a dark rounded “Let’s go” action.

### Suggestion chips

A row of understated outlined suggestions below the prompt, using muted text and pill-shaped borders rather than strong colored fills.

### Trending challenge rail

A horizontal row of image-backed challenge cards with dark overlays, concise white copy, prize or timing details, and creator avatars.

### Category navigation

Compact project and people tabs followed by a horizontal list of specialty filters; the selected option is clearer than the muted inactive labels.

### Project gallery

Section heading and supporting description above a four-column image grid, with “View more” aligned opposite the section title and creator actions on project cards.

### Footer link columns

A sparse white footer with multiple narrow columns of small grouped navigation links and the Contra mark.

### Measured component styles

- **Primary button** (“Message”): background #222834 · text #ffffff · border 1px solid #222834 · radius 24px · padding 0px 12px · 600 14px GT Standard M
- **Secondary button** (“Find the best brand designers”): transparent background · text #677084 · border 1px solid #e5e7eb · radius 100px · padding 8px 14px · 400 14px GT Standard M
- **Link** (“The invideo Editor Challenge Submit your”): background #000000 · text #ffffff · radius 16px · padding 0px · 400 16px GT Standard M
- **Input**: transparent background · text #222834 · radius 0px · padding 0px · 400 16px GT Standard M
- **Card** (“$1M+ Earned 76x Hired 5.0 Rating Premium”): background #f2f4f7 · text #14171f · radius 0px · padding 0px · 400 16px GT Standard M
- **Badge** (“PRO”): transparent background · text #222834 · border 1px solid #f5f6f9 · radius 4px · padding 4px · 600 8px GT Standard L · uppercase
- **Navigation item** (“Payments Partnerships Challenges Kicksta”): transparent background · text #14171f · radius 0px · padding 0px · 400 16px GT Standard M

## Do

- Keep the main canvas white and the overall interface restrained.
- Use Slate Ink (#222834) for the clearest primary actions.
- Let project previews provide most of the page’s color.
- Align gallery headings and descriptions to the left.
- Use muted slate text for secondary copy and helper labels.
- Separate long page sections with generous whitespace.

## Don't

- Do not introduce large saturated background bands.
- Do not turn measured gradient colors into dominant UI fills.
- Do not decorate headings with display effects or heavy shadows.
- Do not wrap every project thumbnail in a prominent card shell.
- Do not make secondary labels compete with the creative work.
- Do not replace the browsable gallery rhythm with dense text blocks.

## Agent prompt

Build a new Contra-style page with a clean white canvas (#ffffff), Carbon Text (#14171f) typography, and a restrained hierarchy. Use Slate Ink (#222834) for primary pill actions, Cloud Mist (#f2f4f7) for quiet metadata surfaces, and Quiet Slate (#677084) for supporting copy. Keep vivid accents such as Sky Signal (#9ddef9) and Periwinkle Signal (#979df1) limited to decorative details; project imagery should carry most of the color. Use a centered hero, clear left-aligned gallery sections, generous vertical separation, and compact controls. Render creator work in image-led grids with minimal framing, readable metadata, and visible “View more” paths. Use clean sans-serif typography similar to Inter, restrained borders, subtle panel elevation, and rounded controls. Preserve ample whitespace and avoid adding heavy decoration or oversized color blocks.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and prompt above suggestions, trending cards, and category filters. | Prompt-led discovery, Suggested query shortcuts, Browse trending topics, Switch project or people view | Centered headline, Outlined prompt panel, Suggestion pills, Image-backed horizontal cards, Horizontal category navigation |
| 2 | feature-grid | Left-aligned heading and description above a three-column studio showcase. | Browse verified studios, Open studio profiles, View more | Three-column image grid, Creator labels, Compact section introduction |
| 3 | product-grid | Left-aligned section introduction followed by a four-column project gallery. | Browse curated work, Message creators, View more | Four-column image grid, Creator badges, Project metadata, Compact action buttons |
| 4 | product-grid | Left-aligned title and description above a four-column themed project row. | Browse by tool, Explore related work, View more | Four-column image grid, Creator markers, Project-level message actions |
| 5 | product-grid | Themed section heading and description above a four-column visual gallery. | Discover AI creators, Browse project examples, View more | Four-column image grid, Image-led cards, Creator markers |
| 6 | product-grid | Left-aligned category introduction above a four-column project row. | Browse branding work, Find independent designers, View more | Four-column image grid, Brand identity previews, Creator markers |
| 7 | product-grid | Left-aligned section heading and description followed by a four-column preview row. | Browse editing work, Explore creator profiles, View more | Four-column media grid, Video previews, Creator markers |
| 8 | content-feed | Introductory header above an extended four-column project feed and a centered explore control. | Scroll through more work, Explore projects, Message creators | Dense multi-row gallery, Image-led cards, Creator badges, Centered follow-up button |
| 9 | footer | Sparse multi-column navigation footer with grouped link lists and a brand mark. | Browse product categories, Open resource pages, Find company information, Access support | Grouped link columns, Small uppercase group labels, Contra mark, Minimal legal and social links |

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