Acd Cinematic Cohere Design

---
name: acd-cinematic-cohere-design
description: Reference DESIGN.md for enterprise-AI brands that need to feel premium, dark, and quietly futuristic. Ink canvas, Unica grotesque type, saturated coral-to-violet brand gradient deployed as backdrop and accent rule, full-pill buttons, gen. Use when building UI components, applying design tokens, or implementing visual styles for cinematic cohere.
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: design-systems
  tags: [design-system, ui, cinematic, claude-design]
---

# Cohere — Enterprise AI Gradient Design Mode

You are an expert in the Cohere — Enterprise AI Gradient aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

## Source DESIGN.md

Reference DESIGN.md for enterprise-AI brands that need to feel premium, dark, and quietly futuristic. Ink canvas, Unica grotesque type, saturated coral-to-violet brand gradient deployed as backdrop and accent rule, full-pill buttons, generous oversized display.

## 1. Visual Theme & Atmosphere

Dark cinematic, but corporate-quiet. The page is near-black ink with carefully placed gradient surfaces — coral fading to violet to indigo — that echo the Cohere brand mark. Display type goes large. Body type is restrained. Pill buttons are the only soft geometry. Reads like a research lab that ships to the Fortune 100.

Mood: premium, scientific, quietly confident, enterprise-grade.

## 2. Color Palette & Roles

```
--bg-primary:      #17171c   /* near-black ink, default canvas */
--bg-elevated:     #1f1f26   /* card, modal */
--bg-light:        #ffffff   /* light sections, docs */
--text-on-dark:    #ffffff
--text-on-dark-muted: #b8b3ad
--text-on-dark-dim:  #75758a
--text-on-light:   #17171c
--text-on-light-muted: #5a5a66
--border-on-dark:  #2a2a33
--border-on-light: #e5e2dc

/* brand gradient — coral → violet → indigo */
--brand-coral:     #ff7759
--brand-pink:      #ff6b9d
--brand-violet:    #9b60aa
--brand-indigo:    #5a5fff
--brand-sand:      #d7cfc1   /* link, soft accent on dark */

--gradient-brand:  linear-gradient(135deg, #ff7759 0%, #ff6b9d 35%, #9b60aa 70%, #5a5fff 100%)
--gradient-soft:   linear-gradient(180deg, rgba(155, 96, 170, 0.12) 0%, transparent 100%)
```

Rule: the four-stop brand gradient is the identity. Use it on hero backdrop, oversized text fills, and brand mark — not on buttons. Buttons stay ink or white.

## 3. Typography Rules

- **Display + headings:** `Unica77 Cohere Web` (CohereText), fallback `Space Grotesk`, `Inter`. Weight 400/500. Tight tracking at large sizes (−1.5%).
- **Body + UI:** Unica77 weight 400, fallback Inter, system-ui. 14–18px body.
- **Mono:** `JetBrains Mono`, fallback `SF Mono`. Used for code samples and model-name labels.

Scale: 12 / 14 / 16 / 20 / 24 / 32 / 48 / 64 / 96.

Hero display goes to 96px. Resist scaling down for "balance" — the oversize is the point.

## 4. Component Stylings

**Buttons**
- Primary: ink `#17171c` fill, white text, full pill (radius 9999), padding 12/24, weight 500.
- Secondary: white fill, ink text, full pill, 1px ink border.
- Ghost on dark: transparent, white text, 1px white border, full pill.
- Hover: 8% lighten/darken, no scale. No glow.

**Cards**
- Dark surface: `--bg-elevated`, 1px `--border-on-dark`, radius 7px.
- Light surface: white, 1px `--border-on-light`, radius 7px.
- Hover: border shifts to `--brand-sand` on dark, `--brand-violet` on light. No shadow.

**Inputs**
- Transparent fill, 1px border, radius 7px, padding 10/14. Focus: 2px `--brand-violet` ring, 2px offset.

**Hero gradient surface**
- Full-bleed `--gradient-brand` panel, 60–80vh tall.
- Display headline overlaid in white at 96px, weight 400, tight tracking.
- Pill CTA bottom-left, ink fill on the gradient.

**Nav**
- Fixed top, transparent over hero, shifts to ink fill with 1px `--border-on-dark` on scroll. No backdrop blur.

## 5. Layout Principles

- 1440px max, 32px gutter, 12 column.
- 8px base. 8 / 16 / 24 / 32 / 48 / 80 / 120 / 160.
- Section breaks at 120–160px on desktop.
- Alternate full-bleed gradient hero, ink content slab, light docs slab. Three modes per page max.

## 6. Depth & Elevation

Atmospheric, never literal. Depth from gradient saturation, type weight, surface tone shifts. Shadows allowed only on modals: `0 24px 64px rgba(0, 0, 0, 0.48)`. Forbidden: glow rings, neon outlines, neumorphic tiles.

## 7. Do's and Don'ts

**Do**
- Deploy the four-stop brand gradient on hero backdrop and as a large text fill, once per page max.
- Keep buttons binary: ink pill or white pill. Gradients live around buttons, not on them.
- Set display headlines at 96px and trust the whitespace.
- Pair Unica77 grotesque consistently — no secondary display family.

**Don't**
- Apply the brand gradient to buttons, links, or body text.
- Switch to pure black (`#000`) — the warm-ink `#17171c` is the brand.
- Add glow effects, neon outlines, or accent rings to interactive elements.
- Round corners past 8px on cards or inputs. Pills are reserved for buttons only.
- Mix in a third typeface for "playfulness".

## 8. Responsive Behavior

- Hero display scales 96 → 40 on mobile.
- Brand gradient backdrop retains full bleed; CTA stacks below headline.
- Nav collapses to ink hamburger on `--bg-primary` below 768px.
- 12-column grid reflows to single column below 768px; 80px section breaks.

## 9. Agent Prompt Guide

Bias: warm-ink `#17171c` canvas, oversized Unica77 display, four-stop coral→violet→indigo brand gradient on hero, ink-or-white pill buttons (never gradient buttons), 7px radii on cards, generous 120px section rhythm, alternating dark/gradient/light slabs.

Reject: pure-black `#000` canvas, gradient-filled buttons or text links, glow effects, neumorphism, multi-typeface mixing, dense card-grid layouts, dropping the brand gradient for "minimalism", chat-bubble UI in product surfaces.

## When to Use This Mode

- When user references **cohere** or the **cinematic** family as inspiration
- When building UI in the cinematic aesthetic
- When applying this brand's color palette, typography, or layout patterns
- When critiquing UI for adherence to this aesthetic