---
name: Custo
description: "This site is an excellent example of restrained, product-focused design that uses bold typography and a monochromatic palette to convey premium quality."
version: alpha

colors:
  background: "#8e9194"
  primary: "#000000"
  neutral: "#a7aaad"
  bg-soft: "#ffffff"
  line: "rgba(167,170,173,1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 120px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-2px"
  heading:
    fontFamily: geometric-sans
    fontSize: 58px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-1px"
  subheading:
    fontFamily: geometric-sans
    fontSize: 38px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A premium, minimalist landing page for a smart mailbox, emphasizing physical hardware and a companion app through bold typography and restrained aesthetics.

*High-end consumer electronics meets secure home infrastructure.*

## Colors

A restrained, sophisticated monochromatic palette anchored by a mid-tone gray, relying on pure black and white for contrast and hierarchy.

- **Background (`#8e9194`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#a7aaad`)** — uses `muted` token
- **Borders (`rgba(167,170,173,1.0)`)** — uses `line` token

## Typography

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

- Use the geometric-sans category for all text.
- Maintain tight line heights for large display type.

## Layout

Full-bleed hero with centered container, followed by stacked content sections.

*Rhythm:* Generous padding and gaps create a sense of premium space.

## Elevation & Depth

- Borders: Minimal, relying on subtle bottom borders for separation.

## Shapes

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

## Components

- **button:** Pill-shaped, semi-transparent white background with dark text.
- **card:** No visible cards in the provided screenshots.
- **chip:** No visible chips in the provided screenshots.
- **input:** No visible inputs in the provided screenshots.
- **hero:** Full-viewport hero with large left-aligned text, a prominent product image overlapping a giant watermark, and a simple CTA link.

## Do's and Don'ts

**Don't:**
- Don't use multiple competing accent colors — the screenshot shows a strictly monochromatic scheme of gray, black, and white.
- Don't use serif or playful fonts — the screenshot consistently uses a clean, geometric sans-serif for all text.
- Don't crowd the layout with too many elements — the screenshot uses generous whitespace and a clear visual hierarchy.
- Don't use drop shadows for depth — the screenshot relies on clean, flat design with no visible box shadows.
- Don't use bright, saturated backgrounds — the screenshot uses a muted, mid-tone gray as the primary background.
- Don't use small, cramped buttons — the screenshot features a large, pill-shaped primary call-to-action.

---

## System Prompt (paste into AI agent)

```
Generate designs for a premium, minimalist smart home hardware product. Use a restrained monochromatic palette anchored by a mid-tone gray (#8e9194), pure black (#000000), and white (#ffffff). Typography should be a clean, geometric sans-serif with bold, impactful headlines and tight line heights. Layouts must be spacious with generous padding, relying on full-bleed imagery and large watermark typography for visual interest. Avoid clutter, drop shadows, or multiple competing accent colors to maintain a high-end, architectural aesthetic. Critical: never use playful or decorative elements; keep the focus on the physical product and its core benefits.
```