Lilac Trellis

About Lilac Trellis

Overview

Lilac Trellis is built for tools creators keep open all day: newsletters, memberships, storefronts and content calendars. It uses one muted violet action color on sage-tinted neutrals, rounded shapes and a single geometric typeface. Contrast stays at or above 4.5:1 for all text pairs in both modes, with most pairs above 5.8:1. Surface tones stay soft for long editing sessions. The goal is a quiet working surface, not a promotional one.

Color

brand (wisteria, hue around 245°) is the only action hue. semantic primary is brand.600 #5c54b0 in light mode, with white text at about 6.3:1 and 5.8:1 against background. In dark mode it is brand.400 #9791dc, with brand.950 text at about 6.2:1 and 6.3:1 against background. ring uses brand.500 in light mode (about 4.0:1 on background) and brand.400 in dark mode. Neutrals are sage-tinted (hue around 85–95°, low chroma), so the cool violet reads against a green ground. Status scales share the brand's matte chroma curve. success is a slightly cool leaf green: success.700 with white text at about 7.2:1. warning is ochre with smoothed 300–500 steps. danger is a desaturated rose-crimson around hue 347°: danger.600 with white at about 6.0:1, and danger.400 in dark mode. This keeps destructive far from primary in hue in both modes. Every scale darkens step by step from 50 to 950.

Typography

Outfit handles both display and interface text. Its round geometric forms read as friendly without looking juvenile. The scale is a major third (about 1.25) rounded to even pixels: 12, 14, 16, 18, 20, 24, 30, 38 and 48. Tracking tightens as size grows, from -0.005em at heading-sm (20px) to -0.025em at display-lg (48px). Body text stays at 0 tracking with a 1.6 line height. Weights are limited to 400, 500 and 600, all of which Outfit ships. Geist Mono at 13px (typography.code) is reserved for slugs, API keys, embed codes and numeric IDs.

Layout

Comfortable density on a 4px grid. Cards use space.6 (24px) padding. Sections are separated by space.8–space.12 (32–48px). App content columns max out at 1120px. Long-form editors stay near 680px so body-md lines run about 70 characters.

Elevation

Most surfaces are flat. They separate through a 1px border token and a tonal step, like layered paper. In light mode, background is neutral.50 and card is #fcfdfa. In dark mode, background is neutral.950, card is #1d2119 (a small lift) and popover is neutral.900 (a clearer lift). Shadows are tinted with moss rgba(39, 43, 35, …), never pure black. Cards use shadow.sm only. shadow.md and shadow.lg are reserved for menus, popovers and dialogs.

Shapes

Rounding is generous. Use radius.md (10px) on buttons and inputs, radius.lg (16px) on cards and radius.xl (24px) on large feature panels. Reserve radius.full for badges and tags. radius.sm (6px) is only for small inner elements such as checkboxes and code chips. radius.none is not used on interactive surfaces.

Do

• Use one semantic primary button per view for the main action, such as Publish or Send. Style other actions as secondary (neutral.100 fill) or ghost.
• Show focus with a 2px ring token (brand.500 in light, brand.400 in dark) on every button, input and selectable row.
• Use radius.md (10px) on buttons and inputs, radius.lg (16px) on cards, radius.xl (24px) on feature panels, and radius.full only on badges and tags.
• Separate surfaces with the 1px border token and a tonal step before adding shadow: background to card in light, neutral.950 to #1d2119 in dark.
• Set body copy in body-md (16px, line-height 1.6) and keep long-form editing columns near 680px wide.
• Use popover (neutral.900) in dark mode for menus and dialogs so they sit above cards (#1d2119), and add shadow.md or shadow.lg.
• Pair success, warning and destructive colors with an icon or text label so meaning never depends on color alone.
• Use typography.code (Geist Mono 13px) only for slugs, API keys, embed snippets and IDs.

Don’t

• Don't use #000000 text or flat grey surfaces. Use the sage neutral ramp, and use #fcfdfa for light cards.
• Don't use brand violet for errors or deletions. Use destructive (danger.600 in light, danger.400 in dark).
• Don't add gradients, glows, or brand steps 500 and above as decorative fills. Brand 500 and above is for actions, links and focus only.
• Don't place muted-foreground text on brand.100 accent or on warning.200. Use accent-foreground or warning-foreground on those surfaces.
• Don't set headings off-scale (allowed sizes: 20, 24, 30, 38, 48px), and don't use Outfit weights above 600.
• Don't use radius.none or radius.sm (6px) on cards, buttons or inputs. Reserve radius.sm for checkboxes and inline code chips.
• Don't put paragraphs longer than two lines on the accent surface (brand.100 or brand.900). Use it for selected rows and highlights.
• Don't put shadow.md or shadow.lg on resting cards, and don't use black or high-opacity shadows anywhere.