Leo Natsume

# Leo Natsume — Style Reference
> Gallery Wall Precision

**Theme:** light

The Leo Natsume design system employs a stark, almost monochromatic foundation, punctuated by a single vibrant red accent. Its visual identity relies on precise typography and the interplay of negative space to convey a high-end, minimalist aesthetic. The overall impression is one of restrained confidence, where visual information is carefully curated and presented without clutter. Components are lightweight, often outlined, and subtle surface variations define areas without heavy shadows.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#fafafa` | `--color-canvas-white` | Primary page background, light surface |
| Surface Cool | `#eeeeea` | `--color-surface-cool` | Secondary background, subtle surface elevations, muted text |
| Ink Black | `#000000` | `--color-ink-black` | Primary text, prominent borders, high-contrast elements |
| Deep Graphite | `#1c1d20` | `--color-deep-graphite` | Heading text, important links, secondary borders — slightly softer than pure black but still commanding |
| Medium Gray | `#323232` | `--color-medium-gray` | Link borders, subtle text |
| Muted Silver | `#8b8b8b` | `--color-muted-silver` | Body text, helper text, subdued borders |
| Light Concrete | `#c7c7c7` | `--color-light-concrete` | Hairline borders for navigational elements, dividers |
| Active Red | `#f41111` | `--color-active-red` | Red outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color |

## Tokens — Typography

### Arial — Utility text, small labels, and fallback for system elements. · `--font-arial`
- **Substitute:** Arial
- **Weights:** 400
- **Sizes:** 10px
- **Line height:** 1.20
- **Role:** Utility text, small labels, and fallback for system elements.

### wfont_b4f017_e9045633d52f4a2fa031ee07f7d9033d — Primary headings and body text. Provides a clean, modern geometric feel. · `--font-wfontb4f017e9045633d52f4a2fa031ee07f7d9033d`
- **Substitute:** Montserrat
- **Weights:** 400
- **Sizes:** 12px, 15px, 16px, 18px, 20px, 32px, 45px, 64px
- **Line height:** 1.05, 1.20, 1.30, 1.40, 1.60
- **Role:** Primary headings and body text. Provides a clean, modern geometric feel.

### wfont_b4f017_1511f1af80db4e64b4e84b3f76de255c — Display headings and subheadings, used for impactful statements. Offers an alternative large-scale presence. · `--font-wfontb4f0171511f1af80db4e64b4e84b3f76de255c`
- **Substitute:** Source Sans Pro
- **Weights:** 400
- **Sizes:** 12px, 15px, 16px, 18px, 20px, 32px, 45px, 64px
- **Line height:** 1.05, 1.20, 1.30, 1.40, 1.60
- **Role:** Display headings and subheadings, used for impactful statements. Offers an alternative large-scale presence.

### helvetica-w01-roman — Specific body text instances, contributing to subtle typographic variation. · `--font-helvetica-w01-roman`
- **Substitute:** Helvetica Neue
- **Weights:** 400
- **Sizes:** 12px
- **Line height:** 1.40
- **Role:** Specific body text instances, contributing to subtle typographic variation.

### wfont_b4f017_1511f1af80db4e64b4e84b3f76de255c — wfont_b4f017_1511f1af80db4e64b4e84b3f76de255c — detected in extracted data but not described by AI · `--font-wfontb4f0171511f1af80db4e64b4e84b3f76de255c`
- **Weights:** 400
- **Sizes:** 12px, 70px
- **Line height:** 1.4
- **Role:** wfont_b4f017_1511f1af80db4e64b4e84b3f76de255c — detected in extracted data but not described by AI

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.2 | — | `--text-caption` |
| body-lg | 15px | 1.2 | — | `--text-body-lg` |
| subheading | 18px | 1.4 | — | `--text-subheading` |
| heading | 32px | 1.05 | — | `--text-heading` |
| heading-lg | 45px | 1.05 | — | `--text-heading-lg` |
| display | 70px | 1.4 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 6 | 6px | `--spacing-6` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 14 | 14px | `--spacing-14` |
| 18 | 18px | `--spacing-18` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 43 | 43px | `--spacing-43` |
| 47 | 47px | `--spacing-47` |
| 57 | 57px | `--spacing-57` |
| 67 | 67px | `--spacing-67` |
| 71 | 71px | `--spacing-71` |
| 86 | 86px | `--spacing-86` |
| 200 | 200px | `--spacing-200` |

### Border Radius

| Element | Value |
|---------|-------|
| card | 20px |
| logo | 15.0211px |
| cardTop | 20px 20px 0px 0px |
| default | 0px |
| pillInteractive | 999px |
| largeInteractive | 5.56676px |
| smallInteractive | 3px |

### Layout

- **Section gap:** 43px
- **Card padding:** 0px
- **Element gap:** 6px

## Components

### Ghost Navigation Link
**Role:** Primary navigation item and general interactive text link.

Text only, `Ink Black` on `Canvas White` background, no padding or border. Hover states are implied by text color change or underscore, but not explicitly styled on base.

### Primary Branded Heading
**Role:** Large, eye-catching title for key sections.

Uses `wfont_b4f017_e9045633d52f4a2fa031ee07f7d9033d` at `64px` for the main text in `Deep Graphite`, with an `Active Red` accent over 'Let's Create'. No letter-spacing adjustment.

### Horizontal Divider
**Role:** Visual separation for sections or content blocks.

A `1px` high line using `Ink Black` as color, spanning the content width.

### Work Showcase Card
**Role:** Container for showcasing project images.

A card with `0px` padding, a top-left and top-right `border-radius` of `20px`, and no shadow. The background is transparent `rgba(243, 248, 240, 0)` but implies a base of `Canvas White`.

### Minimalist Feature Text
**Role:** Descriptive text for featured sections.

Uses `wfont_b4f017_e9045633d52f4a2fa031ee07f7d9033d` at `18px`, `Deep Graphite` color. It conveys important information without being a headline.

### Small Label Text
**Role:** Contextual labels or meta-information.

Uses `Arial` at `10px`, `Muted Silver` color. Often found as metadata or subtle annotations.

### Outlined Input Field
**Role:** Standard text input field.

Background `Canvas White`, border `1px` solid, color `Ink Black`. `Border-radius` varies for different interaction contexts (e.g. `999px` for pill-shaped email input, `5.56676px` for others).

## Do's and Don'ts

### Do
- Use `Canvas White (#fafafa)` as the dominant background for all pages and most surfaces.
- Emphasize content and hierarchy through `Ink Black (#000000)` for primary text and `Deep Graphite (#1c1d20)` for headings.
- Reserve `Active Red (#f41111)` strictly for brand accents, current state indicators, or impactful focal points, using it sparingly to maximize its effect.
- Implement horizontal dividers as `1px` lines in `Ink Black (#000000)` for clear visual separation.
- Employ a generous `43px` vertical `sectionGap` to maintain a spacious and uncluttered layout between major content blocks.
- Structure interactive elements like navigation items and input fields with thin `1px` borders, using `Light Concrete (#c7c7c7)` or `Ink Black (#000000)` depending on prominence.
- Apply `20px` `border-radius` to the top corners of `Work Showcase Card` elements to create a subtle architectural detail.

### Don't
- Avoid using drop shadows or heavy elevation styles; rely on color and subtle borders to define surface levels.
- Do not introduce additional vibrant colors beyond `Active Red (#f41111)` to maintain the high-contrast, minimalist palette.
- Refrain from using solid background colors for buttons unless it is a specific, single accent call to action.
- Do not deviate from the specified typeface families; `wfont_b4f017_e9045633d52f4a2fa031ee07f7d9033d` and `wfont_b4f017_1511f1af80db4e64b4e84b3f76de255c` are central to the brand's typographic identity.
- Do not overcrowd sections with dense information; maintain a comfortable `elementGap` of `6px` and focus on singular messages.
- Avoid decorative gradients; surfaces should remain flat and monochromatic.
- Do not use highly textured backgrounds; embrace clean, smooth surfaces characteristic of `Canvas White` and `Surface Cool`.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas White | `#fafafa` | Base page background |
| 1 | Surface Cool | `#eeeeea` | Subtle background for specific sections or meta-information areas. |

## Elevation

This design system explicitly avoids complex shadows. Elevation is primarily conveyed through subtle background color shifts (`Canvas White` to `Surface Cool`) and precise `1px` borders, maintaining a flat and clean aesthetic.

## Imagery

The visual language for imagery is characterized by high-fidelity 3D renders or tightly cropped product screenshots, typically presented against a neutral or white background. Photography appears to be minimal or entirely absent in product showcases. Illustrations are dimensional and often highly customized, featuring organic shapes and vibrant, multi-colored accents (e.g., the coiled lines in the hero section). Icons are minimal, outlined, and monochromatic, used for navigation or social links. Imagery generally holds significant visual weight, often serving as hero elements or key content dividers, and is well-contained within defined areas, not bleeding into the UI. The density of images is moderate; they are used strategically to showcase work rather than as constant decorative elements.

## Layout

The page primarily uses a full-bleed layout, particularly in the hero section, which features a large, striking visual with centered text. Content sections below often operate within a contained maximum width, centered on the screen. The section rhythm is quite open, defined by a generous `43px` vertical spacing between major blocks and often separated by `1px` `Ink Black` horizontal dividers. Content arrangements alternate between centered single-column text blocks and implicit two-column structures where an image is paired with text. Grid usage is visible in the form of work showcases. The overall density is spacious and clean, prioritizing breathing room. Primary navigation is a simple top bar, with ghost links to pages.

## Agent Prompt Guide

Quick Color Reference: 
text: #000000
background: #fafafa
border: #1c1d20
accent: #f41111
primary action: no distinct CTA color

Example Component Prompts:
1. Create a header: `Canvas White` background. Primary logo (L with red dot) on left. Right side has `Ghost Navigation Link` items: 'Home', 'Projects', 'Old But Gold', 'About', 'Contact' using `Deep Graphite (#1c1d20)` text (`wfont_b4f017_e9045633d52f4a2fa031ee07f7d9033d` at 15px). The 'Home' link should have a small red dot accent from `Active Red (#f41111)` below it.
2. Create a showcase section with the text 'Wired' as a main heading and 'Featuring Luxury brands' as a subheading. The main heading 'Wired' should use `Deep Graphite (#1c1d20)` in `wfont_b4f017_e9045633d52f4a2fa031ee07f7d9033d` at 64px. The subheading 'Featuring Luxury brands' should be `Muted Silver (#8b8b8b)` in `wfont_b4f017_e9045633d52f4a2fa031ee07f7d9033d` at 18px. Separate the header from the content with an `Horizontal Divider`.
3. Design a footer: `Surface Cool (#eeeeea)` background. Left aligned 'leonatsumeart@gmail.com' in `Ink Black (#000000)` `wfont_b4f017_e9045633d52f4a2fa031ee07f7d9033d` at 15px, with a `999px` radius border of `Ink Black (#000000)`. Centered below is 'Located in Porto Alegre, Brazil' `Ink Black (#000000)` `wfont_b4f017_e9045633d52f4a2fa031ee07f7d9033d` at 15px. Right aligned 'SOCIALS' `Muted Silver (#8b8b8b)` `Arial` at 10px, followed by small outlined social media icons in `Deep Graphite (#1c1d20)`.

## Similar Brands

- **Figma** — Shares a clean, minimalist aesthetic with high contrast text against a light background, and limited use of color for functional accents.
- **Linear** — Employs precise typography, extensive use of neutral colors including dark grays for text, and a strong emphasis on negative space and clear hierarchy without heavy ornamentation.
- **Stripe** — Features a modern, crisp UI with a predominantly white canvas, careful typographic pairing, and strategic use of a single accent color for calls to action or key indicators.
- **Apple (Product Pages)** — Similar approach to showcasing product visuals against stark, clean backgrounds, with large, impactful typography and a focus on clarity through minimalism.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas-white: #fafafa;
  --color-surface-cool: #eeeeea;
  --color-ink-black: #000000;
  --color-deep-graphite: #1c1d20;
  --color-medium-gray: #323232;
  --color-muted-silver: #8b8b8b;
  --color-light-concrete: #c7c7c7;
  --color-active-red: #f41111;

  /* Typography — Font Families */
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-wfontb4f017e9045633d52f4a2fa031ee07f7d9033d: 'wfont_b4f017_e9045633d52f4a2fa031ee07f7d9033d', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-wfontb4f0171511f1af80db4e64b4e84b3f76de255c: 'wfont_b4f017_1511f1af80db4e64b4e84b3f76de255c', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helvetica-w01-roman: 'helvetica-w01-roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --text-body-lg: 15px;
  --leading-body-lg: 1.2;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --text-heading: 32px;
  --leading-heading: 1.05;
  --text-heading-lg: 45px;
  --leading-heading-lg: 1.05;
  --text-display: 70px;
  --leading-display: 1.4;

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

  /* Spacing */
  --spacing-6: 6px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-43: 43px;
  --spacing-47: 47px;
  --spacing-57: 57px;
  --spacing-67: 67px;
  --spacing-71: 71px;
  --spacing-86: 86px;
  --spacing-200: 200px;

  /* Layout */
  --section-gap: 43px;
  --card-padding: 0px;
  --element-gap: 6px;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 5.56676px;
  --radius-2xl: 15.0211px;
  --radius-2xl-2: 20px;
  --radius-full: 999px;

  /* Named Radii */
  --radius-card: 20px;
  --radius-logo: 15.0211px;
  --radius-cardtop: 20px 20px 0px 0px;
  --radius-default: 0px;
  --radius-pillinteractive: 999px;
  --radius-largeinteractive: 5.56676px;
  --radius-smallinteractive: 3px;

  /* Surfaces */
  --surface-canvas-white: #fafafa;
  --surface-surface-cool: #eeeeea;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas-white: #fafafa;
  --color-surface-cool: #eeeeea;
  --color-ink-black: #000000;
  --color-deep-graphite: #1c1d20;
  --color-medium-gray: #323232;
  --color-muted-silver: #8b8b8b;
  --color-light-concrete: #c7c7c7;
  --color-active-red: #f41111;

  /* Typography */
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-wfontb4f017e9045633d52f4a2fa031ee07f7d9033d: 'wfont_b4f017_e9045633d52f4a2fa031ee07f7d9033d', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-wfontb4f0171511f1af80db4e64b4e84b3f76de255c: 'wfont_b4f017_1511f1af80db4e64b4e84b3f76de255c', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helvetica-w01-roman: 'helvetica-w01-roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --text-body-lg: 15px;
  --leading-body-lg: 1.2;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --text-heading: 32px;
  --leading-heading: 1.05;
  --text-heading-lg: 45px;
  --leading-heading-lg: 1.05;
  --text-display: 70px;
  --leading-display: 1.4;

  /* Spacing */
  --spacing-6: 6px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-43: 43px;
  --spacing-47: 47px;
  --spacing-57: 57px;
  --spacing-67: 67px;
  --spacing-71: 71px;
  --spacing-86: 86px;
  --spacing-200: 200px;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 5.56676px;
  --radius-2xl: 15.0211px;
  --radius-2xl-2: 20px;
  --radius-full: 999px;
}
```