Theme customization options reference

Complete reference of theme properties

This reference documents every customizable theme property available in Userorbit. Use it as a lookup when configuring your widget and portal appearance through Settings → Design.

Color properties

All color values accept hex codes (e.g., #4F46E5), RGB values, or HSL values.

Primary — main brand color used for buttons, links, active states, and interactive elements.
Secondary — supporting brand color for secondary buttons, tags, and supplementary accents.
Background — base canvas color for the widget and portal.
Surface — elevated element color for cards, panels, modals, and dropdown menus.
Text — primary text color for headings and body content.
Muted Text — secondary text color for timestamps, helper text, and less prominent information.
Border — color for dividers, input field outlines, and card borders.
Success — semantic color for success states, confirmation messages, and completed indicators.
Warning — semantic color for warning notices and cautionary states.
Error — semantic color for error messages, validation failures, and destructive action confirmations.

Typography properties

Font Family — the typeface used across the widget and portal. Options: system fonts, Google Fonts (Inter, Roboto, Open Sans, Lato, Poppins, Nunito, Source Sans Pro, Raleway, Montserrat, Work Sans), or inherit from parent page.
Base Font Size — the root font size for body text. Default: 14px. Range: 12px–18px.
Heading Font Weight — weight applied to all heading levels. Options: Regular (400), Medium (500), Semibold (600), Bold (700).
Body Font Weight — weight applied to paragraph and body text. Options: Light (300), Regular (400), Medium (500).
Line Height — spacing between lines of text. Default: 1.5. Range: 1.2–2.0.

Shape and spacing properties

Border Radius — controls corner rounding across all elements (buttons, cards, inputs, modals). Default: 8px. Range: 0px (sharp corners) to 24px (heavily rounded).
Card Padding — internal spacing within card elements. Default: 16px.
Element Spacing — vertical gap between stacked elements like list items and form fields. Default: 12px.

Shadow properties

Card Shadow — box shadow applied to cards and elevated surfaces. Options: None, Subtle, Medium, Prominent.
Modal Shadow — box shadow applied to modal overlays and dialogs.

Theme mode

Mode — the overall color scheme. Options: Light, Dark, System (auto-detects user preference via prefers-color-scheme).

Widget Position — where the widget launcher appears. Options: Bottom Right, Bottom Left.
Widget Width — the width of the expanded widget panel. Default: 400px. Range: 320px–500px.
Launcher Icon — the icon displayed on the widget launcher button. Options: default Userorbit icon, custom icon upload, or emoji.
Launcher Size — diameter of the launcher button. Default: 56px. Range: 40px–72px.

Portal-specific properties

Page Width — maximum content width of the portal. Options: Standard (960px), Wide (1200px), Full Width.
Navigation Style — layout of portal navigation. Options: Top bar, Sidebar.
Logo — your brand logo displayed in the portal header. Recommended size: 200px × 40px or similar aspect ratio.
Favicon — browser tab icon for the portal. Must be a square image, recommended 32px × 32px.

Token inheritance

Some properties are derived automatically from others. Hover states are computed from the primary color. Disabled states use a muted version of the text color. Focus rings match the primary color at reduced opacity. You do not need to configure these individually — they update when you change their parent token.

Help Center