Customizing the design

Every color, font and spacing control available, grouped the way the Design panel is.

Beyond presets, the Design panel exposes granular controls. A live preview updates as you change them. Here’s everything, grouped by section.

Background#

• Type — solid color or gradient.
• Page color, or a custom CSS gradient like linear-gradient(135deg,#a78bfa,#fbcfe8).

Surface / card#

• Card color, corner radius and padding.
• Shadow (None / Soft / Medium / Strong) or a custom CSS shadow.
• Glass blur for frosted effects.

Typography#

• Font (System default, Inter, Space Grotesk, Sora, or Fraunces).
• Text color and muted (secondary) text color.

Field labels#

• Label color, weight (Normal → Bold) and size.

Inputs#

• Border color and width, input fill color, and the date/time icon color.
• Control radius (how rounded inputs and buttons are).

Buttons#

• Accent — your primary brand color (used for buttons and highlights; defaults to #2563eb).
• Button fill (a color or CSS gradient), text color, radius, and shadow.

Spacing & sizing#

• Form width (Compact / Medium / Wide / Full, or custom).
• Fill screen height, field gap, and input padding.