---
name: Letter
description: "The design masterfully blends cinematic photography with clinical layout precision to redefine the expected visual language of financial services."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  secondary: "#191b1f"
  tertiary: "#186f64"
  neutral: "#e7e8e8"
  bg-soft: "#f6f9f9"
  bg-quiet: "#e6ebec"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 46px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.5px"
  h1:
    fontFamily: geometric-sans
    fontSize: 46px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "normal"
  h2:
    fontFamily: geometric-sans
    fontSize: 28px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "normal"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 2.0
    fontWeight: 400
    letterSpacing: "normal"

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

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

---

## Overview

A refined, modern financial platform for sophisticated wealth management.

*A digital private bank that feels like a contemporary art gallery—refined, spacious, and distinctly premium.*

## Colors

A restrained, neutral-dominant palette anchored by a sophisticated teal accent to convey calm, modern wealth.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#191b1f`)** — uses `ink-soft` token
- **Accent (`#186f64`)** — uses `accent` token
- **Muted (`#e7e8e8`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

- Use transitional-serif for prominent display text to establish authority
- Use geometric-sans for all UI text to ensure clarity and modernity
- Limit weight variation to regular, medium, and semibold to maintain a calm visual rhythm

## Layout

A structured grid that transitions from a full-bleed, immersive hero to a multi-column layout for feature cards.

*Rhythm:* Generous vertical rhythm with high line-heights (up to 2.0) to create an airy, luxurious feel.

## Elevation & Depth

- Borders: Minimal use of borders, relying on subtle background color shifts for surface separation.

## Shapes

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

## Components

- **button:** Clean, rectangular buttons with sharp corners (2px radius), utilizing both high-contrast (solid black) and brand-color (teal) variants.
- **card:** Large, color-tinted background blocks (pale blue, mint green) that define distinct feature areas without strict container borders.
- **hero:** A dramatic, full-viewport introduction featuring a cinematic, dark abstract background image and large, elegant typography.

## Do's and Don'ts

**Don't:**
- don't use rounded corners — screenshot shows sharp 2px radius buttons
- don't use bright, neon accents — screenshot shows a muted teal #186f64 instead
- don't use dense, cramped layouts — screenshot shows generous padding and high line-heights
- don't use playful or decorative illustrations — screenshot uses abstract, photographic imagery
- don't use all-caps for large headings — screenshot uses title case or sentence case
- don't use dark mode as default — screenshot shows a predominantly white and light gray interface

---

## System Prompt (paste into AI agent)

```
This system represents a premium, modern fintech platform for high-net-worth wealth management. The identity is sophisticated and calm, utilizing a restrained palette: crisp white backgrounds (#ffffff, #f6f9f9) paired with deep inks (#000000, #191b1f) and a single muted teal accent (#186f64). Typography is a refined mix of transitional-serif for display headings and geometric-sans for UI elements. Critical constraints: never use heavy drop shadows or bright neon accents, always maintain generous whitespace and high line-heights (up to 2.0), and strictly adhere to the 2px button corner radius. The layout prioritizes cinematic hero sections and large, airy feature blocks, creating a confident and luxurious digital experience.
```