Stagehand Floodlight

About Stagehand Floodlight

Overview

Stagehand Floodlight is for festivals, club nights, conferences and ticket drops. Each surface is a slab with a 2px border. Each shadow is a solid offset block in ink (#0e1413). Display headlines are set in Fraunces 900. There are no gradients, blurs or rounded corners. The model is a poster pasted on a concrete wall: legible at a glance, with one cyan action per view.

Color

Brand cyan (hue ~185°) is the only action color. Light mode uses primary brand.700 #006d76: about 5.6:1 on background and 6.1:1 under white text. Dark mode uses brand.400 #22c9d4: about 9.2:1 on background and 7.7:1 under brand.950 text. Neutrals are cold concrete tinted toward the same teal hue, with chroma held low and even from 50 to 950. Ink (neutral.950) is the default foreground and the shadow color. Success is shifted cool, toward ~155°, so it sits next to cyan without competing. Warning is a lemon signal yellow (warning.300 light, warning.400 dark) that always carries warning.950 text. Destructive is red (danger.600 light, danger.400 dark), roughly 170° away from the brand hue, so it can never be confused with primary. Light borders are ink, not hairline grey. Dark borders are neutral.400.

Typography

The scale steps by a ratio of about 1.4 from heading-sm 20px: 20 / 28 / 40 / 56 / 76. Body sizes run 14 / 16 / 18 below it. Fraunces ships 700 and 900 here: 900 for display-lg and display-md, 700 for heading-lg. Display tracking tightens with size (-0.035 at 76px, -0.03 at 56px, -0.02 at 40px). Instrument Sans (400–700) handles all UI text, with headings and labels at 700 and body at 400. Body line heights are 1.5–1.55. JetBrains Mono (400/500/700) sets captions, dates, venues and ticket codes at 12–14px.

Layout

The base grid is 4px. Padding inside bordered blocks is generous: cards use space.6 (24px), sections use space.16–24. Sections are full width, divided by 2px rules in the border token, with content capped at 1280px. Asymmetric columns are allowed. Buttons and inputs are 48px tall. Badges are 24px tall.

Elevation

There is no blur and no ambient shadow. Elevation is a solid ink offset of shadow.sm 2px, shadow.md 4px or shadow.lg 8px, always paired with a 2px border. Cards use shadow.md; dialogs and popovers use shadow.lg. On hover, the element translates 2px toward its shadow and drops to shadow.sm; on active, it translates 4px and the shadow is removed. In dark mode the ink shadow nearly disappears against neutral.950. There, depth comes from the card fill (neutral.900, one step above background) plus the neutral.400 border.

Shapes

Every radius is 0 except radius.full, which is reserved for avatars and status dots of 8px or less. Buttons, inputs, cards, badges, menus, dialogs and images all have square corners. Borders are 2px and solid, never dashed or translucent.

Do

• Set radius.none (0) on buttons, inputs, cards, badges, menus, dialogs and images. Use radius.full only for avatars and status dots 8px or smaller.
• Give every card, input and button a solid 2px border: the border token for cards and buttons, the input token for inputs.
• Use shadow.md on cards and shadow.lg on dialogs and popovers. On hover, translate 2px toward the shadow and switch to shadow.sm; on active, translate 4px and remove the shadow.
• Show focus as a 2px solid ring-token outline with a 2px offset on every interactive element. Never rely on a shadow change alone.
• Set display-lg (76px) and display-md (56px) in Fraunces 900 with their negative letterSpacing, and keep headlines to two lines or fewer.
• Set buttons, labels and nav items in Instrument Sans 700 using the label style (14px, +0.04 tracking). Set dates, times, venues and ticket codes in JetBrains Mono using caption (12px) or code (14px).
• Use one primary button per view for the main action, such as 'Get tickets'. Make all other actions secondary buttons with a 2px border.
• Use the warning token with warning-foreground text for sold-out and last-tickets badges, and always include a text label.

Don’t

• Don't use blurred shadows, gradients, glassmorphism or translucent borders.
• Don't round any corner above 0, including images, tags, tooltips and dropdowns.
• Don't use cyan for errors or destructive actions. Use destructive (danger.600 in light, danger.400 in dark) with destructive-foreground text.
• Don't set Fraunces below 40px (heading-lg). Use Instrument Sans for heading-md (28px) and everything smaller.
• Don't use muted-foreground for primary content or for text smaller than 14px (body-sm).
• Don't use untinted grey. Take every neutral from the teal-tinted neutral ramp.
• Don't put primary-colored text on the accent surface. Use accent-foreground (brand.900 in light, brand.100 in dark).
• Don't put white text on the warning token. Use warning-foreground (warning.950) in both modes.