Spring Doorstep

About Spring Doorstep

Overview

Spring Doorstep is for homeowners booking gardeners, cleaners, plumbers and handypeople, often while dealing with a problem in their house. Instead of urgent orange or red, the system uses one spring-water blue (brand, hue about 200) for action. Structure comes from cool green-grey neutrals (hue about 160). Fraunces is used only for titles of 30px and larger. Every text pair clears 4.5:1 in both modes, and most pairs clear 5:1.

Color

Fernmark Blue carries every primary button, link and focus ring. Light mode uses primary brand.600 #1f7599 with white text (5.2:1) and ring brand.600 (4.8:1 on background). Dark mode uses brand.400 #55b1d2 with brand.950 text (6.5:1). Neutrals hold a steady green tint from 50 to 950. Neutral.950 is set to #141b19 so dark surfaces stay deep but tinted. Destructive is crimson (hue about 345), roughly 145° away from the blue, so cancellations can't be mistaken for primary actions. Success uses a cool teal-leaning green (hue about 155) to sit beside the blue. Warning uses a muted ochre fill (warning.200 with warning.900 text, 9.7:1) so it reads as caution, not alarm. Muted-foreground is neutral.700 in light mode (6.4:1 on background, 5.8:1 on muted) and neutral.300 in dark mode (7.2:1 on muted #26302e).

Typography

The type scale is a major third (ratio of about 1.25) anchored at 16px: 12, 14, 16, 18, 20, 24, 30, 38 and 48. Fraunces covers display-lg 48/600, display-md 38/600 and heading-lg 30/500. Letter spacing tightens from -0.015em to -0.025em as size grows. Instrument Sans covers heading-md 24, heading-sm 20, all body styles, labels and captions at weights 400, 500 and 600. Body line height is 1.5 to 1.6 so instructions stay readable. JetBrains Mono at 14/400 is reserved for booking references, postcodes in tables and code in developer docs.

Layout

Comfortable density on a 4px base grid. Content columns cap at 1152px. Buttons and inputs are 40px tall. Schedule and quote rows are at least 48px tall, with space.4 (16px) horizontal cell padding.

Elevation

Mostly flat. Cards use a 1px border token plus shadow.sm. Shadow.md is for popovers and date pickers, and shadow.lg is for confirmation dialogs only. In dark mode, elevation comes from surface lift: background #141b19, then card #1c2523, then popover #212b29.

Shapes

Soft but tidy rounding. Buttons and inputs use radius.md (8px), and cards and sheets use radius.lg (12px). Radius.full pills are used only for status badges such as 'Booked' or 'On the way' (22px tall, caption type).

Do

• Use the primary token for exactly one main action per screen, such as 'Book visit'. Give other actions the secondary or ghost button variant.
• Show focus with a 2px ring token outline at a 2px offset on buttons, inputs, date-picker cells and time-slot chips, in both modes.
• Set prices and durations in Instrument Sans with font-feature-settings: 'tnum', right-aligned, in quote and schedule tables.
• Use Fraunces only for display-lg (48px), display-md (38px) and heading-lg (30px). Use weight 600 for display styles and 500 for heading-lg.
• Pair every status color with an icon or text label, such as 'Confirmed' with a check, so meaning never relies on hue alone.
• Keep schedule and quote rows at least 48px tall, and use the muted token as the alternate row fill in lists longer than 10 rows.
• Use the accent token only for selected rows, highlighted time slots and selected chips. Put accent-foreground text on it.
• In dark mode, layer surfaces as background, then card, then popover. Add shadow.md only to popovers and date pickers.

Don’t

• Don't use the primary token for errors, cancellations or failed payments. Use destructive with destructive-foreground for those states.
• Don't put body text longer than three lines on the accent or warning surfaces. Keep it on background or card.
• Don't give cards a shadow above shadow.sm. Separation comes from the 1px border token.
• Don't use #000000 or untinted greys for text, borders or surfaces. Draw them from the neutral ramp or the dark surface tokens.
• Don't set Fraunces below heading-lg (30px) or in all caps, and don't use it for form labels, buttons or table content.
• Don't place muted-foreground text on the secondary or accent surfaces. Use secondary-foreground or accent-foreground there.
• Don't use destructive or warning fills as decoration behind non-status content.