---
name: Light
description: "A strong example of a modern, developer-focused SaaS interface that balances bold typography with a clean, functional layout."
version: alpha

colors:
  background: "#F5F7FA"
  primary: "#000000"
  secondary: "#6C7A89"
  tertiary: "#6C00F6"
  neutral: "#9EABBE"
  bg-soft: "#FFFFFF"
  bg-quiet: "#F0F2F5"
  line: "rgba(0, 0, 0, 0.05)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 52px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  headline:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "normal"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"
  label:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.3
    fontWeight: 500
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 20px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 40px

---

## Overview

Developer building blocks for the onchain Internet era.

*A modern toolkit for building the next generation of blockchain applications.*

## Colors

Clean, high-contrast interface with a vibrant purple accent for primary actions.

- **Background (`#F5F7FA`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#6C7A89`)** — uses `ink-soft` token
- **Accent (`#6C00F6`)** — uses `accent` token
- **Muted (`#9EABBE`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.05)`)** — uses `line` token

## Typography

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

- Use bold weights for headings to establish strong hierarchy.
- Maintain tight leading for large display text.
- Body text should be readable with moderate line-height.

## Layout

Centered hero with full-width container, transitioning to a multi-column grid for feature sections.

*Rhythm:* Consistent 4px base unit with a modular scale for vertical rhythm and component padding.

## Elevation & Depth

- 0 2px 1px 0 rgba(0, 0, 0, 0.03)
- 0 1px 0 0 rgba(0, 0, 0, 0.05)
- 0 0 24px 0 rgba(128, 128, 128, 0.1)
- Borders: 1px solid rgba(0, 0, 0, 0.05)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 20px
- `pill`: 999px

## Components

- **button:** Primary buttons are pill-shaped with purple background; secondary buttons are ghost/outline with text.
- **card:** White cards with soft shadows and rounded corners, used for feature highlights.
- **chip:** Rounded labels with background color and text, used for categories.
- **input:** Text inputs with subtle borders and rounded corners.
- **hero:** Full-width centered section with large typography and prominent call-to-action buttons.

## Do's and Don'ts

**Don't:**
- Don't use thin or light font weights for headlines — screenshot shows bold weight 700.
- Don't use a wide, boxy container — screenshot shows a centered content area with clear margins.
- Don't use sharp corners on primary elements — screenshot shows rounded corners (pill buttons, rounded cards).
- Don't use a dark background for the main page — screenshot shows a light gray/off-white background.
- Don't use subtle or muted accent colors for primary CTAs — screenshot shows a vibrant, high-chroma purple.
- Don't use complex, multi-colored gradients as primary backgrounds — screenshot shows clean, solid color sections.

---

## System Prompt (paste into AI agent)

```
A developer-focused infrastructure platform for web3 and blockchain. The design features a clean, light background with a vibrant purple (#6C00F6) accent for primary actions. Typography uses a bold grotesque-sans for headlines (weight 700) and a readable humanist-sans for body text. Critical donts: don't use thin font weights, don't avoid rounded corners, and don't use dark backgrounds for the main layout. The interface emphasizes clarity, strong hierarchy, and a professional, technical tone.
```