---
name: Cuberto
description: "This site is a perfect example of how a restricted monochrome palette and bold typography can establish a highly premium and professional agency identity."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  neutral: "#888888"
  bg-quiet: "#161616"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 81px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.62px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 23.4px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0.468px"
  body:
    fontFamily: grotesque-sans
    fontSize: 18px
    lineHeight: 1.22
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 10.31px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0.432px"

rounded:
  sm: 18px
  md: 18px
  lg: 72px
  pill: 99999px

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

---

## Overview

A monochrome agency portfolio that uses massive sans-serif headings and dark photographic hero sections to establish a premium, craftsmanship-first identity.

*A high-end design and engineering studio that speaks through stark contrast and confident typography.*

## Colors

Strict monochrome hierarchy using stark black-and-white contrast, allowing high-quality photography to provide the only color.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#888888`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

- Use tight tracking (e.g., -1.62px) for large display text to create a solid, architectural feel.
- Use generous tracking (e.g., 0.468px) for smaller text to maintain high legibility.
- Limit font weights mostly to regular (400), using bold (700) sparingly for emphasis.

## Layout

Large-scale hero sections with full-width media and centered typography, transitioning into 2-column project grids.

*Rhythm:* Asymmetric and spacious, using large gaps (e.g., 90px) between major sections to let content breathe.

## Elevation & Depth

- none
- Borders: Minimal 1px solid borders used only for interactive elements and separators.

## Shapes

- `sm`: 18px
- `md`: 18px
- `lg`: 72px
- `pill`: 99999px

## Components

- **button:** Pill-shaped (radius: 99999px) buttons, typically with a solid black or white background and minimal padding.
- **card:** Project cards with large, rounded (18px) photographic thumbnails and concise, multi-line text labels.
- **chip:** Circular rotating contact badges used for persistent, non-intrusive calls to action.
- **input:** Minimal text inputs, likely underlined or borderless to match the clean aesthetic.
- **hero:** A dominant, full-screen hero with massive 81px typography, a single subtitle line, and a dark, rounded-corner media container.

## Do's and Don'ts

**Don't:**
- Don't use multiple bright accent colors — screenshot shows a strict monochrome palette.
- Don't use decorative or script fonts — screenshot shows a consistent, clean grotesque-sans-serif.
- Don't clutter the UI with many small elements — screenshot shows massive amounts of negative space.
- Don't use sharp corners on all elements — screenshot shows consistent use of rounded corners (18px to pill).
- Don't use heavy drop shadows or 3D effects — screenshot shows flat, clean surfaces.
- Don't center-align every piece of text — screenshot shows left-aligned labels in project grids.

---

## System Prompt (paste into AI agent)

```
This is a high-end digital design agency portfolio characterized by extreme minimalism and bold typography. The color palette is strictly monochromatic, relying on pure white (#FFFFFF), solid black (#000000), and a light gray (#888888) for secondary text. The typography features a clean, geometric grotesque-sans-serif font used at both massive display sizes (81px) and small UI scales. Layouts are spacious, using large gaps and rounded corners (18px) to soften the stark contrast. Key critical donts: avoid any use of bright accent colors, never use decorative or serif fonts, and do not fill the screen with excessive UI components. Maintain a premium, refined, and architectural feel throughout.
```