---
name: Heptabase
description: "Excellent example of restrained, professional SaaS design for productivity tools"
version: alpha

colors:
  background: "#ffffff"
  primary: "#2e2e2e"
  tertiary: "#207dff"
  neutral: "#6a6d72"
  bg-soft: "#fcfcfc"
  bg-quiet: "#f0f0f0"
  line: "rgba(0,0,0,0.08)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 64px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1.5px"
  h2:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

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

---

## Overview

An intelligent, visual knowledge base for students and researchers.

*A clean, minimalist digital workspace for academic research.*

## Colors

Maximize content readability with a high-contrast, neutral palette.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#2e2e2e`)** — uses `ink` token
- **Accent (`#207dff`)** — uses `accent` token
- **Muted (`#6a6d72`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.08)`)** — uses `line` token

## Typography

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

- Display and heading fonts use humanist-sans category with tight letter-spacing
- Body text uses humanist-sans with relaxed line height for readability

## Layout

Centered content column with generous horizontal padding

*Rhythm:* Consistent 4px base unit with generous whitespace for clarity

## Elevation & Depth

- rgba(0, 0, 0, 0.04) 0px 0px 0px 1px
- rgba(0, 0, 0, 0.04) 0px 4px 8px 0px
- rgba(0, 0, 0, 0.05) 0px 16px 26px 0px
- Borders: 1px solid rgba(0,0,0,0.08)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Dark filled primary, white outline secondary, pill-shaped with dark text
- **card:** White background, subtle border and shadow, rounded corners
- **chip:** Small rounded badge with light background and dark text
- **input:** White background with subtle border, rounded corners
- **hero:** Large centered text block with prominent CTA button

## Do's and Don'ts

**Don't:**
- Don't use bright neon colors — screenshot shows muted blue accent (#207dff) against neutral palette
- Don't use decorative serif fonts — screenshot shows clean humanist-sans typography
- Don't overcrowd the layout — screenshot shows generous whitespace and centered content
- Don't use dark mode as default — screenshot shows predominantly white background (#ffffff)
- Don't use complex multi-column layouts for hero — screenshot shows single centered column
- Don't use rounded corners smaller than 4px — screenshot shows consistent 4-12px border radius

---

## System Prompt (paste into AI agent)

```
Heptabase is a clean, minimalist SaaS product for visual knowledge management and AI-assisted research. The design uses a neutral palette with white (#ffffff) backgrounds, dark gray (#2e2e2e) text, and a blue (#207dff) accent. Typography is humanist-sans with tight letter-spacing for headings and relaxed line-height for body text. Critical design principles: maintain generous whitespace, use consistent 4px spacing scale, keep corners subtly rounded (4-12px), avoid decorative elements, and prioritize readability. The interface should feel professional, trustworthy, and focused on academic productivity.
```