---
name: Anytype
description: "This design is an excellent example of a premium, trustworthy aesthetic for a SaaS product, using typography and layout rather than color for impact."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#666666"
  neutral: "#808080"
  bg-soft: "#FFF2D2"
  bg-quiet: "#FFBCC3"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 76px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "-2.4px"
  display-emphasis:
    fontFamily: humanist-sans
    fontSize: 76px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2.4px"
  h2:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.12px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.44
    fontWeight: 400
    letterSpacing: "-0.28px"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.43
    fontWeight: 400
    letterSpacing: "-0.12px"

rounded:
  sm: 6px
  md: 16px
  lg: 16px
  pill: 100px

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

---

## Overview

A private, offline-first workspace for digital collaboration.

*a digital Swiss vault for your notes and workflows*

## Colors

High-contrast black and white foundation with a single warm gradient and a distinct serif highlight for emphasis.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#666666`)** — uses `ink-soft` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

- Use the italicized serif for stylistic emphasis within the hero section only.
- Maintain a strict black and white primary text hierarchy.
- Use generous negative tracking for large display typography.

## Layout

Large hero section followed by a three-column grid of features, separated by a subtle grid system.

*Rhythm:* 80px vertical rhythm between major sections

## Elevation & Depth

- Borders: Thin black outlines (1px) defining grid cells and a hero container with rounded corners

## Shapes

- `sm`: 6px
- `md`: 16px
- `lg`: 16px
- `pill`: 100px

## Components

- **button:** Pill-shaped buttons with solid black backgrounds and white text, or transparent backgrounds with black text.
- **card:** Text-heavy feature cards separated by a 1px black grid layout.
- **chip:** Floating pill navigation at the bottom center with a semi-transparent background and blurred effect.
- **input:** Standard text fields with minimal styling.
- **hero:** A large bordered container with massive typography on the left and a black-and-white line art illustration on the right.

## Do's and Don'ts

**Don't:**
- don't use multiple bright accent colors — the screenshot shows a predominantly black, white, and muted gradient palette
- don't use heavy drop shadows or glows — the screenshot shows flat, outlined elements with no shadows
- don't use a dense, cramped layout — the screenshot shows generous whitespace and a clear grid structure
- don't use thick, rounded containers — the screenshot shows thin (1px) black borders for most sections
- don't use an all-serif typography system — the screenshot shows a sans-serif foundation with serif used only for emphasis
- don't use a dark mode as the primary theme — the screenshot shows a white background with black text

---

## System Prompt (paste into AI agent)

```
This is a clean, privacy-focused productivity app landing page. Use a black and white foundation with a warm, subtle gradient in the hero background. The primary typography is a humanist sans-serif (inter), used with generous negative tracking for headlines, and a serif font for italicized emphasis. The layout is structured and grid-based, using thin black borders to define sections. Maintain high contrast and ample whitespace. Do not use drop shadows, avoid dense layouts, and never use multiple high-chroma accent colors. Focus the design on clarity, sovereignty, and a refined, non-aggressive aesthetic.
```