# AI in Design Report 2026 — Design System
> An annual industry report by Designer Fund and Foundation Capital exploring how AI is transforming design tools, craft, and organizational structures.
- **Canonical:** https://uiuxskills.com/library/ai-in-design-report-2026
- **Source:** https://stateofaidesign.com/
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 76%
- **License:** MIT
- **Last updated:** 2026-06-09T23:13:42.748Z

---

---
version: alpha
name: AI in Design Report 2026
description: >-
  An annual industry report by Designer Fund and Foundation Capital exploring how AI is reshaping
  design tools, craft, and organizational structures.
tone: Authoritative, analytical, professional, and forward-looking.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-container: "#F7F6F4"
  on-primary: "#FFFFFF"
  on-surface: "#000000"
  accent: "#0099FF"
  error: "#FF0000"
  success: "#008000"
  focus-ring: "#0099FF"
typography:
  display-lg:
    fontFamily: Beausite Classic Medium
    fontSize: 60px
  display-md:
    fontFamily: Beausite Classic Medium
    fontSize: 45px
  headline-lg:
    fontFamily: Beausite Classic Medium
    fontSize: 36px
  headline-md:
    fontFamily: Beausite Classic Medium
    fontSize: 28px
  body-md:
    fontFamily: Beausite Classic Regular
    fontSize: 20px
    fontWeight: 500
    lineHeight: "1.2"
    letterSpacing: "-0.03em"
  body-sm:
    fontFamily: Beausite Classic Regular
    fontSize: 16px
  label-sm:
    fontFamily: Geist Mono
    fontSize: 12px
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
  input-field-focus:
    borderColor: "{colors.accent}"
  link:
    textColor: "{colors.accent}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.primary}"
  divider:
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

The brand identity for the AI in Design Report 2026 is minimalist, editorial, and high-contrast, designed to feel like a serious, authoritative industry publication. It relies on a stark black-and-white palette with a focus on typography and clean, structured layouts to convey a sense of professional clarity and forward-thinking innovation.

## Colors

The color strategy is rooted in a high-contrast, monochromatic foundation that prioritizes readability and professional focus, using a single accent color to guide user interaction.

*   Primary (#000000): Deep ink for headlines, structural elements, and primary text.
*   Surface (#FFFFFF): The primary background color for the reading experience.
*   Surface-container (#F7F6F4): A soft, neutral background used to differentiate secondary content blocks and sections.
*   Accent (#0099FF): The dedicated color for all actionable links and interactive elements.
*   On-primary (inferred) (#FFFFFF): Text color for elements placed on black backgrounds.
*   Error (inferred) (#FF0000): Standard color for error states.
*   Success (inferred) (#008000): Standard color for success indicators.
*   Focus-ring (inferred) (#0099FF): Accessible focus indicator for interactive elements.

## Typography

The typography uses the Beausite Classic family to establish a sophisticated, editorial rhythm, paired with Geist Mono for technical metadata.

*   Display-lg (inferred), Display-md (inferred), Headline-lg (inferred), Headline-md (inferred): Beausite Classic Medium, used for hierarchical titling and section headers.
*   Body-md: Beausite Classic Regular, the primary font for all long-form reading content.
*   Body-sm (inferred): Beausite Classic Regular, used for secondary body text.
*   Label-sm (inferred): Geist Mono, used for metadata, small labels, and UI identifiers.

## Layout

The site utilizes a centered, single-column layout optimized for reading-heavy content. Spacing is generous, relying on a vertical rhythm to separate chapters and case studies, with a max-width constraint to ensure optimal line length for {typography.body-md}. The page structure follows this order: nav, hero, stats, chapters, case-studies, and footer. The design is mobile-first, with layouts that stack cleanly on smaller viewports and fluid typography scaling.

## Elevation & Depth

The design is largely flat, avoiding heavy shadows to maintain a clean, editorial aesthetic. Depth is implied through color contrast between {colors.surface} and {colors.surface-container} rather than Z-axis lift. Elevation tokens are provided for subtle UI separation: {elevation.sm} for minimal lift, {elevation.md} for standard component separation, and {elevation.lg} for modal or overlay contexts.

## Shapes

The design philosophy favors sharp, rectangular corners for most UI elements, reflecting a modern, technical, and precise brand personality. A scale of rounded tokens is available, but standard UI elements should not exceed {rounded.md}. Pill-shaped buttons using {rounded.full} are reserved exclusively for primary calls to action.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Primary buttons use {colors.primary} background and {colors.on-primary} text, switching to {colors.accent} on hover. Secondary buttons are transparent with a {colors.primary} border, maintaining a sharp, professional look.

### Card
Cards utilize {colors.surface} or {colors.surface-container} to create distinct content zones. They avoid shadows, relying on clean edges and internal spacing to define their boundaries.

### Input Field
Input fields feature a clean {colors.surface} background. When focused, the border transitions to {colors.accent} to provide clear, accessible feedback to the user.

### Badge
Badges are used for status or metadata, utilizing {colors.surface-container} for standard states. Success badges use {colors.success} with {rounded.sm} corners, while error badges use {colors.error} with {colors.on-primary} text.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary headings. | Use {colors.accent} for body text. |
| Apply {typography.body-md} for all long-form reading. | Use drop shadows on cards or buttons. |
| Use {colors.accent} for all actionable links. | Use rounded corners larger than {rounded.md} for UI. |
| Use {colors.surface-container} for secondary blocks. | Use low-contrast text on {colors.surface-container}. |
| Maintain {spacing.lg} between major sections. | Use more than two font families per page. |
| Use {colors.primary} for {button-secondary} borders. | Use tight line heights; stick to 1.2 for {typography.body-md}. |
| Use {rounded.full} only for primary CTA buttons. | Use {colors.error} for non-destructive actions. |
| Use {typography.label-sm} for metadata and badges. | Use {typography.display-lg} for body copy. |

## Content Style

CTA labels are direct, action-oriented, and concise, typically using verb-first phrasing like "Read the Chapter" or "Get notified."

Headings are professional, analytical, and benefit-driven, designed to frame the report's findings as essential industry insights.

Copy density is kept low to ensure the report remains scannable. Paragraphs are short, and bullet points are used frequently to break up complex data and lists for improved clarity.

## Imagery & Icons

The imagery style is mixed, combining high-quality photography for case studies with abstract, geometric SVG iconography. Icons are clean and sharp, aligning with the brand's technical aesthetic. Photography should be treated with a focus on professional, high-fidelity representation, while logo lockups must maintain clear space and adhere to the monochromatic color constraints.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for the AI in Design Report 2026, a minimal enterprise industry publication with an authoritative, analytical tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.lg}` — never hardcode hex values, pixel sizes, or font names.
2. Use only component variants defined under `components:`. Do not invent states, sizes, or variants the spec does not list.
3. Follow the Layout section for page structure (nav → hero → stats → chapters → case-studies → footer), centered single-column, mobile-first, with one breakpoint at 768px.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) is available, those values supersede the spec.

## Output contract

**Must:**
- Use all tokens by name on every component.
- Include hover, focus, and disabled states for interactive components where the spec defines them (e.g., `{button-primary-hover}`, `{input-field-focus}`).
- Apply `{rounded.full}` exclusively to primary CTA buttons; cap all other UI elements at `{rounded.md}`.
- Render body copy in `{typography.body-md}` at `lineHeight: 1.2` and `letterSpacing: -0.03em`.
- Use `{typography.label-sm}` (Geist Mono) for all metadata, badges, and UI labels.
- Maintain `{spacing.lg}` between major page sections.
- Use `{colors.accent}` only for actionable links and focus rings, never for body text.

**Must NOT:**
- Invent colors, radii, fonts, or elevation values outside the spec.
- Apply drop shadows to cards or buttons.
- Use generic utility defaults when a brand token exists.
- Exceed two font families per page (Beausite Classic and Geist Mono).
- Add emoji, filler copy, or marketing language.
- Rewrite, replace, or invent page copy, headings, or button labels.
- Alter navigation items, routes, or page section order.

## When in doubt
- If a value is not in the spec, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; use `{colors.surface-container}` for secondary content zones.
- For ambiguous text on dark backgrounds, use `{colors.on-primary}`; on light backgrounds, use `{colors.on-surface}`.
- Depth should come from contrast between `{colors.surface}` and `{colors.surface-container}`, not from elevation tokens unless the context is modal or overlay.