UNVEIL®

# UNVEIL® — Style Reference
> Architectural blueprint on white marble. Information is presented with surgical precision on a crisp, unblemished background.

**Theme:** light

This design system evokes a sense of highly precise, almost clinical, digital presentation. The stark achromatic palette and geometric typography create a serious, focused atmosphere. The lack of color accents and subtle interactive states prioritize content and function, presenting information with direct clarity. The overlapping image layers give an illusion of depth and interaction.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Pitch Black | `#000000` | `--color-pitch-black` | Primary text, button borders, navigation items — establishes a high-contrast foundation for all content. |
| Canvas White | `#FFFFFF` | `--color-canvas-white` | Page backgrounds, interactive element fills — provides a pristine, expansive surface. |

## Tokens — Typography

### nb_international_proregular — All text elements: navigation links, button labels, main body text. Its subtle spacing and consistent weight are critical to the system's understated, technical feel. Letter spacing increases with font size, maintaining legibility and presence for smaller elements. · `--font-nbinternationalproregular`
- **Substitute:** Inter
- **Weights:** 400
- **Sizes:** 11px, 16px
- **Line height:** 1.05, 1.24, 1.50
- **Letter spacing:** 0.165, 0.304
- **Role:** All text elements: navigation links, button labels, main body text. Its subtle spacing and consistent weight are critical to the system's understated, technical feel. Letter spacing increases with font size, maintaining legibility and presence for smaller elements.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body | 16px | 1.05 | 0.304px | `--text-body` |

## Tokens — Spacing & Shapes

**Density:** compact

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 7 | 7px | `--spacing-7` |
| 10 | 10px | `--spacing-10` |
| 14 | 14px | `--spacing-14` |
| 16 | 16px | `--spacing-16` |
| 40 | 40px | `--spacing-40` |

### Border Radius

| Element | Value |
|---------|-------|
| all | 6px |

### Layout

- **Card padding:** 10-16px
- **Element gap:** 2-14px

## Components

### Navigation Link
**Role:** Primary Navigation

Black text (#000000) at 16px, weight 400. Letter spacing is 0.304px. Default line height is 1.05. No background, transparent. Active state unknown.

### Button Default
**Role:** Interactive Element

Transparent background, 1px black border (#000000), 6px border-radius. Padding: 40px top, 10px right, 7px bottom, 10px left. Text is black (#000000), 16px, weight 400, letter spacing 0.304px.

### Footer Link
**Role:** Sub-navigation/Utility

Black text (#000000) at 11px, weight 400. Letter spacing is 0.165px. No background. Default line height 1.05.

## Do's and Don'ts

### Do
- Maintain a monochromatic palette with #FFFFFF backgrounds and #000000 text and borders, avoiding any chromatic colors.
- Apply a consistent 6px border-radius to all interactive containers, including buttons and navigation items.
- Use nb_international_proregular (or Inter) at weight 400 for all text, varying only size and line height.
- Ensure letter spacing is applied: 0.165px for 11px text and 0.304px for 16px text.
- Utilize transparent backgrounds and 1px #000000 borders for default button states, defining borders as the primary visual differentiator.
- Prioritize compact spacing, with internal padding values of 2px, 4px, 7px, 10px, 14px, 16px, and 40px.

### Don't
- Do not introduce any chromatic colors; the system relies on a strictly achromatic palette.
- Avoid any drop shadows or complex elevation schemes; depth is suggested through content layering.
- Do not use font weights other than 400; all text should maintain a uniform visual density.
- Do not use border-radius values other than 6px; maintain this consistent level of corner rounding.
- Do not add decorative gradients or textures; surfaces should remain flat and unadorned.
- Do not introduce large content gaps or widely spaced elements; the design emphasizes density and precision.

## Imagery

The visual language is characterized by an absence of typical UI imagery. Instead, it utilizes layered, slightly transparent photo-realistic images, often with muted or desaturated tones, that overlap and recede into the background. These images are treated as contextual elements rather than primary content, featuring abstract forms, x-rays, or natural phenomena, suggesting a blend of art and science. They are contained within sharp, unrounded rectangles, contributing to the overall precise and technical aesthetic. Image density is high in the main content area, forming the primary visual interest.

## Layout

The page primarily uses a full-bleed layout for its main content area, with a distinctive diagonal arrangement of overlapping image panels creating a sense of dynamic depth. The navigation is fixed-width at the top-left, centered within its container. There is no explicit page max-width, allowing content to scale to the viewport. Sections appear to flow continuously without strong visual dividers or alternating backgrounds, maintaining a consistent, clean canvas. The information architecture is linear and direct, with navigation elements positioned clearly without visual distraction.

## Agent Prompt Guide

### Quick Color Reference
- Text: #000000
- Background: #FFFFFF
- Button Border: #000000
- Primary Interactive: #000000 (text)
- Default Button Fill: transparent

### 3-5 Example Component Prompts
1. Create a transparent ghost button labeled 'Research': text 'Research' in nb_international_proregular weight 400, 16px, #000000, letter-spacing 0.304px. Button has a 1px #000000 border and 6px border-radius. Padding is 40px top, 10px right, 7px bottom, 10px left.
2. Generate a navigation link: text 'UNVEIL® Projects' in nb_international_proregular weight 400, 16px, #000000, letter-spacing 0.304px, line-height 1.05. No background or border.
3. Create a footer link: text 'Overview' in nb_international_proregular weight 400, 11px, #000000, letter-spacing 0.165px, line-height 1.05. No background or border.
4. Design a header container: background white (#FFFFFF), height 66px. Contain a navigation bar inside.

## Similar Brands

- **Büro Uebele** — Shares a precise, architectural feel with minimal, high-contrast typography and a lack of overt color.
- **Certain Measures** — Exhibits a similar focus on stark, systematic presentation and thoughtful spatial arrangements of visual assets.
- **FutureDeluxe** — Employs a focused color palette and geometric forms to convey a technical yet artistic identity.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-pitch-black: #000000;
  --color-canvas-white: #FFFFFF;

  /* Typography — Font Families */
  --font-nbinternationalproregular: 'nb_international_proregular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 16px;
  --leading-body: 1.05;
  --tracking-body: 0.304px;

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

  /* Spacing */
  --spacing-4: 4px;
  --spacing-7: 7px;
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-40: 40px;

  /* Layout */
  --card-padding: 10-16px;
  --element-gap: 2-14px;

  /* Border Radius */
  --radius-md: 6px;

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

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-pitch-black: #000000;
  --color-canvas-white: #FFFFFF;

  /* Typography */
  --font-nbinternationalproregular: 'nb_international_proregular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 16px;
  --leading-body: 1.05;
  --tracking-body: 0.304px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-7: 7px;
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-40: 40px;

  /* Border Radius */
  --radius-md: 6px;
}
```