---
name: Moderne St
description: "This site effectively uses bold typography and a unique color palette to create a professional yet creative atmosphere."
version: alpha

colors:
  background: "#F3EAE5"
  primary: "#3E3C43"
  secondary: "#7C7AAD"
  tertiary: "#FF7E85"
  neutral: "#7A7780"
  bg-quiet: "#171C5D"
  line: "rgba(124, 128, 173, 1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: transitional-serif
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A digital workspace providing highly tailored ad ideas and insights for creative teams.

*A vibrant, illustrated creative studio for ad teams.*

## Colors

Warm off-white backgrounds contrasted with deep indigo sections and bright coral accents.

- **Background (`#F3EAE5`)** — uses `bg` token
- **Primary text (`#3E3C43`)** — uses `ink` token
- **Secondary text (`#7C7AAD`)** — uses `ink-soft` token
- **Accent (`#FF7E85`)** — uses `accent` token
- **Muted (`#7A7780`)** — uses `muted` token
- **Borders (`rgba(124, 128, 173, 1.0)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** transitional-serif

- Use humanist sans-serif for impactful, large-scale display text.
- Use a transitional serif for body copy and detailed explanations.
- Maintain clear typographic hierarchy between large display text and standard body text.

## Layout

Standard responsive layout with a prominent hero section followed by content blocks.

*Rhythm:* Generous vertical spacing with large padding blocks to separate distinct content sections.

## Elevation & Depth

- Borders: Thin 2px borders used for outlined cards and buttons.

## Shapes

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

## Components

- **button:** Coral filled buttons with white text and a pill-shaped 'Get a Demo' variant.
- **card:** Cards with thin borders and rounded corners containing text or illustrations.
- **hero:** A split hero with large text on a dark background on the left and a colorful illustration on the right.

## Do's and Don'ts

**Don't:**
- Don't use a flat white background — the screenshot shows a warm off-white (#F3EAE5) for content sections.
- Don't use a bright primary color for the dark sections — the screenshot shows a deep indigo (#171C5D).
- Don't use a bright red for the accent color — the screenshot shows a soft coral (#FF7E85).
- Don't use purely geometric sans-serif fonts for body copy — the screenshot shows a transitional serif.
- Don't use heavily rounded corners for UI elements — the screenshot shows subtle 4px border-radius.
- Don't use drop shadows for card elements — the screenshot shows flat design with thin borders instead.

---

## System Prompt (paste into AI agent)

```
A SaaS tool for creative teams that provides ad ideas and insights. The palette features warm off-white backgrounds (#F3EAE5), deep indigo sections (#171C5D), and bright coral accents (#FF7E85). Typography uses humanist sans-serif for large display text and a transitional serif for body copy. Critical donts include: Do not use a flat white background; Do not use a bright primary color for dark sections; Do not use a bright red for the accent color. The design relies on bold, large typography and colorful, textured illustrations.
```