Acd Cinematic Minimax Design

---
name: acd-cinematic-minimax-design
description: Reference DESIGN.md for AI-lab cinematic: pure black canvas, neon-lime accent on charcoal chrome, geometric DM Sans / Outfit type, pill-shaped CTAs. Use when building UI components, applying design tokens, or implementing visual styles for cinematic minimax.
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: design-systems
  tags: [design-system, ui, cinematic, claude-design]
---

# MiniMax — Cinematic Lab Design Mode

You are an expert in the MiniMax — Cinematic Lab 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 AI-lab cinematic: pure black canvas, neon-lime accent on charcoal chrome, geometric DM Sans / Outfit type, pill-shaped CTAs.

## 1. Visual Theme & Atmosphere

Cinematic lab. The page reads like a research-trailer reel — black canvas, oversized geometric type, demos that loop without a play button, and one neon-lime moment per screen that signals "this is the action." Chrome shrinks; the model demos are the subject. Marketing surfaces stay dark by default; the rare light section is a deliberate inversion that frames a paper or product spec.

Mood: laboratory-grade, kinetic, deliberately understated until the lime CTA fires.

## 2. Color Palette & Roles

```
--bg:              #000000   /* canvas */
--bg-alt:          #0a0a0a
--surface:         #181e25   /* charcoal — observed brand chrome */
--surface-2:       #232a33
--text:            #ffffff
--text-muted:      #c5c9cf
--text-dim:        #7a808a
--border:          #2a3038
--border-strong:   #3a4049

--accent:          #c8ff00   /* neon lime — primary action + brand */
--accent-hover:    #d8ff3a
--accent-deep:     #9bcc00   /* hover-pressed, ink-on-light variant */
--accent-soft:     #e9ff86   /* tinted callouts */

/* inverse — used for spec / paper sections only */
--bg-inverse:      #ffffff
--text-inverse:    #181e25
--border-inverse:  #e1e3e6

--success:         #6ee7b7
--warning:         #ffd166
--danger:          #ff5d5d
```

Rule: lime `--accent` carries one moment per viewport and never tints body text. Charcoal `--surface` is the resting chrome state; pure black is for full-bleed media. Inverse light sections are the exception, not the rhythm.

## 3. Typography Rules

- **Display + headlines:** `Outfit`, fallback `Helvetica Neue`, `Helvetica`, `Arial`, system. Weight 500–700, tight tracking (−1% at large sizes). Outfit's geometric construction reads as "model architecture diagram."
- **Body + UI:** `DM Sans`, fallback `Helvetica Neue`, `Helvetica`, `Arial`, system. Weight 400/500. Line-height 1.5–1.6.
- **UI labels:** DM Sans weight 500, 13–14px, uppercase only for category eyebrows (tracked +4%).
- **Numerals:** tabular figures on benchmark tables, parameter counts, latency stats.
- **Mono:** `JetBrains Mono`, fallback `SF Mono`. Used for code samples, API snippets, citation hashes.

Scale: 12 / 14 / 16 / 20 / 28 / 40 / 56 / 80 / 112.

Headlines balance (`text-wrap: balance`); body reflows (`text-wrap: pretty`). Display goes to 80–112px on launches.

## 4. Component Stylings

**Buttons**
- Primary: lime fill `--accent`, charcoal text `--surface`, radius 60px (pill), padding 12/24, weight 500. Hover: `--accent-hover`. No lift, no scale.
- Secondary: white fill, charcoal text, radius 12px, weight 500. Used inside dark sections to invert hierarchy.
- Tertiary / link: white text, lime underline on hover.
- Destructive: `--danger` fill, white text, only on confirm modals.

**Cards / model tiles**
- `--surface` fill, 1px `--border`, radius 12px. Padding 24.
- Hero model cards run looping demo videos with text overlay; bottom gradient scrim for legibility.
- Hover: 1px `--accent` border, 200ms ease. No scale.

**Inputs**
- `--bg-alt` fill, 1px `--border-strong`, radius 12px, padding 12/14. Focus: 2px `--accent` ring with 1px offset.

**Nav**
- Fixed top, `--bg` fill with 80% opacity and 12px backdrop blur. White links, lime underline on active.

**Demo player**
- Autoplay muted, looped, 16:9 minimum. No controls visible until hover. Reduced-motion users get a static still frame and a play affordance.

## 5. Layout Principles

- Full-bleed hero (100vw, 80–100vh) anchored on a model demo loop.
- 1280px max for content sections, 32px gutter, 12-column.
- 8px base. 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128.
- Generous vertical whitespace between sections (96–128px).
- Spec / benchmark tables break the editorial rhythm and run dense.

## 6. Depth & Elevation

Flat surfaces with hard borders. Depth comes from:
- Surface tonal shift (`--bg → --surface → --surface-2`)
- 1px `--border` and `--border-strong`
- Demo media hierarchy

Modals get `0 24px 64px rgba(0, 0, 0, 0.72)` over a 70% black scrim. No drop shadows on cards or buttons. Reserve subtle glow effects for hovered demo tiles only.

## 7. Do's and Don'ts

**Do**
- Open with a full-bleed model demo loop. No stock photography.
- Reserve lime for the single CTA moment per viewport.
- Oversize the launch headline. 80–112px on hero.
- Use tabular numerals for benchmark deltas (1.7×, 2.5×, +43%).
- Pair pill primary CTAs with rectangular `12px` secondary buttons — the geometric collision is the brand.

**Don't**
- Use lime inside body text or as a paragraph tint.
- Use multiple accents per viewport.
- Soften corners past 16px on cards.
- Switch to a light theme as the marketing default.
- Add purple-to-pink gradients, glassmorphism, or rainbow accents.

## 8. Responsive Behavior

- Hero demo remains full-bleed; headline scales 112 → 36 on mobile.
- Nav collapses to drawer at 1024px, full-screen overlay below 768px.
- Spec tables become horizontally scrollable below 640px (preserve density, no stacking).
- Autoplay disabled on mobile per bandwidth respect; static poster substitutes.
- Body type holds 16px on mobile.

## 9. Agent Prompt Guide

Bias: pure black `#000000` canvas with charcoal `#181e25` chrome, single neon-lime `#c8ff00` moment per viewport reserved for primary CTA, Outfit display headlines paired with DM Sans body, oversized launch type (80–112px), pill primary CTAs at 60px radius alongside 12px-radius secondaries, looping demo media as the hero artifact, tabular numerals on benchmark tables.

Reject: light-mode marketing pages, multi-color palettes, soft pastel gradients, glassmorphism, scale-on-hover lifts, hero stock photography in place of demo loops, decorative illustration in chrome, lime tints on body type.

## When to Use This Mode

- When user references **minimax** 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