Boutique8888

# Boutique8888 — Style Reference
> Crisp monochrome canvas.

**Theme:** light

Boutique8888 features a clean, high-contrast aesthetic with a distinct focus on clarity and directness. The visual system leverages a light canvas over a subtle background gradient, grounding prominent dark typography and dark-filled or light-outlined components. Interaction elements are clearly delineated through strong black and white contrast and rounded shapes, creating a focused and accessible user experience.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Midnight | `#000000` | `--color-midnight` | Primary text, button backgrounds, interactive link color, primary iconography. Establishes strong contrast |
| Storm Gray | `#5b5b5b` | `--color-storm-gray` | Secondary text, subtle borders, inactive elements, supporting information. Provides visual hierarchy without harshness |
| Canvas White | `#ffffff` | `--color-canvas-white` | Button text on dark backgrounds, outlined button strokes, primary surface color |
| Sky Wash | `linear-gradient(-45deg, rgb(193, 233, 255), rgb(244, 245, 246), rgb(225, 252, 255), rgb(189, 231, 255))` | `--color-sky-wash` | Subtle background gradient base forming a diffused halo effect |

## Tokens — Typography

### Shopify Sans — Primary brand typeface for headings, body text, buttons, and links. Its custom nature reinforces brand identity. · `--font-shopify-sans`
- **Substitute:** Inter
- **Weights:** 400, 700
- **Sizes:** 14px, 16px, 20px, 40px
- **Line height:** 1.20
- **Letter spacing:** normal
- **Role:** Primary brand typeface for headings, body text, buttons, and links. Its custom nature reinforces brand identity.

### Shopify Sans — Extended reading text and supporting content. Slightly increased line-height aids readability in longer blocks. · `--font-shopify-sans`
- **Substitute:** Inter
- **Weights:** 
- **Sizes:** 16px
- **Line height:** 1.50
- **Letter spacing:** normal
- **Role:** Extended reading text and supporting content. Slightly increased line-height aids readability in longer blocks.

### Times — Fallback and specialized legal/footer text, providing a classic, authoritative counterpoint to the sans-serif. · `--font-times`
- **Substitute:** Times New Roman
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.20
- **Letter spacing:** normal
- **Role:** Fallback and specialized legal/footer text, providing a classic, authoritative counterpoint to the sans-serif.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body-sm | 14px | 1.2 | — | `--text-body-sm` |
| body | 16px | 1.2 | — | `--text-body` |
| heading | 20px | 1.2 | — | `--text-heading` |
| display | 40px | 1.2 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** compact

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 5 | 5px | `--spacing-5` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 15 | 15px | `--spacing-15` |
| 20 | 20px | `--spacing-20` |
| 27 | 27px | `--spacing-27` |
| 35 | 35px | `--spacing-35` |
| 60 | 60px | `--spacing-60` |
| 70 | 70px | `--spacing-70` |

### Border Radius

| Element | Value |
|---------|-------|
| links | 20px |
| buttons | 20px |
| containers | 25px |

### Layout

- **Page max-width:** 1296px
- **Section gap:** 27px
- **Card padding:** 20px
- **Element gap:** 10px

## Components

### Primary Filled Button
**Role:** Call to action

Solid 'Midnight' background with 'Canvas White' text, 20px border-radius, and generous horizontal padding of 60px. Text uses Shopify Sans at 16px.

### Outlined Button
**Role:** Secondary action

Transparent background with a 2px 'Canvas White' border and 'Midnight' text. 20px border-radius and 60px horizontal padding. Text uses Shopify Sans at 16px.

### Subtle Callout Card
**Role:** Informational container

A container with a 25px border-radius, likely used for the main content block. Contains text and buttons.

### Text Link
**Role:** Inline navigation or reference

Uses 'Midnight' text and is underlined by default. Inherits Shopify Sans font styles.

## Do's and Don'ts

### Do
- Use 'Midnight' (#000000) for all primary text and button backgrounds to ensure high contrast.
- Apply 'Canvas White' (#ffffff) for text on dark backgrounds and as a 2px border for outlined components.
- Maintain a consistent border-radius of 20px for all buttons and interactive links, and 25px for primary content containers.
- Utilize Shopify Sans (or Inter as substitute) for headlines and body text to maintain brand voice.
- Structure page content within a max-width of 1296px for consistent presentation.
- Employ the 'Sky Wash' gradient as a subtle background element where diffused light is desired, not as a primary content surface.

### Don't
- Avoid using multiple shades of gray for primary text; stick to 'Midnight' for focus and 'Storm Gray' for secondary details.
- Do not deviate from the specified border-radii of 20px for interactive elements and 25px for containers.
- Refrain from introducing additional accent colors; maintain the monochrome palette with subtle gradient backgrounds.
- Do not alter the letter-spacing for Shopify Sans; keep it at 'normal' unless otherwise specified in token definitions.
- Avoid applying solid background colors to large sections when the subtle 'Sky Wash' gradient is intended to provide a soft aesthetic.
- Do not use Times for primary headlines or UI elements; reserve it for specific legal or footer content.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Page Background | `#f4f5f6` | The base canvas of the page, diffused by a subtle blue-tinted gradient for a light, ethereal feel. |
| 1 | Content Card | `#ffffff` | Elevated white surface for primary content blocks, such as the main unavailable store message. |

## Imagery

The site uses minimal imagery, focusing on UI elements. The Shopify logo is crisp and monochrome. Icons are simple, outlined, and monochromatic, like the 'back' arrow. When present, imagery (like the Shopify logo at the bottom) appears self-contained, using strict brand colors and avoiding complex photographic elements. The primary visual weight is carried by typography and strong component shapes.

## Layout

The page adheres to a max-width of 1296px, centered on the screen, creating a contained and structured feel. The hero content is a prominent, centrally aligned text block with two call-to-action buttons. Below this, content is arranged in a three-column grid, with left-aligned subordinate text blocks. Vertical spacing is consistent but not excessively dense. The footer is minimal, centered at the bottom. The overall pattern is a clear hierarchy of information presented in distinct, well-separated blocks.

## Agent Prompt Guide

Quick Color Reference:
text: #000000
background: #f4f5f6
border: #ffffff
accent: #c1e9ff
primary action: no distinct CTA color

Example Component Prompts:
No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color.
Create an outlined secondary button with the text 'Sign up free': 2px #ffffff border, transparent background, #000000 text, 20px radius, 60px horizontal padding, Shopify Sans 16px.
Create a content card: #ffffff background, 25px border-radius, with Shopify Sans 40px 'Sorry, this is unavailable.' heading (#000000), followed by two buttons (primary and outlined) with 10px spacing vertically.
Create a footer link 'About Us': #000000 text, Shopify Sans 14px, with the logo beside it.

## Similar Brands

- **Stripe** — Similar high-contrast monochrome palette with focus on typography and geometric shapes.
- **Linear** — Clean, spacious layouts with strong hierarchy and well-defined interactive components.
- **Vercel** — Minimalist aesthetic using subtle background gradients and strong dark text on light backgrounds.
- **Apple (services)** — Use of soft, almost imperceptible background gradients and a clear, functional component language.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight: #000000;
  --color-storm-gray: #5b5b5b;
  --color-canvas-white: #ffffff;
  --color-sky-wash: #c1e9ff;
  --gradient-sky-wash: linear-gradient(-45deg, rgb(193, 233, 255), rgb(244, 245, 246), rgb(225, 252, 255), rgb(189, 231, 255));

  /* Typography — Font Families */
  --font-shopify-sans: 'Shopify Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body-sm: 14px;
  --leading-body-sm: 1.2;
  --text-body: 16px;
  --leading-body: 1.2;
  --text-heading: 20px;
  --leading-heading: 1.2;
  --text-display: 40px;
  --leading-display: 1.2;

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

  /* Spacing */
  --spacing-5: 5px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-27: 27px;
  --spacing-35: 35px;
  --spacing-60: 60px;
  --spacing-70: 70px;

  /* Layout */
  --page-max-width: 1296px;
  --section-gap: 27px;
  --card-padding: 20px;
  --element-gap: 10px;

  /* Border Radius */
  --radius-2xl: 20px;
  --radius-3xl: 25px;

  /* Named Radii */
  --radius-links: 20px;
  --radius-buttons: 20px;
  --radius-containers: 25px;

  /* Surfaces */
  --surface-page-background: #f4f5f6;
  --surface-content-card: #ffffff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight: #000000;
  --color-storm-gray: #5b5b5b;
  --color-canvas-white: #ffffff;
  --color-sky-wash: #c1e9ff;

  /* Typography */
  --font-shopify-sans: 'Shopify Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body-sm: 14px;
  --leading-body-sm: 1.2;
  --text-body: 16px;
  --leading-body: 1.2;
  --text-heading: 20px;
  --leading-heading: 1.2;
  --text-display: 40px;
  --leading-display: 1.2;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-27: 27px;
  --spacing-35: 35px;
  --spacing-60: 60px;
  --spacing-70: 70px;

  /* Border Radius */
  --radius-2xl: 20px;
  --radius-3xl: 25px;
}
```