Dramatic

Dramatic is a high-contrast, cinematic design language built to seize attention the instant a screen loads. It pairs near-black canvases with a single saturated red and oversized, confident typography so that every page reads like a film poster or a magazine spread. Reach for Dramatic when the goal is impact over subtlety: launches, headline moments, and brands that want to feel bold, premium, and a little theatrical.

Design principles

• Commit to one focal point per view. Drama comes from restraint, not clutter, so let a single headline or image dominate.
• Use contrast as the primary tool: deep black against bright foreground, with red appearing only where you want the eye to land.
• Treat type as imagery. Display headings are large enough to crop, overlap, and bleed off the canvas.
• Keep the palette ruthlessly small. One accent, one neutral light, layered dark surfaces, and nothing else.
• Favor hard edges and directional shadows over soft glows; the look should feel cut from paper, not airbrushed.
• Reserve motion for entrances and reveals so transitions feel staged and intentional.

Color

The canvas is a near-black #0A0A0B, with cards and raised regions on #16161A to create quiet depth. Foreground text and most UI sit in a warm off-white #F5F5F4, while #9A9A9E carries secondary and muted copy. The signature is the primary red #E11D2A, used sparingly for CTAs, active states, and the occasional inverted panel. Borders are a barely-there #2A2A30. In light mode, flip the relationship: a #F5F5F4 background, #FFFFFF surfaces, #0A0A0B foreground, and the same #E11D2A accent, which reads even hotter against white. Never dilute the red with tints; its power depends on appearing rarely and at full saturation.

Typography

Headings use Archivo (or a similarly grotesque, high-weight sans) at 700-900 weights with tight -0.03em tracking, set in sentence case for editorial gravity. Display sizes run from 64px up to 120px and are allowed to span the full container. Body copy uses Inter at 400-500, 16-18px, with a comfortable 1.6 line-height for readability against dark surfaces. The scale follows an aggressive perfect-fourth ratio (1.333) so the jump from body to headline feels abrupt and deliberate. Use the mono stack only for labels, counters, and numeric data, tracked at +0.04em in uppercase.