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

# Handshake · Design System

> A luminous career network on a dark canvas

**Theme:** dark · **Industry:** ai · **Source:** https://joinhandshake.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._

Handshake pairs a near-black canvas with luminous lime and cyan gradients to present AI-era career discovery as energetic and approachable. Oversized condensed headlines, generous breathing room, and crisp opportunity cards lead into product showcases and a compact, multi-column footer.

## North star

Keep the page grounded in a near-black canvas, then use luminous gradients, condensed display type, and lime actions as deliberate focal points.

## Overview

The page is anchored by a near-black canvas (#14151c), with most content kept on that dark field so the bright hero gradient and lime actions have immediate contrast. In the opening viewport, a diffuse cyan-to-lime glow sits behind a centered, condensed all-caps headline; the gradient fades toward the dark edges rather than forming a hard panel. Lime (#d3fb52) marks the primary signup and opportunity actions, while cyan (#7af3ff) appears as a secondary glow and within colorful product imagery. NoiGrotesk handles navigation, body copy, and regular headings with restrained tracking; SansPlomb is reserved for the dramatic display wordmark/headline treatment. The layout is spacious and centered in the hero, then alternates two-column feature content with broad dark intervals. Opportunity links use subtle hairlines instead of raised cards. Product mockups bring rounded, bright surfaces into the otherwise flat dark page, and the footer returns to restrained text columns with an oversized lime wordmark.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary headings and body text, navigation, footer content, and light surfaces such as the search field. |
| Midnight Canvas | `#14151c` | `--color-midnight-canvas` | brand | Dominant page background and dark gradient falloff; also used for text on lime actions. |
| Electric Lime | `#d3fb52` | `--color-electric-lime` | accent | Primary signup and opportunity CTA fill, logo accent, and one endpoint of the hero and product-image glows. |
| Graphite Hairline | `#2b2d33` | `--color-graphite-hairline` | neutral | Fine outlines separating opportunity links and other dark-surface elements. |
| Slate Panel | `#222329` | `--color-slate-panel` | surface | Secondary dark panels and subdued surface areas against the near-black canvas. |
| Silver Copy | `#d0d0d2` | `--color-silver-copy` | semantic | Muted supporting text where secondary copy needs softer contrast than white. |
| Glacier Cyan | `#7af3ff` | `--color-glacier-cyan` | accent | Secondary gradient glow and cyan details in the colorful product mockups; not a dominant page text color. |
| Ash Footer | `#a1a1a4` | `--color-ash-footer` | semantic | Low-emphasis footer and supporting text on the dark canvas. |
| Button Charcoal | `#434449` | `--color-button-charcoal` | neutral | Subtle button border detail; a restrained component-level neutral rather than a page-wide color. |
| Pale Footer Gray | `#b8b8ba` | `--color-pale-footer-gray` | semantic | Occasional lower-emphasis footer text. |

### Semantic aliases

`--color-canvas` → `#14151c` (Midnight Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#222329` (Slate Panel) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#d0d0d2` (Silver Copy) · `--color-text-subtle` → `#a1a1a4` (Ash Footer) · `--color-border` → `#2b2d33` (Graphite Hairline) · `--color-accent` → `#d3fb52` (Electric Lime) · `--color-accent-2` → `#7af3ff` (Glacier Cyan) · `--color-on-accent` → `#14151c` (Midnight Canvas)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#14151c` | 18.2:1 | AAA |
| `#ffffff` | `#222329` | 15.67:1 | AAA |
| `#d0d0d2` | `#14151c` | 11.82:1 | AAA |
| `#d0d0d2` | `#ffffff` | 1.54:1 | fail |
| `#d0d0d2` | `#222329` | 10.17:1 | AAA |
| `#a1a1a4` | `#14151c` | 7.06:1 | AAA |
| `#a1a1a4` | `#ffffff` | 2.58:1 | fail |
| `#a1a1a4` | `#222329` | 6.08:1 | AA |
| `#d3fb52` | `#14151c` | 15.33:1 | AAA |
| `#d3fb52` | `#ffffff` | 1.19:1 | fail |

### Gradients

- `radial-gradient(100% 105% at 60% 25%, rgba(0, 0, 0, 0) 0%, rgb(20, 21, 28) 100%)`
- `radial-gradient(at 20% 55%, rgb(122, 243, 255) 0%, rgb(211, 251, 82) 53%, rgba(0, 0, 0, 0) 76%)`
- `radial-gradient(at 55% 45%, rgb(122, 243, 255) 0%, rgb(122, 243, 255) 50%, rgba(0, 0, 0, 0) 76%)`
- `radial-gradient(at 52% 48%, rgb(122, 243, 255) 0%, rgb(211, 251, 82) 68%, rgba(0, 0, 0, 0) 80%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| NoiGrotesk | `--font-body` | webfont | 400, 500 | Navigation, body copy, regular headings, links, and buttons throughout the page. | Inter |
| SansPlomb | `--font-display` | webfont | 600 | Oversized display headline and dramatic brand-wordmark treatment. | Bebas Neue |

- **NoiGrotesk:** Mostly regular weight, with medium-weight actions and links; compact negative tracking and sentence case.
- **SansPlomb:** Semibold, condensed uppercase display lettering with tight tracking and compressed line spacing.

### Type scale — Golden Ratio (ratio ≈ 1.585, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 160px | 600 | 0.8 | -0.025em | uppercase | SansPlomb | Oversized condensed uppercase hero headline and dramatic wordmark. |
| h1 | 40px | 400 | 1.1 | -0.025em | — | NoiGrotesk | Primary section heading, including the AI career network proposition. |
| h2 | 32px | 400 | 1.1 | -0.025em | — | NoiGrotesk | Secondary feature and section headings. |
| h3 | 28px | 400 | 1.1 | -0.025em | — | NoiGrotesk | Feature titles and prominent opportunity group headings. |
| h4 | 22px | 400 | 1.4 | -0.02em | — | NoiGrotesk | Compact opportunity and supporting content headings. |
| body | 16px | 400 | 1.4 | -0.015em | — | NoiGrotesk | Introductory copy, feature descriptions, and opportunity details. |
| caption | 14px | 400 | 1.4 | -0.015em | — | NoiGrotesk | Small supporting labels and low-priority metadata. |
| button | 16px | 500 | 1.1 | -0.015em | — | NoiGrotesk | Signup, explore, and feature action labels. |
| nav | 14px | 400 | 1.4 | -0.015em | — | NoiGrotesk | Header navigation links and footer navigation labels. |
| link | 14px | 500 | 1.4 | -0.015em | — | NoiGrotesk | Opportunity-card links and inline informational links. |

OpenType features in use: `"ss03", "ss06", "ss12"`.

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 8, 12, 16, 24, 40, 80, 140 px.
- Section rhythm 120px · element gap 16px · card padding — · max content width 1392px.

The hero is centered within a wide desktop composition, with a compact navigation row above a large headline, supporting line, and broad search control. The measured page max width is 1392px; the content below shifts into a three-column opportunity area and then two-column feature splits. Sections retain spacious vertical intervals, while the logo strip spans the width. The footer is denser, using three link columns alongside a prominent brand statement.

## Shape & elevation

- Radius: button `8px` · input `24px` · media `40px` · nav `8px` · link `16px` · xs `8px` · sm `16px` · md `24px` · lg `40px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, with no measured shadow system. Dark opportunity cards are separated by fine graphite borders rather than raised surfaces. Rounded search and media frames provide shape; colorful mockups and the hero glow create depth through gradients and contrast instead of shadows.

## Imagery

Product imagery is presented as bright interface mockups rather than page-wide photography: job listings, project opportunities, and career conversations appear inside rounded rectangular frames. Cyan and lime glows surround several mockups, contrasting with the dark page. A horizontal employer-logo strip provides proof points. Keep screenshots legible and contained; their greens, teals, and pale surfaces belong to the illustrations, not the core interface palette.

## Components

### Header navigation

A compact horizontal row on the dark hero, with brand mark, understated white links, an outlined login action, and a lime signup button.

### Hero search

A wide white rounded input with dark search icon and text, plus a pale inset submit control; it sits beneath the centered display headline.

### Opportunity links

Six text-led opportunities arranged in three columns and two rows, separated by thin #2b2d33 outlines; white titles and muted supporting details.

### Primary CTA

Lime #d3fb52 fill, dark #14151c label, NoiGrotesk medium weight, and measured 8px corner radius.

### Employer logo strip

A horizontally arranged row of subdued company marks on dark, slightly lighter rounded tiles.

### Feature split

Alternating text and rounded product mockup, with short copy, a lime action, and generous dark negative space.

### Footer

Dark multi-column link groups paired with a large lime brand wordmark and compact app-store and legal details.

### Measured component styles

- **Primary button** (“Get started”): background #d3fb52 · text #14151c · radius 8px · padding 12px 16px · 500 16px NoiGrotesk
- **Secondary button** (“AI specialists”): transparent background · text #ffffff · border 1px solid #434449 · radius 8px · padding 16px · 400 16px NoiGrotesk
- **Link** (“AI Evaluation Specialist Up to $17/hr Ba”): transparent background · text #ffffff · border 1px solid #2b2d33 · radius 16px · padding 40px · 400 16px NoiGrotesk
- **Input**: background #ffffff · text #252630 · radius 24px · padding 0px 80px 0px 64px · 400 20px NoiGrotesk
- **Navigation item** (“Employers Job seekers Career centers Han”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px NoiGrotesk

## Do

- Use #14151c as the dominant canvas.
- Reserve #d3fb52 for high-priority actions and brand accents.
- Apply cyan and lime gradients as localized atmospheric glows.
- Set display messaging in condensed uppercase lettering.
- Keep body copy and navigation clean, restrained, and readable.
- Use hairline borders to define dark opportunity cards.
- Let product mockups provide contained bursts of color.

## Don't

- Do not turn the whole page into bright gradient panels.
- Do not use lime for long passages of text.
- Do not add shadows as a substitute for the page's flat layering.
- Do not treat mockup colors as the core interface palette.
- Do not crowd the hero or feature sections with dense content.
- Do not use display type for ordinary navigation or body copy.

## Agent prompt

Build a new Handshake-style page on a dominant #14151c Midnight Canvas. Use Gallery White #ffffff for primary text, Electric Lime #d3fb52 for the main action, and Glacier Cyan #7af3ff only for localized glows or illustrative accents. Keep a spacious desktop composition: compact header, centered oversized hero message, clear search or action control, then well-separated content blocks and alternating feature splits. Use a condensed uppercase display face for the focal headline and a clean grotesk such as Inter for body, navigation, and buttons. Make interface cards mostly flat with fine #2b2d33 Graphite Hairline borders; reserve rounded, luminous framing for product mockups. Maintain strong contrast, concise copy, and ample negative space, with a compact multi-column footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width dark hero with centered display headline, supporting line, search field, and compact topic chips. | primary search entry, suggested filters, header signup | cyan-to-lime radial glow, oversized condensed headline, white rounded input, lime action |
| 2 | feature-grid | Centered introduction above a three-column, two-row opportunity grid, followed by a centered CTA and informational link. | browse job types, compare role details, explore all opportunities | dark background, thin card hairlines, white titles, lime CTA |
| 3 | logo-cloud | A full-width horizontal band of employer marks on dark rounded tiles. | employer credibility, logo browsing | monochrome logos, dark tiles, horizontal strip |
| 4 | feature-split | Centered section title followed by three spacious alternating two-column feature rows. | discover job matches, find flexible AI work, grow career connections | rounded product screenshots, alternating text placement, lime actions, gradient media edges |
| 5 | footer | Multi-column navigation with a prominent brand statement and large wordmark treatment. | browse site links, download app, find support and legal details | dark canvas, muted link columns, oversized lime wordmark, app-store badges |

## Source CSS custom properties (selected)

```css
--font-noi-grotesk: 'NoiGrotesk', 'NoiGrotesk Fallback', sans-serif;
--font-sans-plomb: 'SansPlomb', 'SansPlomb Fallback', sans-serif;
--font-sans-plomb-swap: 'SansPlombSwap', 'SansPlombSwap Fallback', sans-serif;
```

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