Savoirfaire

# Savoirfaire — Style Reference
> Black canvas, neon spark. A singular, vivid green element electrifies an otherwise monochrome dark mode interface.

**Theme:** dark

Savoirfaire's design evokes a gallery-like atmosphere, stark and minimal, where a single vibrant accent commands attention. The all-black background with subtle gray text offers a high-contrast canvas, allowing the searing neon green to act as a singular, sharp focal point. Typography features extreme weight variations; ultra-thin headlines dominate at immense sizes, lending an almost whispered authority, while body text remains crisp and functional against the dark. The absence of gradients, shadows, or rounded elements emphasizes the flat, almost two-dimensional nature of the display.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Void Black | `#000000` | `--color-void-black` | Page backgrounds, container backgrounds, primary text for inverted elements. |
| Glow Green | `#cdfd50` | `--color-glow-green` | Primary accent color for interactive elements, highlights, and calls to action. Its vividness creates immediate visual interest against the dark background. |
| Cloud White | `#ffffff` | `--color-cloud-white` | Secondary text color for primary headings on dark backgrounds, offering maximum contrast and visual weight. |
| Ghost Gray | `#899090` | `--color-ghost-gray` | Subtle secondary text, icons, and non-critical information on dark backgrounds. Provides readability without overwhelming the primary white text. |
| Mist Gray | `#808080` | `--color-mist-gray` | Tertiary text and subtle distinctions on dark backgrounds for a softer, understated appearance. |

## Tokens — Typography

### editorial-thin — Display headlines and large numerical indicators. The ultra-thin weight at extreme sizes creates a sense of fragility and high fashion, distinguishing it from conventional bold headings. · `--font-editorial-thin`
- **Substitute:** IBM Plex Sans Thin
- **Weights:** 100
- **Sizes:** 360px
- **Line height:** 1.00
- **Letter spacing:** normal
- **Role:** Display headlines and large numerical indicators. The ultra-thin weight at extreme sizes creates a sense of fragility and high fashion, distinguishing it from conventional bold headings.

### haas-regular — Body copy, primary navigation, and detailed information. Its regular weight ensures readability against the dark background while complementing the extreme headline style. · `--font-haas-regular`
- **Substitute:** Inter
- **Weights:** 400
- **Sizes:** 13px, 20px
- **Line height:** 1.00, 1.11
- **Letter spacing:** normal
- **Role:** Body copy, primary navigation, and detailed information. Its regular weight ensures readability against the dark background while complementing the extreme headline style.

## Tokens — Spacing & Shapes

**Density:** spacious

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 50 | 50px | `--spacing-50` |

### Border Radius

| Element | Value |
|---------|-------|
| all | 0px |

### Layout

- **Section gap:** 50px
- **Card padding:** 0px
- **Element gap:** 50px

## Components

### Hero Display Numerals
**Role:** Headline component

Large, ultra-thin numerals set against the Void Black background. Uses 'editorial-thin' font at 360px, weight 100, color Cloud White (#ffffff). No padding or borders, as it's a pure overlay element.

### Paragraph Text
**Role:** Body text component

Standard body text using 'haas-regular' font at 20px for primary paragraphs, 13px for smaller annotations, weight 400. Color is Ghost Gray (#899090) or Mist Gray (#808080) for softer emphasis.

### Accent Link
**Role:** Interactive element

Inline text link with 'haas-regular', weight 400. Color is Glow Green (#cdfd50). No underline or other decorative elements, focus is purely on color change.

## Do's and Don'ts

### Do
- Do use Void Black (#000000) as the universal background color for all sections and surfaces.
- Do apply Glow Green (#cdfd50) strictly for interactive elements and brand highlights to maintain its prominent effect.
- Do use editorial-thin, weight 100, at sizes of 360px for all display-level headings and numerical elements to create drama.
- Do maintain a stark, borderless, and shadow-free aesthetic for all containers and elements.
- Do use Ghost Gray (#899090) or Mist Gray (#808080) for body text and secondary information, choosing based on desired contrast level.
- Do align primary content to the left margin, maintaining a minimalist information hierarchy.
- Do maintain 0px radius for all elements, ensuring sharp, unyielding edges.

### Don't
- Don't introduce any colors other than the defined brand palette.
- Don't add any form of shadows or gradients; rely on color contrast and typographic scale for depth.
- Don't use bold weights for headlines; the 100-weight of 'editorial-thin' is crucial to the brand's quiet authority.
- Don't apply rounded corners to any component; maintain the sharp, angular aesthetic.
- Don't use underlines for links; color change to Glow Green (#cdfd50) is the sole indicator of interactivity.
- Don't use photography or illustrations that clash with the stark, flat, and minimalist aesthetic.

## Imagery

The site's visual language is characterized by an almost complete absence of traditional rich imagery like photography or complex illustrations. Instead, it relies on stark, elemental graphics, most notably the 'Glow Green' starburst motif acting as a singular, abstract brand marker. The focus is purely on typography and color contrast, with any visual elements serving as decorative accents or abstract markers rather than conveying narrative or product information. The general density is text-dominant, with graphic elements providing visual breaks rather than competing for attention.

## Layout

The page maintains an essentially full-bleed, max-width layout pattern where content is centered horizontally but often left-aligned within its content block. The hero section is a full-viewport dark background with centered, extremely large typography. Sections proceed with a consistent vertical spacing of 50px, providing ample breathing room. Content arrangement is primarily a single column for text blocks, frequently punctuated by large numerical displays. There are no apparent grid structures for cards or feature sections; the layout is linear and vertical, emphasizing sequential viewing. Navigation is implicit within the content flow rather than a fixed header or sidebar.

## Agent Prompt Guide

### Quick Color Reference
- Text (Heading): #ffffff
- Text (Body): #899090
- Background: #000000
- Accent: #cdfd50
- Primary Interactive: #cdfd50

### 3-5 Example Component Prompts
1. Create a display headline section: background #000000. Headline '100' in editorial-thin, weight 100, 360px, line-height 1.00, color #ffffff. Align text center. Section padding of 50px top and bottom.
2. Create a body text block: background #000000. Text 'Knowing by doing' in haas-regular, weight 400, 20px, line-height 1.11, color #899090. Max width 600px, centered horizontally. Element gap of 50px around.
3. Create an accent link: text 'Digital & Branding Design' in haas-regular, weight 400, 20px, line-height 1.11. Color #cdfd50. No underline. Position inline with other text.

## Similar Brands

- **A.P.C.** — Monochromatic approach with minimalist typography and stark product presentation.
- **Acne Studios** — Emphasis on large, simple typography and a clean, almost sterile visual environment.
- **The Row** — Understated luxury through extreme minimalism, reliance on texture (implied by darkness) and precise typography.
- **Balenciaga (some campaigns)** — Dark, severe aesthetic with sharp contrasts and a focus on essential, bold statements.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-void-black: #000000;
  --color-glow-green: #cdfd50;
  --color-cloud-white: #ffffff;
  --color-ghost-gray: #899090;
  --color-mist-gray: #808080;

  /* Typography — Font Families */
  --font-editorial-thin: 'editorial-thin', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-haas-regular: 'haas-regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-sm: 13px;
  --leading-sm: 1;
  --text-xl: 20px;
  --leading-xl: 1;
  --text-5xl: 360px;
  --leading-5xl: 1;

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

  /* Spacing */
  --spacing-50: 50px;

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

  /* Named Radii */
  --radius-all: 0px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-void-black: #000000;
  --color-glow-green: #cdfd50;
  --color-cloud-white: #ffffff;
  --color-ghost-gray: #899090;
  --color-mist-gray: #808080;

  /* Typography */
  --font-editorial-thin: 'editorial-thin', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-haas-regular: 'haas-regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-sm: 13px;
  --leading-sm: 1;
  --text-xl: 20px;
  --leading-xl: 1;
  --text-5xl: 360px;
  --leading-5xl: 1;

  /* Spacing */
  --spacing-50: 50px;
}
```