Evensong Statehouse

About Evensong Statehouse

Overview

Evensong Statehouse serves public-sector tasks people often do after work, on a phone, in a dark room: permit renewals, benefit portals, council dashboards. Dark mode is the reference design. Pages sit on neutral.950, raised surfaces on neutral.900, and a single Rose accent marks the one primary action per view. Light mode uses the same tokens on neutral.50 and meets the same contrast targets: 4.5:1 minimum for text, 5:1 or more where practical, and 3:1 for primary and ring against background.

Color

Neutrals are tinted violet at every step. Saturation is highest in the 800–950 range so dark surfaces read as midnight violet, not grey. Rose (brand) peaks in chroma at steps 400–600. Dark mode uses brand.400 (#fb6590) for primary and ring: 6.6:1 against neutral.950, with brand.950 text on top at 6.1:1. Light mode uses brand.600 (#cc2259): white text on it at 5.3:1, and 4.9:1 against neutral.50. Destructive is an orange-leaning vermilion, danger.600 #c2410c in light and danger.400 #f97a3e in dark. That puts it about 36° of hue away from Rose (ΔE2000 ≈ 24 in light, higher in dark), so a delete button cannot be mistaken for the brand action. Success (emerald) and warning (amber) follow the same warm, high-chroma curve as Rose. Success, warning and destructive always appear with an icon and a text label.

Typography

Sizes follow a 1.25 (major third) ratio from a 16px base: 12 / 14 / 16 / 20 / 32 / 40 / 60. Body-lg at 18 is the one off-ratio size, kept for long-form reading. Gloock is a high-contrast display serif that ships only weight 400. It is used at display-lg (60), display-md (40) and heading-lg (32), with letterSpacing tightening from -0.015 to -0.025em as size grows. Albert Sans (400/500/600/700) sets every functional element: body-md at 16px with 1.6 line height, labels at 14/600, captions at 12/500 with +0.015em tracking. DM Mono (400/500) is reserved for typography.code: case IDs, reference numbers, table dates and code.

Layout

Comfortable density on a 4px grid using space tokens 1–24. Page content is max 1120px wide and form columns max 640px. Buttons and inputs are 44px high to meet touch-target needs. Major sections are separated by space.12 (48px) to space.16 (64px). Cards use space.6 (24px) padding.

Elevation

Dark-mode elevation comes from surface tint, not shadow. The page uses background (neutral.950), and card and popover use neutral.900 plus a 1px border (neutral.800). shadow.sm sits under cards. shadow.md is for menus and popovers, shadow.lg for dialogs. All three shadows are violet-black (rgba 8,4,18). Focus uses a 2px ring in the ring token (brand.400 dark, brand.500 light) with a 2px offset.

Shapes

Rounding is restrained: radius.sm (2px) for tags and table cells, radius.md (6px) for buttons and inputs, radius.lg (10px) for cards, radius.xl (14px) for dialogs. radius.full is used only for status badges.

Do

• Design dark mode first. Use background (neutral.950) for the page and card/popover (neutral.900) with a 1px border (neutral.800) for raised surfaces, then verify light mode.
• Give exactly one button per view the primary token (for example 'Submit application'); make all other buttons secondary or ghost.
• Set Gloock only at display-lg (60px), display-md (40px) and heading-lg (32px), always weight 400. Set heading-md and smaller in Albert Sans.
• Set case numbers, reference IDs and table dates in DM Mono (typography.code, 14px) so characters align in columns.
• Keep buttons and inputs at 44px height and body text at body-md (16px / 1.6) or larger.
• Pair every success, warning and destructive color with an icon and a text label, such as a badge reading 'Approved' or 'Action needed'.
• Show keyboard focus as a 2px ring in the ring token with a 2px offset on every interactive element, including table row links.
• Reserve shadow.md for menus and popovers and shadow.lg for dialogs; cards use only shadow.sm.

Don’t

• Don't use primary (Rose) for errors, deletions or destructive confirmations; use the destructive token (danger.600 light, danger.400 dark).
• Don't use pure black (#000000) or untinted grey for any surface; take all surfaces from the neutral ramp.
• Don't set Gloock below 24px, in bold, faux-italic or all caps.
• Don't place body text on brand.400 or lighter; luminous Rose is for buttons, links and the focus ring only.
• Don't apply more than one Rose glow or accent-tinted highlight per card or section.
• Don't set essential instructions, error messages or legal text in muted-foreground; use foreground at body-md.
• Don't use radius above radius.xl (14px); only badges use radius.full.