Dramatic design skill for AI agents

Overview

Dramatic is a high-contrast, dark-surface design system skill file that instructs AI coding assistants to generate interfaces with the intensity of a film title sequence. Built around Outfit — a modern geometric variable font — and restricted to just two weights (400 and 900), this skill creates a stark, binary visual language where light text burns against near-black backgrounds and vivid violet-and-rose accents cut through the darkness like stage lighting.

This skill is built for products that treat attention as their primary resource: creative agencies, portfolio sites, product launch pages, media platforms, entertainment apps, music streaming interfaces, and any product where the design itself is part of the experience — not just a container for content.

Design Tokens

Color Palette

Dramatic pairs a vivid violet primary with a hot rose secondary against an almost-black surface — a palette designed for maximum theatrical impact:

The surface color (#09090B) is almost pure black — far darker than typical dark mode grays. This extreme baseline is what gives Dramatic its name: light text at #FAFAFA against #09090B creates a contrast ratio above 19:1, and the vivid violet and rose accents appear to glow. The two accent colors (violet and rose) create a duochrome palette that is visually electric without being chaotic.

Typography

Dramatic uses Outfit as both the primary and display font — a geometric, variable sans-serif with clean proportions and a modern character:

• Primary and display font: Outfit — its geometric consistency and open letterforms make it highly legible on dark surfaces. The font is restricted to two weights only: 400 (regular) and 900 (black) — this constraint is the typographic engine of the Dramatic system
• Monospace font: JetBrains Mono — used for code blocks, technical data, and detail content

The type scale follows: 12 / 14 / 16 / 20 / 24 / 32px, with only weights 400 and 900 available.

The Two-Weight System

The restriction to just 400 and 900 is the defining typographic decision. There are no medium, semi-bold, or bold options — only regular and black:

• 900 (Black) — used for headings, hero text, button labels, navigation items, and anything that needs to command attention. At large sizes (24–32px), Outfit 900 on the dark surface creates the visual impact of movie credits or poster titles
• 400 (Regular) — used for body text, descriptions, secondary labels, and supporting content. The contrast between 400 and 900 is extreme, creating an unmistakable two-tier hierarchy

This binary approach eliminates the ambiguity of intermediate weights. Every piece of text is either prominent (900) or supporting (400). There is no "kind of important" — only "important" or "background." This constraint forces clear visual hierarchy and prevents the gradual weight creep that makes other systems feel muddled.

Spacing

All spacing follows a 4px base unit with a scale of 4 / 8 / 12 / 16 / 24 / 32px. On the near-black surface, spacing creates negative space that functions like darkness in a theater — the absence of content is as much a design element as the content itself.

Generous spacing between sections and tight spacing within components creates the same push-pull rhythm as dramatic lighting: bright elements are surrounded by darkness, making them feel more intense by contrast.

The Theatrical Interface

Beyond tokens and type, the skill file defines the visual qualities that make Dramatic feel like a staged production:

• Near-black canvas — the #09090B surface is the stage. Everything placed on it is illuminated by the design, not by ambient brightness. The darkness is not dark mode — it's the default and only mode
• Duochrome accents — violet (#8B5CF6) and rose (#F43F5E) are the only hue accents in the system. Used together, they create a vibrant, neon-adjacent tension. Used individually, they mark primary and secondary interactive hierarchies
• Luminous text — near-white text on near-black surfaces has an inherently luminous quality. The extreme contrast makes every word feel deliberate, as if lit by a spotlight
• Binary weight drama — the 400/900 weight restriction creates a visual rhythm of whispers and shouts. Headings hit hard; body text recedes. There is no in-between
• Bold, unconventional layouts — the skill file encourages asymmetric compositions, full-bleed sections, and oversized typography that break the grid intentionally to create visual tension and surprise

Component Coverage

Dramatic includes guidance for over 40 component families, each designed for maximum impact on the dark canvas:

• Inputs and forms — buttons with violet or rose fills against the dark surface, glowing text inputs, selects, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — dark-surfaced cards with accent borders, high-contrast tables, data lists, data grids, charts with luminous data lines, stats/metrics, badges, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, tabs, command palette
• Overlays and feedback — modals, drawers, tooltips, popovers, alerts, toasts, notifications, progress indicators, skeletons
• Page-level patterns — search, empty states, onboarding, authentication screens, settings pages, documentation layouts, pricing blocks

Each component defines required states (default, hover, focus-visible, active, disabled, loading, error) using the two-weight system and duochrome palette. Hover states use the violet-to-rose shift or opacity changes. Focus states use bright, thick outlines that are impossible to miss against the dark background. All states are explicit — in a dramatic system, every interaction must feel intentional.

Accessibility

Dramatic enforces WCAG 2.2 AA compliance, and the high-contrast dark palette naturally provides strong accessibility fundamentals:

• Extreme text contrast — #FAFAFA text on #09090B surface exceeds 19:1 contrast ratio, far surpassing the 4.5:1 AA minimum
• Keyboard-first interactions with visible focus states — focus rings use bright violet or white against the dark background, making them naturally prominent
• Accent color contrast — both the violet primary (#8B5CF6) and rose secondary (#F43F5E) are verified for sufficient contrast against the dark surface for interactive element fills and text usage
• Semantic HTML and proper ARIA attributes throughout
• Testable acceptance criteria for every accessibility requirement

The near-black surface is an accessibility advantage for focus visibility — bright focus indicators stand out dramatically without any extra effort. When the theatrical aesthetic conflicts with accessibility (for example, if low-opacity text is used for visual effect), the skill file always prioritizes readability.

How to Use with AI Tools

Cursor and Claude

1. Pull the skill file into your project:

npx typeui.sh pull dramatic

2. The skill file saves as a SKILL.md in your project. Cursor automatically detects skill files and uses them as context during code generation.

3. Start prompting — ask Cursor to build landing pages, portfolio sites, or creative platforms, and the output will follow the Dramatic system's near-black canvas, duochrome palette, two-weight typography, and high-contrast interaction states.

Claude (Anthropic)

Use Dramatic directly with Claude by adding the skill file as context:

1. Copy or download the skill file from the design skill page
2. Paste it at the start of a Claude conversation, or add it to a Claude Project as project knowledge
3. Prompt Claude to generate UI code — it will produce theatrical, high-contrast interfaces with the violet-and-rose duochrome palette and the 400/900 weight binary

Other AI Tools

The skill file is standard markdown compatible with any AI assistant that accepts context or system instructions:

• ChatGPT — paste into Custom Instructions or at the start of a conversation
• Windsurf / Codeium — place the file in your project directory
• GitHub Copilot — add to your repository's context or instruction files
• v0 by Vercel — paste the design tokens and two-weight rules as prompt context

Design Philosophy

Dramatic is built on the principle that restraint creates intensity. The skill file follows three rules:

1. Darkness is the medium — the near-black surface isn't a background color, it's the canvas. Content placed on it is spotlit. The darkness gives every element its power, the same way a theater stage uses darkness to direct attention
2. Two weights, two roles — the 400/900 binary eliminates typographic ambiguity. Every text element is clearly primary (900) or secondary (400). This extreme simplification creates stronger hierarchy than a full weight range ever could
3. Two colors, infinite tension — the violet-and-rose duochrome palette creates visual electricity through the interplay of two vivid hues against black. The system proves that drama comes from precision, not from adding more colors