# 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;
}
```
Gallery White Box – stark,…
Gallery Wall Catalog: A stark,…
gallery wall contrast
Minimalist gallery wall. Expansive…
Monochromatic gallery exhibit.
Gallery space, stark and bold.
monochromatic minimalist gallery
Minimalist editorial canvas; stark…
Sculpted Minimalism on Canvas. An…
High-contrast monochrome blueprint
Monochromatic architectural…

White gallery canvas.
white gallery, black ink
Gallery Wall Monolith — A single,…
Gallery Grid and Whisper
Graphic Monochrome Canvas: crisp,…
Gallery Wall Typography - Massive…
Minimalist gallery canvas
White canvas, sharp monochrome…
High-contrast theatrical canvas