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

# Figma — Schema Event · Design System

> Bold event typography meets playful geometric color.

**Theme:** light · **Industry:** design · **Source:** https://schema.figma.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._

A high-contrast event page pairs a black-and-white opening with vivid geometric artwork and a bright green agenda section. Oversized typography, compact event details, speaker portraits, and restrained rules keep the long page clear and distinctive.

## North star

Use stark black-and-white typography and spacious structure as the frame for vivid, playful geometric event artwork.

## Overview

The page opens on a black canvas with white Figma-Sans typography, giving the event title and registration link immediate contrast. The hero stays spare: a small uppercase virtual label, a large lightweight title, two lines of date information, and a wide outlined registration control. A full-bleed geometric illustration then introduces saturated blue, pale cyan, lilac, orange, and red; treat these as artwork colors rather than additions to the measured core palette. The next sections shift to pale cyan and vivid green, using black text and thin horizontal rules to organize the event details and agenda. White sections provide a calmer backdrop for the speaker grid and FAQ. Typography is generally clean and unembellished, with display faces reserved for large titles and agenda links. The layout alternates broad color fields with compact, aligned content, while portraits are consistently cropped into rectangular color-backed tiles. The footer returns to black and oversized white branding.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Schema Ink | `#000000` | `--color-schema-ink` | brand | Primary hero and footer canvas; also the main text, navigation, agenda copy, and thin structural rules. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas for the speaker and FAQ sections; contrast for typography and the dark hero. |
| Soft Ink | `#0f0f0f` | `--color-soft-ink` | neutral | Muted text tone measured in the palette; visually close to the primary black and used for subdued copy. |
| Agenda Green | `#24cb71` | `--color-agenda-green` | accent | Dominant background for the event details and agenda band, paired with black text and rules. |
| Footer Grey | `#e2e2e2` | `--color-footer-grey` | surface | Measured light-grey surface associated with the footer; secondary to the visible black footer treatment. |
| Virtual Cyan | `#c7f8fb` | `--color-virtual-cyan` | surface | Pale-cyan background for the virtual registration status section and a recurring illustration color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Schema Ink) · `--color-surface-2` → `#e2e2e2` (Footer Grey) · `--color-surface-3` → `#c7f8fb` (Virtual Cyan) · `--color-text` → `#000000` (Schema Ink) · `--color-text-muted` → `#0f0f0f` (Soft Ink) · `--color-border` → `#000000` (Schema Ink) · `--color-accent` → `#24cb71` (Agenda Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e2e2e2` | 16.21:1 | AAA |
| `#000000` | `#c7f8fb` | 18.25:1 | AAA |
| `#0f0f0f` | `#ffffff` | 19.17:1 | AAA |
| `#0f0f0f` | `#000000` | 1.1:1 | fail |
| `#0f0f0f` | `#e2e2e2` | 14.8:1 | AAA |
| `#0f0f0f` | `#c7f8fb` | 16.66:1 | AAA |
| `#24cb71` | `#ffffff` | 2.13:1 | fail |
| `#24cb71` | `#000000` | 9.86:1 | AAA |
| `#24cb71` | `#e2e2e2` | 1.64:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Figma-Sans-Display-Regular | `--font-display` | webfont | 400, 700 | Display headlines, section titles, large agenda links, and prominent registration text. | Inter |
| Figma-Sans-Text-Regular | `--font-body` | webfont | 400, 600 | Body copy, navigation, event information, and registration text. | Inter |
| Figma VF-normal-700-75 | `--font-figma-vf-normal-700-75` | webfont | 400 | Small share of measured site text; likely a variable display or emphasis face. | Inter |
| Figma-Sans-Text-Medium | `--font-figma-sans-text-medium` | webfont | 400 | Minor emphasis within text and interface labels. | Inter |
| Figma-Mono-Regular | `--font-mono` | webfont | 400 | Code-like or technical labels where a monospaced treatment is needed. | IBM Plex Mono |

- **Figma-Sans-Display-Regular:** Light, clean display character; measured roles favor regular weight, tight negative tracking on large headings, and sentence case.
- **Figma-Sans-Text-Regular:** Readable sans-serif for compact interface and paragraph text; navigation is measured at semibold with slightly open tracking.
- **Figma VF-normal-700-75:** Measurement does not identify a clear page role; keep use subordinate to the main Figma Sans families.
- **Figma-Sans-Text-Medium:** Use sparingly for emphasis rather than introducing a separate typographic voice.
- **Figma-Mono-Regular:** Measured in a small share; reserve for compact technical details, not large headings.

### Type scale — Perfect Fourth (ratio ≈ 1.367, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 86px | 400 | 0.9 | -0.02em | — | Figma-Sans-Display-Regular | Oversized event or brand display headlines. |
| h1 | 72px | 400 | 1 | -0.02em | — | Figma-Sans-Display-Regular | Primary hero title, “Schema by Figma.” |
| h2 | 56px | 400 | 1.1 | -0.02em | — | Figma-Sans-Display-Regular | Large section headings and prominent agenda links. |
| h3 | 32px | 400 | 1.4 | 0 | — | Figma-Sans-Display-Regular | Secondary section titles and speaker-area headings. |
| h4 | 24px | 400 | 1.2 | 0 | — | Figma-Sans-Display-Regular | Smaller subsection headings and FAQ labels. |
| body | 18px | 400 | normal | 0 | — | Figma-Sans-Text-Regular | Event description, speaker details, and explanatory copy. |
| caption | 16px | 400 | 1.4 | 0 | — | Figma-Sans-Display-Regular | Small section labels and compact supporting information. |
| nav | 18px | 600 | normal | 0.03em | — | Figma-Sans-Text-Regular | Header navigation links such as FAQ and Agenda. |
| link | 56px | 400 | 1.1 | -0.02em | — | Figma-Sans-Display-Regular | Large, prominent agenda session links. |
| code | 16px | 400 | 1.4 | 0 | — | Figma-Mono-Regular | Occasional compact technical or code-like text. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 4, 8, 16, 20, 24, 60, 120 px.
- Section rhythm 120px · element gap 4px · card padding — · max content width 1320px.

The page uses broad, full-width section bands and a spacious overall rhythm, with content aligned to consistent inset edges. The measured maximum content width is 1320px; the opening screenshot shows a left-aligned hero and an almost full-width registration control. The agenda is organized as stacked rows separated by fine horizontal rules, while speakers use a multi-column portrait grid. Large areas of black, green, cyan, and white alternate to make the long page legible. Keep density low in the hero and more compact in schedules and speaker details.

## Shape & elevation

- Radius: link `20px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The page is predominantly flat: large solid-color bands and artwork carry the visual hierarchy rather than shadows or card elevation. Use thin dark rules to divide agenda rows and a fine light outline around the prominent registration control. Keep portrait tiles and FAQ rows visually crisp, with contrast and spacing doing the separation work.

## Imagery

The signature artwork is a full-width, flat geometric collage of circles, squares, and bold abstract marks in saturated blue, cyan, lilac, orange, and red. These colors are concentrated in illustration and portrait backdrops, not the measured core palette. Speaker photography is presented as consistent rectangular head-and-shoulders crops, often monochrome subjects against bright solid-color tiles. Avoid gradients, decorative shadows, and realistic 3D effects.

## Components

### Header navigation

Black top bar with a white Figma mark on the left and compact FAQ and Agenda links aligned on the right; a fine horizontal rule separates it from the hero.

### Event hero

Black field with a small uppercase virtual label, large white event title, date and time, and a broad transparent registration control outlined in a light line.

### Geometric artwork strip

Edge-to-edge collage of flat, brightly colored geometric forms; preserve the playful blocks and circles as illustration rather than interface surfaces.

### Registration status band

Pale cyan section pairs a left-aligned registration heading with a compact event-ended status and alert icon.

### Agenda list

Bright green section with a short event overview followed by stacked time-and-session rows, black text, and thin horizontal dividers.

### Speaker grid

White section with a prominent heading and a multi-column set of rectangular portrait tiles, names, and compact role and company captions.

### FAQ and footer

FAQ uses a quiet white layout with question rows and dividers; the closing footer returns to black with large white Figma branding.

### Measured component styles

- **Primary button**: transparent background · text #000000 · radius 0px · padding 0px · 400 13.3333px Figma-Sans-Text-Regular
- **Link** (“Design systems that adapt”): transparent background · text #000000 · radius 0px · padding 0px · 400 56px Figma-Sans-Display-Regular
- **Navigation item** (“FAQ Agenda”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px Figma-Sans-Text-Regular

## Do

- Keep the hero and footer grounded in #000000.
- Use #ffffff for clean speaker and FAQ areas.
- Reserve #24cb71 for the agenda and event-details band.
- Use #c7f8fb for the virtual status section.
- Set display titles in a clean, lightweight sans-serif.
- Separate agenda entries with thin horizontal rules.
- Treat vivid geometric colors as artwork and image treatments.

## Don't

- Do not add gradients or shadow-heavy cards.
- Do not use bright illustration colors as the default page canvas.
- Do not crowd the hero with secondary information.
- Do not turn the agenda into floating cards.
- Do not crop speaker portraits inconsistently.
- Do not replace the restrained black rules with heavy borders.

## Agent prompt

Build a new event page in Figma’s Schema visual style. Use Schema Ink (#000000) for a strong hero and footer, Gallery White (#ffffff) for quiet content areas, Agenda Green (#24cb71) for the main schedule band, and Virtual Cyan (#c7f8fb) for a status or registration section. Set large, clean sans-serif headings with a lightweight feel; use compact, readable sans-serif text for navigation and details. Create a spacious, left-aligned hero with a large outlined registration control, then use full-width flat color bands and a lively geometric illustration strip. Keep illustrations vivid but separate from the core interface palette. Structure schedules with aligned time and title columns and fine rules; show speakers in consistent rectangular portrait tiles. Favor flat surfaces, crisp edges, generous breathing room, and clear section changes over shadows or decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Full-width black closing band with oversized white Figma branding and compact copyright details. | Closing brand reinforcement, Copyright and footer links | Black canvas, Large white wordmark, Small white footer text |

## Source CSS custom properties (selected)

```css
--color_1: rgba(255, 255, 255, 1);
--color_10: rgba(228, 255, 151, 1);
--color_11: rgba(250, 220, 162, 1);
--color_12: rgba(255, 201, 193, 1);
--color_13: rgba(196, 186, 255, 1);
--color_14: rgba(203, 159, 210, 1);
--color_15: rgba(0, 0, 0, 1);
--color_16: rgba(114, 28, 28, 1);
--color_17: rgba(93, 68, 147, 1);
--color_18: rgba(77, 73, 252, 1);
--color_19: rgba(10, 92, 53, 1);
--color_2: rgba(226, 226, 226, 1);
--color_3: rgba(255, 114, 55, 1);
--color_4: rgba(250, 253, 93, 1);
--color_5: rgba(36, 203, 113, 1);
--color_6: rgba(0, 182, 255, 1);
--color_7: rgba(199, 248, 251, 1);
--color_8: rgba(149, 185, 172, 1);
--color_9: rgba(243, 255, 227, 1);
--btn-text-direction: ltr;
--btn-border-r-color: rgba(0, 0, 0, 0);
--btn-border-l-color: rgba(0, 0, 0, 0);
--btn-border-b-width: 1px;
--btn-border-width: 1px;
--btn-border-radius: 6px;
--btn-border-t-width: 1px;
--btn-border-tl-radius: 8px;
--btn-border-br-radius: 8px;
--btn-border-bl-radius: 8px;
--btn-bg-color: rgba(0, 0, 0, 1);
--btn-border-color: rgba(0, 0, 0, 0);
--btn-border-tr-radius: 8px;
--btn-border-r-width: 1px;
--btn-border-b-color: rgba(0, 0, 0, 0);
--btn-border-l-width: 1px;
--btn-border-t-color: rgba(0, 0, 0, 0);
--btn-text-align: center;
--btn-text-color: rgba(255, 255, 255, 1);
--btn-text-decoration: none;
--btn-text-font-weight: 400;
```

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