No Ideas

# No Ideas — Style Reference
> High-contrast editorial publication

**Theme:** dark

No Ideas employs a stark, editorial aesthetic, reminiscent of a printed publication. The design is monochromatic, relying almost entirely on black and white to establish a clear hierarchy and dramatic contrast, with emphasis on robust typography. Layouts are clean and spacious, emphasizing content over decorative elements, creating a focused and impactful visual experience. The system avoids shadows and complex gradients, prioritizing a flat, graphic quality.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#ffffff` | `--color-canvas-white` | Page backgrounds, prominent text (on dark), borders, ghost button outlines |
| Ink Black | `#000000` | `--color-ink-black` | Primary surface background, main body text, navigation elements, footer text |
| Text Gray | `#212529` | `--color-text-gray` | General body text for readability, subtle borders |

## Tokens — Typography

### ABC Diatype — Primary display font for headings and prominent editorial text. Its distinct letterforms and tight tracking at larger sizes create a bold, modern, almost logotype-like feel. · `--font-abc-diatype`
- **Substitute:** Inter
- **Weights:** 400, 500
- **Sizes:** 36px, 48px, 331px
- **Line height:** 1.05, 1.10, 1.52
- **Letter spacing:** -0.052em at 36px/48px, -0.010em at 331px
- **OpenType features:** `(none observed)`
- **Role:** Primary display font for headings and prominent editorial text. Its distinct letterforms and tight tracking at larger sizes create a bold, modern, almost logotype-like feel.

### system-ui — Body text and functional UI elements where high readability and system-level consistency are preferred. · `--font-system-ui`
- **Substitute:** Segoe UI, Apple System
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.50
- **Letter spacing:** normal
- **OpenType features:** `(none observed)`
- **Role:** Body text and functional UI elements where high readability and system-level consistency are preferred.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body | 16px | 1.5 | — | `--text-body` |
| heading | 36px | 1.05 | -0.74px | `--text-heading` |
| heading-lg | 48px | 1.1 | -0.96px | `--text-heading-lg` |
| display | 331px | 1.52 | -3.31px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 6px

**Density:** spacious

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 19 | 19px | `--spacing-19` |
| 29 | 29px | `--spacing-29` |
| 202 | 202px | `--spacing-202` |

### Border Radius

| Element | Value |
|---------|-------|
| image | 15px |

### Layout

- **Element gap:** 29px

## Components

### Ghost Navigation Link
**Role:** Interactive text link within headers and footers.

Text in Ink Black (#000000) or Canvas White (#ffffff) using ABC Diatype 400 at appropriate sizes for navigation, with no background or specific padding, relying on surrounding whitespace for interaction cues.

### Editorial Header
**Role:** Primary heading for sections or pages.

Utilizes ABC Diatype at large sizes (48px or 331px), typically in Canvas White (#ffffff) against Ink Black (#000000) or vice-versa, with tight letter spacing for visual impact. Has a distinct vertical rhythm of 202px below it.

### Image Card
**Role:** Container for visual content.

Images are presented with a 15px border-radius, giving a subtle softness to photographic elements within the otherwise sharp design. Text associated with images (e.g., captions) would typically use Canvas White #ffffff or Text Gray #212529.

### Editorial Footer Section
**Role:** Bottom navigation and additional information block.

Ink Black (#000000) background with Canvas White (#ffffff) text, structured with internal padding of 19px top/bottom and 29px left/right. Contains multiple interactive text links.

## Do's and Don'ts

### Do
- Prioritize Canvas White (#ffffff) and Ink Black (#000000) for all primary backgrounds and text, maintaining high contrast.
- Use ABC Diatype for all headings and prominent textual elements, applying the specified letter-spacing for each size.
- Maintain generous spacing around sections, specifically a 202px bottom margin after primary content blocks.
- Apply a 15px border-radius consistently to all images for a subtle softening effect.
- Ensure UI elements for navigation and information are simple text links, without pronounced button styling, using either Canvas White (#ffffff) or Ink Black (#000000).
- Employ `system-ui` for all body text and secondary informational content at 16px weight 400 with normal letter-spacing and 1.5 line height.

### Don't
- Avoid introducing additional chromatic colors; the system relies on a strictly monochromatic palette.
- Do not use box-shadows or complex gradients; the design aesthetic is intentionally flat.
- Do not vary from the specified line heights and letter spacing for ABC Diatype; these are critical to the typographic identity.
- Do not add heavy borders or background fills to interactive elements; they should remain text-based or 'ghost' styled.
- Avoid dense informational blocks; embrace spacious layouts to create visual breathing room.
- Do not use decorative imagery that detracts from the stark, editorial focus; images should be integral to the content.

## Imagery

The site uses photography as its primary imagery. These are integrated as large, full-bleed backgrounds or large, contained elements, often in black and white or highly desaturated states. The treatment is direct, with images sometimes having a 15px border-radius for a refined edge. There are no illustrations or abstract graphics. The imagery serves to set a mood or showcase work within an overarching editorial publication style, rather than providing explicit product functionality or step-by-step guides. The density is image-heavy in sections, defining visual chapters.

## Layout

The page embraces a full-bleed content model where sections can stretch across the viewport width. The hero section, as seen with the 'WINGS' title, features a full-bleed Ink Black background with large, centered Canvas White text. The section rhythm is defined by large vertical gaps (202px) between content blocks and a clear contrast shift between dark and light backgrounds. Content is often presented in a simple, stacked or implied two-column arrangement, focusing on strong typographic statements. Navigation is minimal, consisting of a top bar for core links and a detailed footer. The overall density is spacious, allowing elements significant room to breathe.

## Agent Prompt Guide

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

Example Component Prompts:
1. Create a page hero section: background Ink Black (#000000). Headline 'WINGS' using ABC Diatype at 331px, weight 400, color Canvas White (#ffffff), letter-spacing -0.010em. Subtitle 'PART V 1978–81' using ABC Diatype at 36px, weight 500, color Canvas White (#ffffff), letter-spacing -0.052em.
2. Design a minimalist footer: background Ink Black (#000000), internal padding 19px vertical, 29px horizontal. Include navigation links like 'Info' and 'Shop' with text color Canvas White (#ffffff), using ABC Diatype 36px, weight 400, letter-spacing -0.052em.
3. Implement a text block for 'Creative Direction Steve Attardo': text color Canvas White (#ffffff), using ABC Diatype 36px, weight 400, letter-spacing -0.052em, positioned over a Ink Black (#000000) background.

## Similar Brands

- **AIGA Journal** — Strong editorial design, heavy reliance on typography as primary visual, monochromatic palette, and spacious layouts.
- **The New York Times (digital)** — Focus on high-contrast black and white, robust typographic hierarchy, and clean content presentation.
- **Actual Source** — Contemporary graphic design studio with a strong print-inspired, grid-based aesthetic, and a minimal color palette.
- **Pentagram** — Design portfolio site structure with a focus on large images and clear, impactful typography over decorative UI elements.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-ink-black: #000000;
  --color-text-gray: #212529;

  /* Typography — Font Families */
  --font-abc-diatype: 'ABC Diatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 16px;
  --leading-body: 1.5;
  --text-heading: 36px;
  --leading-heading: 1.05;
  --tracking-heading: -0.74px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -0.96px;
  --text-display: 331px;
  --leading-display: 1.52;
  --tracking-display: -3.31px;

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

  /* Spacing */
  --spacing-unit: 6px;
  --spacing-19: 19px;
  --spacing-29: 29px;
  --spacing-202: 202px;

  /* Layout */
  --element-gap: 29px;

  /* Border Radius */
  --radius-xl: 15px;

  /* Named Radii */
  --radius-image: 15px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-ink-black: #000000;
  --color-text-gray: #212529;

  /* Typography */
  --font-abc-diatype: 'ABC Diatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 16px;
  --leading-body: 1.5;
  --text-heading: 36px;
  --leading-heading: 1.05;
  --tracking-heading: -0.74px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -0.96px;
  --text-display: 331px;
  --leading-display: 1.52;
  --tracking-display: -3.31px;

  /* Spacing */
  --spacing-19: 19px;
  --spacing-29: 29px;
  --spacing-202: 202px;

  /* Border Radius */
  --radius-xl: 15px;
}
```