Studio Tumulte

# Studio Tumulte — Style Reference
> Editorial canvas, artful typography

**Theme:** light

Studio Tumulte employs a minimal, artistic design language centered around a muted, almost-achromatic palette, punctuated by a single, strong blue accent. The layout is spacious, with content given ample room to breathe. Typography is a core expressive element, featuring custom fonts that lend a distinctive, editorial feel, while components are kept understated and border-focused, allowing content and subtle visual flair to dominate.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#000000` | `--color-ink` | Primary text, borders for outlines, decorative accents, button outlines. Creates a stark contrast against light backgrounds |
| Canvas | `#fef7ef` | `--color-canvas` | Dominant page background, providing a soft, warm base for content |
| Soft Taupe | `#eedfd9` | `--color-soft-taupe` | Subtle background for alternate sections or elements, offering a slight visual break from the main canvas |
| Art Blue | `#3d50ff` | `--color-art-blue` | Key accent color, used for prominent graphic elements and visual focal points, particularly within imagery or abstract shapes |

## Tokens — Typography

### Moche Light — Headlines and prominent display text. The light weight at large sizes creates an airy, elegant, and almost whisper-like presence, contrasting typical bold headline conventions. · `--font-moche-light`
- **Substitute:** Montserrat Thin
- **Weights:** 400
- **Sizes:** 18px, 70px
- **Line height:** 0.80, 1.25
- **Role:** Headlines and prominent display text. The light weight at large sizes creates an airy, elegant, and almost whisper-like presence, contrasting typical bold headline conventions.

### Moche — Body text, links, and button labels. Provides clarity and an understated yet distinctive feel, complementing the lighter headline variant. · `--font-moche`
- **Substitute:** Montserrat
- **Weights:** 400
- **Sizes:** 14px, 18px
- **Line height:** 1.25
- **Role:** Body text, links, and button labels. Provides clarity and an understated yet distinctive feel, complementing the lighter headline variant.

### Forno-r — Decorative text and stylistic elements, often used for wordmark or specific typographic flourishes due to its unique character. · `--font-forno-r`
- **Substitute:** Playfair Display
- **Weights:** 400
- **Sizes:** 18px, 70px
- **Line height:** 0.80, 1.25
- **Role:** Decorative text and stylistic elements, often used for wordmark or specific typographic flourishes due to its unique character.

## Tokens — Spacing & Shapes

**Base unit:** 6px

**Density:** spacious

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 18 | 18px | `--spacing-18` |
| 20 | 20px | `--spacing-20` |
| 36 | 36px | `--spacing-36` |
| 43 | 43px | `--spacing-43` |
| 71 | 71px | `--spacing-71` |
| 127 | 127px | `--spacing-127` |
| 134 | 134px | `--spacing-134` |
| 161 | 161px | `--spacing-161` |
| 212 | 212px | `--spacing-212` |

### Border Radius

| Element | Value |
|---------|-------|
| buttons | 0px |
| menuIcon | 9999px |

### Layout

- **Page max-width:** 1354px
- **Section gap:** 71px
- **Card padding:** 18px
- **Element gap:** 20px

## Components

### Ghost Button
**Role:** Interactive elements, navigations, often appearing as plain text with hover states.

Transparent background, text color 'Ink' (#000000), no border or padding initially, adapting to content naturally. Provides functionality without visual weight.

### Menu Toggle Circle
**Role:** Primary navigation trigger, always visible with a distinct visual style.

Circular button with 'Ink' (#000000) border, 9999px border-radius, transparent background, and 'Ink' (#000000) text. Text 'M e n u' implies an open character spacing.

### Headline Stack
**Role:** Prominent textual content sections, often appearing in two lines.

Each line of text is typically 'Moche Light' at 70px, weight 400, color 'Ink' (#000000), with a line-height of 0.8. They are arranged vertically with the element gap of 20px.

## Do's and Don'ts

### Do
- Prioritize 'Ink' (#000000) for all text and UI outlines, establishing strong contrast against light backgrounds.
- Utilize 'Canvas' (#fef7ef) as the predominant background color for all main content areas.
- Employ 'Moche Light' for all primary headings at 70px to convey a light, elegant tone, using a line-height of 0.8.
- Maintain uniform 0px border-radius for all primary UI elements to preserve a crisp, angular aesthetic.
- Implement the 71px 'sectionGap' consistently between major content blocks for generous vertical rhythm.
- Embed the 'Art Blue' (#3d50ff) accent selectively, primarily for artistic graphic elements or distinctive visual highlights, not for general UI.
- Keep interactive controls like buttons simple with transparent backgrounds and 'Ink' (#000000) text as ghost elements.

### Don't
- Avoid using bold or heavy font weights for headlines; the lightness of 'Moche Light' is a signature characteristic.
- Do not introduce strong saturations or hues beyond 'Art Blue' and the muted neutrals; the palette is intentionally restrained.
- Refrain from using shadows or strong elevation effects; the design emphasizes flat surfaces and crisp outlines.
- Do not deviate from the 0px border-radius for non-circular components; sharp edges are essential to the aesthetic.
- Do not fill buttons with solid colors; all primary interactive elements should remain ghosted or outlined.
- Avoid dense information layouts; spaciousness between elements is crucial for the design's breathability and elegance.
- Do not use generic system fonts; custom fonts 'Moche', 'Moche Light', and 'Forno-r' are integral to the brand's typographic identity.

## Imagery

The site uses a mix of abstract, artistic photography, and product-focused imagery. Photography often features blurred or distorted subjects, sometimes tinted with brand accent colors like 'Art Blue' or soft gradients, creating an ethereal and artistic mood rather than descriptive realism. Imagery is frequently contained within distinct shapes, sometimes rotated slightly, breaking free from traditional grid alignment. Icons, if visible, are minimalist outlines. Image density is moderate, used to punctuate textual content and establish atmospheric breaks rather than illustrate every point.

## Layout

The page adheres to a max-width 1354px contained layout, centered on a background of 'Canvas'. The hero section features a centered, multi-line typographic headline (Moche Light) with an abstract art piece slightly rotated and layered within it, setting a unique, editorial tone. Sections maintain a consistent 'sectionGap' of 71px, creating a spacious vertical rhythm. Content arrangement is typically centered or in two-column structures with text and imagery, favoring an artful, asymmetrical balance over strict grids. Navigation is minimal, limited to a circular menu toggle in the top right. The overall impression is one of artful curation and generous breathing room.

## Agent Prompt Guide

Quick Color Reference:
text: #000000
background: #fef7ef
border: #000000
accent: #3d50ff
primary action: no distinct CTA color

Example Component Prompts:
1. Create a hero section: 'Canvas' (#fef7ef) background. Centered headline 'création graphique' in two lines, 'Moche Light' weight 400, 70px, lineHeight 0.8, color 'Ink' (#000000). Embed a 400x400px image with a slight rotation at its center, using 'Art Blue' (#3d50ff) as a dominant color.
2. Create a navigation toggle: Circular button with a 9999px border-radius, 'Ink' (#000000) 1px border, transparent background, and text 'M e n u' in 'Moche' weight 400, 14px, #000000.
3. Create a content section with a subtle background: Use 'Soft Taupe' (#eedfd9) for the background. Include a block of body text (e.g., promotional text) in 'Moche' weight 400, 18px, 'Ink' (#000000), with 'cardPadding' of '18px'. Max-width should be '1354px' and centered.

## Similar Brands

- **AIGA** — Employs custom typography as a core expressive element, often using spacious layouts and a minimal color palette.
- **Pentagram** — Focuses on bold, geometric layouts and distinct type choices, with a strong emphasis on clean, almost minimalist design.
- **Actual Source** — Utilizes custom fonts, a graphic, editorial approach to web design, and a curated, often monochromatic color scheme with occasional vibrant accents.
- **Kerning Cultures** — Features a strong emphasis on unique typography, spacious, content-forward layouts, and a refined, often muted color palette.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink: #000000;
  --color-canvas: #fef7ef;
  --color-soft-taupe: #eedfd9;
  --color-art-blue: #3d50ff;

  /* Typography — Font Families */
  --font-moche-light: 'Moche Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-moche: 'Moche', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-forno-r: 'Forno-r', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-sm: 14px;
  --leading-sm: 1.25;
  --text-lg: 18px;
  --leading-lg: 1.25;
  --text-5xl: 70px;
  --leading-5xl: 1.25;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 6px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-36: 36px;
  --spacing-43: 43px;
  --spacing-71: 71px;
  --spacing-127: 127px;
  --spacing-134: 134px;
  --spacing-161: 161px;
  --spacing-212: 212px;

  /* Layout */
  --page-max-width: 1354px;
  --section-gap: 71px;
  --card-padding: 18px;
  --element-gap: 20px;

  /* Named Radii */
  --radius-buttons: 0px;
  --radius-menuicon: 9999px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink: #000000;
  --color-canvas: #fef7ef;
  --color-soft-taupe: #eedfd9;
  --color-art-blue: #3d50ff;

  /* Typography */
  --font-moche-light: 'Moche Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-moche: 'Moche', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-forno-r: 'Forno-r', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-sm: 14px;
  --leading-sm: 1.25;
  --text-lg: 18px;
  --leading-lg: 1.25;
  --text-5xl: 70px;
  --leading-5xl: 1.25;

  /* Spacing */
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-36: 36px;
  --spacing-43: 43px;
  --spacing-71: 71px;
  --spacing-127: 127px;
  --spacing-134: 134px;
  --spacing-161: 161px;
  --spacing-212: 212px;
}
```