Sequin Streamer

• DisplayOutfit
• BodyOutfit
• MonoGeist Mono

Overview

Sequin Streamer is for fashion shopping and wardrobe tools. It is built dark-first: background neutral.950 (#0d1019) and card neutral.900 (#181c28) are blue-tinted, so the indigo primary and rounded shapes stand out without glare. The playful tone comes from radii of 12–24px, springy motion and one saturated hue, not from extra decoration. Every status or selected state pairs color with shape, a label or an icon.

Color

One brand hue, Velvet Indigo (OKLCH hue about 265), drives primary, accent and ring. In light mode primary is brand.600 (#3d4ddb, 6.4:1 with white). In dark mode it is brand.400 (#7189fb, 6.0:1 on background, 5.3:1 with its brand.950 label). Neutrals carry a small amount of the same blue hue, so surfaces and brand read as one family. Chroma rises from 50 to 500–600 and falls toward 950 on every scale, so mid-steps stay clean. Destructive is a magenta-leaning crimson: danger.600 in light mode and danger.400 in dark mode. Its hue is about 80° away from primary (ΔE2000 > 30 in both modes), so an error never reads as a brand action. Success leans cool emerald-teal to match the blue temperature. Warning stays a golden amber and is reserved for status, never decoration.

Typography

Outfit is the single voice for display and interface text; its round geometric terminals match the shapes. Headings and display sizes follow a perfect-fourth scale (×1.333): 18 → 24 → 32 → 42 → 56px. Tracking tightens as size grows, from -0.005em at 18px to -0.025em at 56px. Body text uses 16px at a 1.55 line height, with 18px and 14px variants. Display uses Outfit 600 and 700, and the UI uses 400, 500 and 600, all shipped by Google Fonts. Geist Mono 400 at 14px is reserved for SKUs, sizes, order IDs and code.

Layout

Comfortable density on a 4px grid (space.1 = 4px). Product grids use space.6 (24px) gutters. Cards use space.6 (24px) padding, or space.4 (16px) on compact tiles. Buttons and inputs are 44px tall, and table or list rows are at least 44px, so touch targets meet the 44px minimum.

Elevation

Dark surfaces separate by ramp step first: background neutral.950, then card and popover neutral.900, then secondary and muted neutral.800. A 1px border comes next, and shadow comes last. Shadows are tinted with near-black blue (rgba 3, 5, 15). Use shadow.sm on cards, shadow.md on menus and popovers, and shadow.lg on dialogs and sheets only.

Shapes

Rounding is core to the personality. Use radius.md (12px) on small controls such as checkboxes and segmented items. Use radius.lg (16px) on buttons and inputs, with radius.full available for pill buttons. Use radius.xl (24px) on product cards and sheets. Badges and avatars use radius.full. radius.none and radius.sm are only for inline code and table cells.

Do

• Use one primary button per view (e.g. Add to bag). Set other actions to secondary (neutral.100 light / neutral.800 dark) or ghost buttons.
• Use radius.lg (16px) on buttons and inputs and radius.xl (24px) on product cards and sheets. Use radius.full only for pill buttons, badges and avatars.
• Layer dark screens as background neutral.950, then card/popover neutral.900, then muted neutral.800. Add a 1px border token before reaching for shadow.md or shadow.lg.
• Show focus as a 2px ring token outline with a 2px offset on every button, input, swatch and card link. Never rely on a color change alone.
• Pair success, warning and destructive with an icon and a text label, such as a check icon with 'In stock' or an alert icon with 'Only 2 left'.
• Set SKUs, sizes and order IDs in the code style (Geist Mono 14px/1.5, weight 400) with letterSpacing 0.

Don’t

• Don't use primary for delete, remove-from-bag or error text. Use destructive with destructive-foreground instead.
• Don't set text below body-sm (14px) on muted or accent surfaces. Keep muted-foreground for secondary copy only, not for prices or button labels.
• Don't use #000000 for dark-mode surfaces. Use neutral.950 for background and neutral.900 for cards, and keep #ffffff for light-mode card and popover only.
• Don't use radius below radius.md (12px) on buttons, inputs, cards or badges.
• Don't add a second saturated accent hue. Keep success, warning and destructive for status messages and badges, never decoration.
• Don't apply negative letterSpacing to body-md, body-sm, label or caption. Tight tracking is only for heading-sm and larger.