---
name: Carrd
description: "This site is a perfect example of how a highly restrained, minimalist design can still feel modern and professional through careful use of a dark mode palette and a single, well-chosen accent color."
version: alpha

colors:
  background: "#24252d"
  primary: "#ffffff"
  secondary: "rgba(255,255,255,0.75)"
  tertiary: "#33ada9"
  neutral: "rgba(255,255,255,0.4)"
  muted-soft: "rgba(255,255,255,0.376)"
  line: "rgba(255,255,255,0.075)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.4px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 34px
    lineHeight: 1.25
    fontWeight: 700
    letterSpacing: "-0.85px"
  body-lg:
    fontFamily: grotesque-sans
    fontSize: 24px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "normal"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.75
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: grotesque-sans
    fontSize: 12.8px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 6px
  lg: 12px
  pill: 999px

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

---

## Overview

A minimal, gradient-based landing page for a one-page site builder.

*A calm, geometric welcome screen for a digital toolkit.*

## Colors

High-contrast white text over a dark, low-chroma gradient, with a single vibrant teal accent.

- **Background (`#24252d`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`rgba(255,255,255,0.75)`)** — uses `ink-soft` token
- **Accent (`#33ada9`)** — uses `accent` token
- **Muted (`rgba(255,255,255,0.4)`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.075)`)** — uses `line` token

## Typography

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

## Layout

Centered single-column layout on hero, transitioning to a 2-column grid for features.

*Rhythm:* Base 4px scale with generous padding (32-64px) for large sections.

## Elevation & Depth

- rgba(0, 0, 0, 0.1) 0px 8px 16px 0px
- Borders: Subtle 1-2px white borders with varying opacity (0.4 to 0.75) or a solid white stroke.

## Shapes

- `sm`: 4px
- `md`: 6px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Rounded rectangles with solid teal fill for primary actions, and thin white borders for secondary actions.
- **card:** Cards with images and subtle shadows, often used for template previews.
- **chip:** N/A
- **input:** N/A
- **hero:** Full-width centered layout with a large logo, headline, sub-headline, and primary CTA button.

## Do's and Don'ts

**Don't:**
- Don't use multiple competing accent colors — screenshot shows a single teal (#33ada9) as the only vibrant hue.
- Don't use complex, multi-layered gradients — screenshot shows a simple two-color linear gradient overlay.
- Don't use decorative or serif typefaces — screenshot shows a clean, standard grotesque-sans (Arial/Helvetica).
- Don't use heavy, solid black backgrounds — screenshot shows a dark charcoal (#24252d) as the primary background.
- Don't use square, sharp corners for buttons — screenshot shows consistent 6px rounded corners.
- Don't use wide, sprawling layouts — screenshot shows content constrained to a narrow, centered column.

---

## System Prompt (paste into AI agent)

```
Carrd is a minimalist, user-friendly tool for creating simple one-page websites. The design utilizes a dark, desaturated palette centered around charcoal (#24252d) with a subtle purple-blue gradient overlay. Typography is strictly functional, relying on standard system grotesque-sans fonts (Arial/Helvetica) for all display and body text. The single vibrant accent is a muted teal (#33ada9), used exclusively for primary call-to-action buttons to provide clear visual guidance. Critical design constraints include avoiding complex color schemes, maintaining a strictly centered single-column or simple 2-column layout, and using only consistent 6px rounded corners for interactive elements. The overall tone is calm, restrained, and highly focused on clarity and ease of use.
```