# Schema Figma · Design system migration spec

> Source: https://schema.figma.com  ·  Curated by OpenDesign  ·  en

> This site serves as a great example of a modern event landing page that successfully blends professional, clean typography with playful, vibrant geometric accents to create a memorable and highly premium brand presence.

## 1. Identity DNA

Schema's design system is built on a single, powerful tension: the austere clarity of a tech conference keynote stage against the vibrant, chaotic energy of the creative community it gathers. Like a well-constructed amphitheater, its stark dark-mode foundation doesn't compete with the performers—it frames them.

**One-liner:** A modern, bold event landing page for Schema by Figma featuring vibrant geometric accents and a clean typographic hierarchy.
**Keywords:** Schema · Figma · Virtual · Conference · Design Tokens
**Analogy:** A high-profile tech conference landing page that blends premium editorial aesthetics with playful, vibrant design accents.

## 2. Color

The palette begins with a pure black ground, a deliberate absence of light that makes every other color declaration an event. Against this void, saturated blocks of cyan, green, and purple function not as decoration, but as structural accents that house content and guide the eye.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#E3E3E3` | placeholder |
| `--line` | `rgba(255, 255, 255, 0.16)` | divider |

**Color principle:** Stark, high-contrast dark mode base that allows vibrant geometric shapes and colorful portrait backgrounds to stand out without competing for attention.

The principle is restraint in the foundation to grant authority to the accent.

## 3. Typography

Typographic voice is split between the commanding, condensed presence of a grotesque sans for display and the clear readability of a humanist sans for detail. This hierarchy ensures that scale alone communicates importance, while weight and spacing provide nuance.

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 400 | -1.4px | Main page titles |
| heading | 32px | 1.4 | 700 | -0.5px | Section headings |
| subhead | 24px | 1.4 | 400 | -0.24px | Event details and speaker names |
| body | 18px | 1.25 | 400 | -0.24px | General body text and descriptions |
| caption | 16px | 1.4 | 400 | 0px | Secondary text and navigation |
| label | 13px | 1.4 | 400 | 0.48px | Uppercase category labels like VIRTUAL |

**Type rules:**
- Use uppercase letter-spacing for small category labels to create clear hierarchy.
- Maintain tight negative letter-spacing on large display text to ensure high-impact presence.
- Prefer regular and medium weights for clean readability on the dark background.

## 4. Spacing

Rhythm is established through a generous 24px gutter system, creating a consistent internal pulse across all components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 120 px
- **Rhythm:** The layout utilizes generous padding in major sections (e.g., 120px vertical) combined with a consistent 24px gutter system to create a spacious, breathable structure.

## 5. Surfaces

Surfaces are treated with extreme minimalism, relying on the interplay of color and negative space rather than extrinsic depth. Borders and shadows, when used, are whisper-thin and gray, serving only to delineate, not to decorate.

- **Radius:** sm 2px · md 0px · lg 20px · pill 999px
- **Shadows:**
  - rgb(128, 128, 128) 0px 0px 5px 0px
- **Borders:** Thin 1px borders are used for primary action buttons and dividers, often utilizing rgba(255, 255, 255, 0.16) for subtle separation.

## 6. Layout

The layout skeleton is a spacious, centered column that prioritizes vertical breathing room over horizontal density. On smaller viewports, it collapses with calculated simplicity, maintaining its generous internal padding while shedding lateral width.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** The page uses a large, centered container for desktop that shifts to a mobile-first layout with significantly reduced horizontal padding.

## 7. Motion & Interaction

Motion philosophy is rooted in utility and predictability, using short, standard CSS transitions to acknowledge interaction without dramatizing it. Every animation serves to confirm a state change, ensuring the interface feels responsive and physically grounded.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Standard background-color, border-color, and color transitions over 0.2s for interactive elements.
  - Transform-based animations using 0.3s ease-in-out for hovering or focusing states.

- **Hover:** Subtle 0.2s transition on background-color, border-color, or color to provide immediate visual feedback.
- **Click:** Elements with pointer cursors trigger standard 0.2s to 0.3s easing transitions.
- **Transition:** Uses standard ease-in-out and ease-out functions for predictable, smooth motion.
- **Keyboard:** Standard interactive focus states supported by the underlying browser defaults.

## 8. Voice & Don'ts

The editorial voice is authoritative yet creative, matching the confident typography with clear, direct language that avoids both sterile corporatism and overly casual flair. It speaks with the precision of a well-made tool and the enthusiasm of a community event.

- **Tone:** Professional, authoritative, yet approachable and creative.
- **Headline style:** Large, bold, and impactful sans-serif text that commands immediate attention.
- **CTA style:** Minimalist, transparent ghost buttons with large, clear typography that blends seamlessly with the UI.
- **Avoid:** Avoid overly corporate or sterile language. / Avoid using highly decorative or distracting serif fonts. / Avoid cluttering the interface with excessive secondary elements or dense text blocks.

### Don'ts
- ❌ Don't use a white background — screenshot shows a predominantly black (#000000) background for the main layout.
- ❌ Don't use complex or organic shapes — screenshot shows strict geometric primitives like circles, squares, and hexagons.
- ❌ Don't use dense paragraph text — screenshot shows clear, short, and highly readable typographic blocks.
- ❌ Don't apply solid white backgrounds to portrait photography — screenshot shows grayscale photos layered over vibrant solid color blocks.
- ❌ Don't use heavy shadow systems — screenshot shows very minimal, almost flat layering with at most a single subtle gray shadow.
- ❌ Don't use playful rounded or bubbly typography — screenshot shows strict, clean grotesque and humanist sans-serif font categories.

What this system deliberately avoids is as defining as what it includes: there are no white backgrounds, no organic shapes, and no dense text blocks.

## System Prompt (paste into AI tool)

```
Design the event landing page for Schema by Figma with a premium, editorial dark-mode aesthetic. The primary background should be pure black (#000000) with crisp white (#FFFFFF) text to create high-impact contrast. Utilize a clean typography hierarchy featuring grotesque-sans for large display elements and humanist-sans for body text. The visual identity should be elevated by introducing playful, high-saturation geometric shapes and solid color blocks (like cyan, green, and purple) to frame grayscale photography. DO NOT use a white background. DO NOT use complex organic shapes. DO NOT clutter the layout with dense text blocks.
```