---
name: Prismic
description: "A prime example of a clean, effective B2B SaaS design that prioritizes clarity and user confidence through strong typography and restrained color."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#151515"
  secondary: "#505050"
  tertiary: "#2BBE8B"
  neutral: "#A4A4A4"
  line: "rgba(238,238,238,1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.55px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.55
    fontWeight: 500
    letterSpacing: "0"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.14
    fontWeight: 500
    letterSpacing: "0"

rounded:
  sm: 2px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

A headless CMS and landing page builder for converting websites.

*A clean, professional workspace for developers and marketing teams to build high-performing websites.*

## Colors

High-contrast black and white for clarity, with a single green accent to highlight key actions and emphasis.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#151515`)** — uses `ink` token
- **Secondary text (`#505050`)** — uses `ink-soft` token
- **Accent (`#2BBE8B`)** — uses `accent` token
- **Muted (`#A4A4A4`)** — uses `muted` token
- **Borders (`rgba(238,238,238,1)`)** — uses `line` token

## Typography

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

- Use geometric-sans for headings to convey a modern, technical feel.
- Use humanist-sans for body text to ensure readability.
- Avoid using decorative or overly complex fonts.

## Layout

Centered content with a max-width container, generous vertical spacing between sections.

*Rhythm:* Consistent 4px grid with standard 16px and 32px padding/margin increments.

## Elevation & Depth

- 0px 1px 6px 0px rgba(0,0,0,0.06)
- 0px 2px 32px 0px rgba(0,0,0,0.16)
- Borders: 1px solid rgba(238,238,238,1)

## Shapes

- `sm`: 2px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Black filled buttons for primary actions, white outlined buttons for secondary actions. Both have rounded corners and generous padding.
- **card:** White background cards with subtle borders or soft shadows, containing case study testimonials.
- **chip:** Used for displaying statistics (e.g., 'Faster page load times 50%') with a light background and rounded corners.
- **input:** Standard text inputs with a 1px border and 8px border radius.
- **hero:** Large centered headline with a prominent accent color, followed by a subheadline and two main call-to-action buttons.

## Do's and Don'ts

**Don't:**
- Don't use a multi-color palette — the screenshot shows a monochromatic base with a single green accent.
- Don't use serif fonts — the typography is strictly sans-serif for both headings and body.
- Don't use heavy drop shadows — the UI relies on subtle box shadows or simple borders for depth.
- Don't use dense, cluttered layouts — the design emphasizes whitespace and clear visual hierarchy.
- Don't use complex gradients — the backgrounds are solid colors.
- Don't use low-contrast text — the black-on-white color scheme ensures high readability.

---

## System Prompt (paste into AI agent)

```
This design is for a B2B SaaS developer tool, Prismic, featuring a clean, professional aesthetic. The color palette is primarily black (#151515) and white (#FFFFFF) with a vibrant green accent (#2BBE8B) used sparingly for emphasis. Typography uses a geometric-sans for headings and humanist-sans for body text, maintaining high readability. The layout is centered with generous whitespace and a clear visual hierarchy. Critical donts: avoid multiple accent colors, do not use serif typefaces, and avoid heavy, distracting shadows that would clutter the clean interface.
```