---
name: Super
description: "Worth including as an excellent example of a clean, focused SaaS landing page that balances a professional aesthetic with a friendly, accessible feel."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#262A2E"
  secondary: "#66707A"
  tertiary: "#FFBE3C"
  neutral: "#808C99"
  bg-soft: "#F9F9F8"
  bg-quiet: "#FDFDFC"
  muted-soft: "#CCD1D6"
  line: "rgba(204, 209, 214, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 600
    letterSpacing: "-1px"
  h2:
    fontFamily: humanist-sans
    fontSize: 38.4px
    lineHeight: 1.1
    fontWeight: 600
    letterSpacing: "-0.8px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  tiny:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A clean, high-contrast SaaS tool for turning Notion documents into professional websites.

*A clean, professional workspace that instantly turns your notes into a polished public website.*

## Colors

High-contrast foundation with a single energetic accent.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#262A2E`)** — uses `ink` token
- **Secondary text (`#66707A`)** — uses `ink-soft` token
- **Accent (`#FFBE3C`)** — uses `accent` token
- **Muted (`#808C99`)** — uses `muted` token
- **Borders (`rgba(204, 209, 214, 1)`)** — uses `line` token

## Typography

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

- Use tight letter spacing for large display text.
- Maintain high contrast for body text against white backgrounds.

## Layout

Centered column hero layout with a standard top navigation bar.

*Rhythm:* Consistent 4px base grid with generous vertical spacing for sections.

## Elevation & Depth

- rgba(0, 0, 0, 0.008) 2.6px 4px 2.6px 0px
- rgba(0, 0, 0, 0.01) 7.3px 11px 7.1px 0px
- rgba(0, 0, 0, 0.02) 58px 88px 57px 0px
- Borders: 1px solid rgba(204, 209, 214, 1)

## Shapes

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

## Components

- **button:** Solid accent color (yellow) with dark text and rounded pill corners.
- **card:** Dark-themed cards with rounded corners and subtle drop shadows.
- **chip:** Minimal, slightly rounded tags with subtle borders or backgrounds.
- **input:** Clean, rounded inputs with standard padding.
- **hero:** Large, bold centered text with a single prominent call-to-action.

## Do's and Don'ts

**Don't:**
- Don't use dark mode for the primary landing page — screenshot shows a predominantly white background.
- Don't use multiple competing accent colors — screenshot shows only yellow as the primary accent.
- Don't use decorative serif fonts for headings — screenshot shows a clean, geometric sans-serif.
- Don't use heavy drop shadows on primary elements — screenshot shows very subtle, large-radius box shadows.
- Don't clutter the layout with dense grids — screenshot shows a clean, single-column centered layout.
- Don't use aggressive, bright background colors — screenshot uses a restrained palette of white, off-white, and dark gray.

---

## System Prompt (paste into AI agent)

```
Super is a clean, high-contrast SaaS tool for turning Notion documents into professional websites. The visual identity relies on a foundation of white and light off-white backgrounds with dark gray (#262A2E) text, creating a crisp, professional feel. A single, energetic accent color (yellow, #FFBE3C) is used exclusively for primary calls to action. Typography features a bold, geometric sans-serif for display and a clean humanist sans-serif for body text, often with tight letter spacing at large sizes. The layout is centered and minimalist, avoiding visual clutter. Critically, avoid using dark mode for the main landing pages, never use competing bright accent colors, and always keep the layout focused on a single column in the hero section. Ensure all shadows are subtle and large-radius, and keep the UI grounded with a 4px base grid and generous vertical spacing.
```