---
name: Schema Figma
description: "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 prem"
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  neutral: "#E3E3E3"
  line: "rgba(255, 255, 255, 0.16)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-1.4px"
  heading:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.4
    fontWeight: 700
    letterSpacing: "-0.5px"
  subhead:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.24px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "-0.24px"
  caption:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  label:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.48px"

rounded:
  sm: 2px
  md: 0px
  lg: 20px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A modern, bold event landing page for Schema by Figma featuring vibrant geometric accents and a clean typographic hierarchy.

*A high-profile tech conference landing page that blends premium editorial aesthetics with playful, vibrant design accents.*

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#E3E3E3`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.16)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*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.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 2px
- `md`: 0px
- `lg`: 20px
- `pill`: 999px

## Components

- **button:** Large, transparent ghost buttons with white borders and rounded corners.
- **card:** Grid-based speaker cards featuring grayscale portrait photography overlaid on solid, vibrant, saturated color blocks.
- **chip:** None visible.
- **input:** None visible.
- **hero:** A dominant dark section featuring massive typography, minimal event details, and a prominent geometric illustration strip.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```