Damson Basket

About Damson Basket

Overview

Damson Basket is for apps that deliver home-cooked and neighborhood food. Most food delivery UIs default to red and orange. This system uses deep fig violet (brand.600) on plum-tinted taupe neutrals instead. Rounded radii (12/16/24px), 44px controls and comfortable spacing make the UI feel handmade, without decorative textures or illustrations.

Color

Fig (brand, violet) is the only action color. It is used for primary buttons, links, selected states and the focus ring. The brand ramp holds chroma highest at 400–600 and tapers evenly toward 50 and 950, so no step looks greyed out. Neutrals carry a low, constant plum tint, so greys read as warm taupe, which flatters food photography. Success was shifted toward olive and warning is ochre; both lean warm to match Fig. Danger is a crimson that stays well apart from Fig in hue: destructive vs primary ΔE2000 is above 18 in both modes. Light mode: primary brand.600 on white is about 6.4:1, muted-foreground neutral.700 on muted is about 6.3:1, and ring brand.500 on background is about 4.2:1. Dark mode is built on its own tokens, not an inversion. The background is neutral.950, a deep aubergine-black. Card and popover sit one step lighter on neutral.900. Primary is a soft lilac (brand.400, about 6.2:1 on background) with brand.950 text, so it glows gently without looking neon.

Typography

Geist covers display, interface and body text. Geist Mono is reserved for order IDs, promo codes and timestamps. The heading scale steps by about 1.27: heading-sm 18, heading-md 22, heading-lg 28, display-md 36, display-lg 46. Tracking tightens as size grows, from -0.005em at 18px to -0.025em at 46px. Display styles use weight 600 and heading-lg uses 500, so headlines read friendly rather than corporate. Body-md is 16px at line height 1.6 for menus and dish descriptions. Labels are 14px/500 and captions are 12px/500. All weights used (400, 500, 600) ship with Geist and Geist Mono.

Layout

Comfortable density on a 4px base grid (space tokens). Mobile gutters are space.4–space.6 (16–24px); desktop content is capped at 1120px. Menu cards use space.5 (20px) padding. Order rows keep a minimum 44px tap height with space.3 (12px) vertical padding.

Elevation

Mostly flat. Cards sit on the background with a 1px border token and shadow-sm, a plum-tinted shadow at 6% opacity. shadow-md is for the sticky cart bar, popovers and dropdown menus. shadow-lg is only for dialogs and bottom sheets. In dark mode, depth comes mainly from the surface step (neutral.950 to neutral.900) and the border (neutral.800), because shadows barely show on dark surfaces.

Shapes

Generously rounded. Use radius.md (12px) on buttons and inputs, radius.lg (16px) on cards and card images, and radius.xl (24px) on bottom sheets, dialogs and hero images. radius.full (pill) is for badges, filter chips and the courier status tag. radius.sm (6px) is only for small inner elements such as checkboxes and tooltips. radius.none is only for dividers.

Do

• Use one primary button per screen for the main action, such as 'Place order' or 'Add to basket'. Style other actions as secondary (neutral.100 surface) or ghost.
• Keep buttons and inputs at their 44px height token, and give order rows at least 44px tap height.
• Show the focus state as a 2px ring token (brand.500 light, brand.400 dark) with a 2px offset on buttons, inputs, chips and cards.
• Round food photos with radius.lg (16px) inside cards and radius.xl (24px) for hero images and bottom sheets.
• Set prices and delivery times in label or body-md with font-feature-settings: 'tnum', and right-align them in order summaries.
• Use the code style (Geist Mono 14px) only for order IDs, promo codes and timestamps.
• Pair every success, warning and destructive badge or banner with an icon and a text label, for example a check icon plus 'Delivered'.
• Separate cards from the background with the 1px border token and shadow-sm. Use shadow-md for the sticky cart bar and popovers, and shadow-lg only for dialogs and bottom sheets.

Don’t

• Don't use destructive (danger.600 / danger.400) for promotions or deals. Reserve it for errors, cancellations and 'Remove item'.
• Don't use #000000, a #ffffff page background or untinted greys. Use the neutral ramp, and keep #ffffff for light-mode card and popover only.
• Don't apply radius.none or radius.sm to cards, buttons, inputs or images.
• Don't set display-lg, display-md or heading-lg below 28px, in all caps, or at weight 400.
• Don't run body text longer than one line on the accent surface (brand.100 light / brand.900 dark). Use accent for selected rows, active filter chips and highlights.
• Don't put muted-foreground text on brand or status surfaces. Use the matching *-foreground token.
• Don't add decorative textures, illustrations or hand-drawn fonts. The warmth comes from the color, radius and spacing tokens.