Crown + Conquer

# Crown + Conquer — Style Reference
> Minimalist gallery wall

**Theme:** light

The Crown + Conquer design system exudes a minimalist, high-contrast aesthetic, built on a foundation of stark black text on a subtly off-white canvas. The visual identity is defined by a striking custom script display font for brand elements, juxtaposed with a utilitarian, all-caps sans-serif for functional text. Spacing is generous, creating an atmosphere of exclusivity and focus, with interactive elements subtly outlined rather than filled, reinforcing an understated directness.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#f5f5f5` | `--color-canvas` | Page backgrounds, underlying surfaces |
| Midnight Ink | `#000000` | `--color-midnight-ink` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color |

## Tokens — Typography

### Fokus — Functional text: used for all body copy, navigation links, and footer information, usually in an all-caps form. Its consistent weight and clear letterforms provide an anchor to the unique branding. · `--font-fokus`
- **Substitute:** Montserrat, Open Sans
- **Weights:** 400, 700
- **Sizes:** 14px, 16px
- **Line height:** 1.43, 1.50
- **Role:** Functional text: used for all body copy, navigation links, and footer information, usually in an all-caps form. Its consistent weight and clear letterforms provide an anchor to the unique branding.

### Chronik — Decorative display font for primary brand statements, giving an elegant, bespoke feel. Used sparingly for key headings. · `--font-chronik`
- **Substitute:** Tangerine, Great Vibes
- **Weights:** 700
- **Sizes:** 16px
- **Line height:** 1.50
- **Role:** Decorative display font for primary brand statements, giving an elegant, bespoke feel. Used sparingly for key headings.

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 16 | 16px | `--spacing-16` |
| 32 | 32px | `--spacing-32` |

### Layout

- **Section gap:** 32px
- **Card padding:** 32px
- **Element gap:** 16px

## Components

### Navigation Link
**Role:** Interactive text link in the footer.

Fokus font, 14px, weight 400, color #000000. Underlined on hover.

### Footer Text Block
**Role:** Informational text in the page footer.

Fokus font, 14px, weight 400, color #000000, uppercase. Padded by 32px on top, right, and bottom. Margins of 16px between elements.

### Call to Action Headline
**Role:** Prominent statement text to draw attention to the brand's purpose.

Chronik font, 16px, weight 700, color #000000, uppercase. Line height 1.5. Centered on the page.

### Brandmark Text
**Role:** Main company logo text.

Custom script font rendered as an image, visually large and centered.

## Do's and Don'ts

### Do
- Use Canvas (#f5f5f5) as the primary background for all page sections.
- Employ Midnight Ink (#000000) for all text elements to maintain high contrast and sophistication.
- Apply Fokus font with a weight of 400 for all body text, navigation, and footer details, typically in uppercase.
- Utilize Chronik font exclusively for primary brand statements or key headings, maintaining its default weight of 700.
- Maintain a minimum element gap of 16px between UI items horizontally and vertically.
- Use 32px for section padding, especially for top and bottom margins of major content blocks.
- Center all significant page sections and content blocks, adhering to the expansive full-bleed page model.

### Don't
- Do not introduce additional background colors; maintain the stark #f5f5f5 background throughout.
- Avoid using saturated or chromatic accent colors in UI elements; color is reserved for content if present, not interface.
- Do not use multiple font sizes or weights for Fokus text within the same semantic block (e.g., body text); stick to 14px/16px at weight 400.
- Do not use Chronik for body text; its script style is for impactful, sparse headings only.
- Avoid shadows or complex elevation; the design relies on flat, high-contrast separation.
- Do not add border radii to UI elements; the system emphasizes sharp, clean edges.
- Do not introduce gradients into the UI; maintain flat colors.

## Imagery

Imagery style is not explicitly defined in the provided data or screenshot; the visual focus is on typography and stark contrast. Any imagery would need to align with a minimalist, high-contrast, potentially monochrome aesthetic, serving as decorative atmosphere rather than content explanation.

## Layout

The page operates on a full-bleed model, with content centered horizontally without a defined `pageMaxWidth`. The hero features a large, centered brandmark image followed by a centered headline statement. Sections appear to have consistent vertical spacing (32px padding surrounding content blocks, 16px element gaps). The footer is minimal, also centered, with text details and a contact link. The overall rhythm is sparse and symmetrical, emphasizing individual elements rather than dense information blocks.

## Agent Prompt Guide

**Quick Color Reference**
text: #000000
background: #f5f5f5
border: #000000
accent: no distinct accent color
primary action: no distinct CTA color

**3-5 Example Component Prompts**
Create a centered brand statement: Chronik font, 16px, weight 700, color #000000, uppercase, line height 1.5. Place it on a Canvas (#f5f5f5) background.
Create a footer navigation link: Fokus font, 14px, weight 400, color #000000, uppercase. Add 32px padding below the entire footer block.
Create a simple body text paragraph: Fokus font, 14px, weight 400, color #000000, on a Canvas (#f5f5f5) background. Enforce 16px vertical gap to the next element.
Create a page with a centered main headline 'TURNING BOLD IDEAS INTO REAL CONNECTION' using Chronik, 16px, weight 700, #000000, uppercase. Below it, add 'Worldwide Services, Founded in LA' using Fokus, 14px, weight 400, #000000, uppercase. Ensure 16px element gap between them.

## Similar Brands

- **Acne Studios** — High-contrast, minimalist aesthetic with focus on typography and stark presentation.
- **The Row** — Understated luxury through limited color palettes, generous spacing, and fine typographic details.
- **Squarespace** — Emphasizes clean visual layouts with strong typography and ample white space, often using monochrome palettes.
- **Zara** — Simple, bold black-on-white text, often uppercase, with minimalist UI elements.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas: #f5f5f5;
  --color-midnight-ink: #000000;

  /* Typography — Font Families */
  --font-fokus: 'Fokus', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-chronik: 'Chronik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-sm: 14px;
  --leading-sm: 1.43;
  --text-base: 16px;
  --leading-base: 1.5;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-16: 16px;
  --spacing-32: 32px;

  /* Layout */
  --section-gap: 32px;
  --card-padding: 32px;
  --element-gap: 16px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas: #f5f5f5;
  --color-midnight-ink: #000000;

  /* Typography */
  --font-fokus: 'Fokus', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-chronik: 'Chronik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-sm: 14px;
  --leading-sm: 1.43;
  --text-base: 16px;
  --leading-base: 1.5;

  /* Spacing */
  --spacing-16: 16px;
  --spacing-32: 32px;
}
```