# Custo · Design system migration spec

> Source: https://custo.io  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of restrained, product-focused design that uses bold typography and a monochromatic palette to convey premium quality.

## 1. Identity DNA

Custo’s design system is an exercise in architectural restraint, where every element serves the product it frames. The system draws a direct analogy to high-end consumer electronics: precision-machined, secure, and intentionally minimal. It is a landscape of considered surfaces and bold, graphic typography.

**One-liner:** A premium, minimalist landing page for a smart mailbox, emphasizing physical hardware and a companion app through bold typography and restrained aesthetics.
**Keywords:** Smart · Secure · Premium · Minimalist · Hardware
**Analogy:** High-end consumer electronics meets secure home infrastructure.

## 2. Color

The color palette is a study in monochromatic discipline, anchored by a single mid-tone gray. Pure black and white provide not just contrast, but the very structure for hierarchy and focus.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#8e9194` | main background |
| `--bg-soft` | `#ffffff` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#a7aaad` | placeholder |
| `--line` | `rgba(167,170,173,1.0)` | divider |

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

The governing principle is that a single, restrained hue can convey more sophistication than a spectrum of competing colors.

## 3. Typography

Typography is the system’s primary graphic voice, built entirely from the geometric-sans category. This choice delivers a confident, direct tone, with headlines set tight and bold to assert presence without ornament.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 1.0 | 500 | -2px | Hero brand watermark |
| heading | 58px | 1.05 | 500 | -1px | Primary hero headlines |
| subheading | 38px | 1.1 | 500 | -0.5px | Section headlines |
| body | 16px | 1.15 | 400 | 0px | Body text, navigation links |

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

## 4. Spacing

The spatial rhythm is defined by generous padding and gaps, creating a sense of premium negative space that frames content like a curated exhibition.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding and gaps create a sense of premium space.

## 5. Surfaces

Surfaces are deliberately flat and depth is implied, not rendered. Separation is achieved through minimal means, favoring subtle bottom borders over shadows or cards.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Minimal, relying on subtle bottom borders for separation.

## 6. Layout

The layout skeleton begins with a full-bleed hero container that commands the viewport, where large text and overlapping product imagery establish scale. Subsequent sections are stacked in a clear, linear progression that maintains visual calm.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is employed as a deliberate reveal, not a decoration. Animations like clip-path transitions and smooth opacity shifts run on a measured 0.6–0.8 second timeline, reinforcing the system’s sense of precision.

- **Durations:** micro 225ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.165, 0.84, 0.44, 1)`
- **Patterns:**
  - Reveal animations using clip-path
  - Smooth color and opacity transitions

- **Hover:** Subtle state changes on interactive elements.
- **Click:** Standard pointer cursor on clickable elements.
- **Transition:** Smooth transitions applied via cubic-bezier easing.
- **Keyboard:** Standard focus management for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident and benefit-oriented, using short, impactful headlines and simple, action-driven CTAs. It communicates directly, avoiding cluttered interfaces and generic, friendly language.

- **Tone:** Confident, direct, and premium.
- **Headline style:** Short, impactful, and benefit-oriented.
- **CTA style:** Simple, action-oriented links or buttons.
- **Avoid:** Cluttered interfaces / Loud, multi-colored palettes / Generic, friendly language

### Don'ts
- ❌ 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.

The system deliberately avoids playful elements, saturated colors, and decorative typography to keep the focus firmly on the physical product and its secure, minimalist value.

## System Prompt (paste into AI tool)

```
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.
```