Savoirfaire

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

**Theme:** dark

**Site:** https://savoirfaire.nyc

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 |
|------|------|------|------|
| 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. |
| Void Black | `#000000` | `--color-void-black` | Page backgrounds, container backgrounds, primary text for inverted elements. |
| 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
- **Substitute:** IBM Plex Sans Thin
- **Weights:** 100
- **Sizes:** 360px
- **Line height:** 1
- **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
- **Substitute:** Inter
- **Weights:** 400
- **Sizes:** 13px, 20px
- **Line height:** 1, 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

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

## Tokens — Radius

- **all:** 0px

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

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

## Components

### Hero Display Numerals

### Accent Link Button Group

### Stat Block with Body Copy

### Hero Display Numerals
*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
*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
*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.

## Guidelines

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

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