Skip to main content

Color

When building or extending a palette:
  • You need more colors than you think. A real UI needs 8–10 shades of grey, 5–9 shades of the primary, and multiple shades per semantic color. (Sundial’s answer: 11-shade ramps for every family — see Reference Colors.)
  • Use HSL — it maps to human perception far better than hex or RGB.
  • Don’t just lighten and darken — rotate the hue. Lighter shades shift toward the nearest bright hue (60°, 180°, 300°), darker shades toward the nearest dark hue (0°, 120°, 240°). This produces richer, more natural ramps.
  • Define the edges first: pick the darkest and lightest shades, then fill the gaps. The middle shade should work as a button background.
  • Never rely on color alone to communicate meaning. Supplement with icons, weight, or position — critical for accessibility.
  • No grey text on colored backgrounds — it looks washed out. Use a lighter or darker shade of the background’s own hue. (This is the onButton = accent-200 rule — see Accent Colors.)

Depth & shadows

Shadows serve a purpose or don’t exist:
  • One light source, from above. Every shadow in the UI agrees on where light comes from.
  • A small elevation system (3–5 levels), subtle to pronounced: tight shadows for low elevation (buttons), larger diffused ones for high elevation (modals, dropdowns).
  • Combine two shadows for realism: a tight dark one at the contact edge plus a soft ambient one.
  • Shadows communicate interactivity — raised feels clickable, flat feels static. Use that intentionally.
  • In flat contexts, create depth through color: lighter surfaces read as closer. This is Sundial’s primary mechanism — the surfaceBg → surfaceElevated → surfaceHigh ladder — with real shadows reserved for genuinely floating things (the nav bar, the elevated card).

Borders & separation

Borders are a last resort for separating content. In order, try:
  1. More spacing
  2. A different background color
  3. A subtle shadow
  4. …and only then a border — light and low-contrast, so it separates without shouting
Too many borders make an interface feel busy; every border competes for attention.

Images & user content

  • User-uploaded content (avatars, photos) lives in fixed-size containers with cover-fit cropping. Never let user content dictate layout dimensions.
  • Text over images needs guaranteed legibility: overlays, lowered image contrast, or text scrims — don’t hope the image is dark enough. (Sundial’s wallpaper scrim rules encode this — see Wallpapers.)
  • Icons and images have an intended display size — don’t scale a 16px icon to 64px. Use the right asset, or enclose a small icon in a larger shape.
  • Prevent background bleed on light-edged images with a subtle inset shadow rather than a border.

Empty states & finishing touches

  • Empty states are design opportunities, not afterthoughts. A blank screen with “No data yet” is a missed chance to guide, reassure, or delight.
  • Replace defaults with intentional choices: custom bullet icons, styled checkboxes, accent borders on cards and alerts. Small upgrades to defaults signal craft.
  • Accent borders or colored top-edges add personality without complexity.
  • Break up monotonous layouts by alternating section background colors.