# Cuberto · Design system migration spec

> Source: https://cuberto.com  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of how a restricted monochrome palette and bold typography can establish a highly premium and professional agency identity.

## 1. Identity DNA

The Cuberto system operates like a high-end design and engineering studio, one that speaks through stark contrast and confident typography rather than ornamental detail. Its identity is built on a foundation of premium, digital craft—a deliberate marriage of bold minimalism and expert execution that feels both architectural and inevitable.

**One-liner:** A monochrome agency portfolio that uses massive sans-serif headings and dark photographic hero sections to establish a premium, craftsmanship-first identity.
**Keywords:** premium · expertise · digital craft · bold · minimal
**Analogy:** A high-end design and engineering studio that speaks through stark contrast and confident typography.

## 2. Color

The color system is a strict monochrome hierarchy, relying on stark black-and-white contrast to establish a premium, sophisticated foundation. This deliberate restraint allows high-quality photography to provide the only chromatic variation within the interface.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#161616` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#888888` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

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

The principle is absolute: color is reserved for content, not decoration, creating a gallery-like neutrality that foregrounds the work itself.

## 3. Typography

Typography here is a tool for establishing structure and voice. A clean, geometric grotesque-sans-serif is deployed at massive scales for display and at refined sizes for UI, using tight tracking for headlines and generous spacing for legibility to build an architectural, confident presence.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 81px | 1.0 | 400 | -1.62px | Main hero headline |
| heading | 23.4px | 1.2 | 400 | 0.468px | Subheadings and large labels |
| body | 18px | 1.22 | 400 | 0px | Primary body text and project descriptions |
| caption | 10.31px | 1.15 | 400 | 0.432px | Navigation links, small labels, and contact text |

**Type rules:**
- 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.

## 4. Spacing

Spatial rhythm is asymmetric and spacious, using large gaps between sections to let content breathe and to reinforce the system's confident, uncluttered pace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Asymmetric and spacious, using large gaps (e.g., 90px) between major sections to let content breathe.

## 5. Surfaces

Surfaces are defined by flat, clean planes with an absence of drop shadows, relying on minimal 1px borders and generous rounded corners to define interactive boundaries and create depth through layering alone.

- **Radius:** sm 18px · md 18px · lg 72px · pill 99999px
- **Shadows:**
  - none
- **Borders:** Minimal 1px solid borders used only for interactive elements and separators.

## 6. Layout

The layout skeleton begins with large-scale, full-width hero sections featuring centered typography and dark media containers. This dominant introduction then transitions into a clean, two-column project grid, establishing a clear visual and informational hierarchy.

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

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

## 7. Motion & Interaction

Motion is treated as a refined material property, utilizing smooth, physics-based sliding for page transitions and persistent, rotating circular text badges for interactive prompts. The philosophy is one of intentional, long-duration transforms that feel physical and deliberate rather than merely decorative.

- **Durations:** micro 300ms · small 400ms · medium 1200ms
- **Easing:** `cubic-bezier(0.16, 1, 0.3, 1)`
- **Patterns:**
  - Smooth, physics-based sliding for page transitions and element reveals.
  - Persistent, rotating circular text badges for interactive prompts.

- **Hover:** Subtle scaling or opacity shifts on interactive elements to provide feedback without distraction.
- **Click:** Smooth, immediate state changes with subtle motion.
- **Transition:** Long-duration (1.2s) cubic-bezier transforms for major layout shifts or parallax effects.
- **Keyboard:** Standard focus management, likely using visible outlines or subtle background shifts.

## 8. Voice & Don'ts

The editorial voice is confident, professional, and understated, matching the visual system's stark clarity. Headlines are short and descriptive, CTAs are persistent but unobtrusive, and the language avoids marketing jargon or casual flourish in favor of direct, expert communication.

- **Tone:** Confident, professional, and understated.
- **Headline style:** Short, punchy, and descriptive, focusing on the core value proposition.
- **CTA style:** Persistent but unobtrusive, often utilizing the rotating circular badge.
- **Avoid:** Marketing jargon / Excessive exclamation points / Vague or flowery language / Overly casual or playful tone

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

The system deliberately omits decorative fonts, bright accent colors, cluttered interfaces, and heavy drop shadows, maintaining its premium, architectural feel through disciplined subtraction.

## System Prompt (paste into AI tool)

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