---
version: alpha
name: Lilac Trellis
description: "Calm botanical UI for creator tools: wisteria-violet actions on sage-tinted neutrals, soft round shapes, geometric Outfit type."
colors:
  background: "#f6f7f2"
  foreground: "#161911"
  card: "#fcfdfa"
  card-foreground: "#161911"
  popover: "#fcfdfa"
  popover-foreground: "#161911"
  primary: "#5c54b0"
  primary-foreground: "#ffffff"
  secondary: "#ecefe7"
  secondary-foreground: "#272b23"
  muted: "#ecefe7"
  muted-foreground: "#51574a"
  accent: "#eae9fb"
  accent-foreground: "#282454"
  destructive: "#b23256"
  destructive-foreground: "#ffffff"
  success: "#1f6337"
  success-foreground: "#ffffff"
  warning: "#f3d699"
  warning-foreground: "#3d2a01"
  border: "#dadfd2"
  input: "#c0c7b6"
  ring: "#766fca"
  dark-background: "#161911"
  dark-foreground: "#f6f7f2"
  dark-card: "#1d2119"
  dark-card-foreground: "#f6f7f2"
  dark-popover: "#272b23"
  dark-popover-foreground: "#f6f7f2"
  dark-primary: "#9791dc"
  dark-primary-foreground: "#181536"
  dark-secondary: "#3b4036"
  dark-secondary-foreground: "#ecefe7"
  dark-muted: "#3b4036"
  dark-muted-foreground: "#c0c7b6"
  dark-accent: "#282454"
  dark-accent-foreground: "#eae9fb"
  dark-destructive: "#e2708a"
  dark-destructive-foreground: "#360313"
  dark-success: "#56b46f"
  dark-success-foreground: "#082312"
  dark-warning: "#c99a33"
  dark-warning-foreground: "#261800"
  dark-border: "#3b4036"
  dark-input: "#51574a"
  dark-ring: "#9791dc"
typography:
  display-lg:
    fontFamily: Outfit
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.025em
  display-md:
    fontFamily: Outfit
    fontSize: 38px
    fontWeight: 600
    lineHeight: 1.14
    letterSpacing: -0.02em
  heading-lg:
    fontFamily: Outfit
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.015em
  heading-md:
    fontFamily: Outfit
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Outfit
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: -0.005em
  body-lg:
    fontFamily: Outfit
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Outfit
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Outfit
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Outfit
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.005em
  caption:
    fontFamily: Outfit
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.015em
  code:
    fontFamily: Geist Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.55
rounded:
  sm: 6px
  md: 10px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 42px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 42px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 42px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 42px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 42px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 42px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 42px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 42px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
---

# 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.

Moods: organic, calm, gentle, natural. Built for: creator-economy, publishing, membership-platforms. Density: comfortable.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

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.

- **Primary** `#5c54b0` / dark `#9791dc`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f6f7f2` / dark `#161911` on `#161911` / dark `#f6f7f2`: page surface and body text.
- **Card** `#fcfdfa` / dark `#1d2119`: raised surfaces.
- **Secondary** `#ecefe7` / dark `#3b4036`: secondary buttons and quiet controls.
- **Muted** `#ecefe7` / dark `#3b4036` with **muted-foreground** `#51574a` / dark `#c0c7b6`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#eae9fb` / dark `#282454`: highlights, selected rows, badges.
- **Destructive** `#b23256` / dark `#e2708a`, **Success** `#1f6337` / dark `#56b46f`, **Warning** `#f3d699` / dark `#c99a33`: status only, always paired with an icon or label.
- **Border** `#dadfd2` / dark `#3b4036`, **Input** `#c0c7b6` / dark `#51574a`, **Ring** `#766fca` / dark `#9791dc`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## 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.

- Display: **Outfit** (fallback system-ui, sans-serif)
- Interface: **Outfit** (fallback system-ui, sans-serif)
- Mono: **Geist Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Outfit | 48px | 1.1 | 600 |
| display-md | Outfit | 38px | 1.14 | 600 |
| heading-lg | Outfit | 30px | 1.2 | 500 |
| heading-md | Outfit | 24px | 1.3 | 500 |
| heading-sm | Outfit | 20px | 1.35 | 600 |
| body-lg | Outfit | 18px | 1.6 | 400 |
| body-md | Outfit | 16px | 1.6 | 400 |
| body-sm | Outfit | 14px | 1.5 | 400 |
| label | Outfit | 14px | 1.25 | 500 |
| caption | Outfit | 12px | 1.4 | 500 |
| code | Geist Mono | 13px | 1.55 | 400 |

## 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.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

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.

- sm: `0 1px 2px rgba(39, 43, 35, 0.06)`
- md: `0 6px 18px -4px rgba(39, 43, 35, 0.12)`
- lg: `0 20px 48px -12px rgba(39, 43, 35, 0.22)`

## 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.

Radius scale: sm 6px, md 10px, lg 16px, xl 24px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 42px tall, 20px horizontal padding, label type. Input: 42px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **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.
- **Do:** Show focus with a 2px ring token (brand.500 in light, brand.400 in dark) on every button, input and selectable row.
- **Do:** 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.
- **Do:** 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.
- **Do:** Set body copy in body-md (16px, line-height 1.6) and keep long-form editing columns near 680px wide.
- **Do:** Use popover (neutral.900) in dark mode for menus and dialogs so they sit above cards (#1d2119), and add shadow.md or shadow.lg.
- **Do:** Pair success, warning and destructive colors with an icon or text label so meaning never depends on color alone.
- **Do:** 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:** Don't use brand violet for errors or deletions. Use destructive (danger.600 in light, danger.400 in dark).
- **Don't:** 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:** 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:** Don't set headings off-scale (allowed sizes: 20, 24, 30, 38, 48px), and don't use Outfit weights above 600.
- **Don't:** 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:** 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:** Don't put shadow.md or shadow.lg on resting cards, and don't use black or high-opacity shadows anywhere.