Topline OS upgrades Forms with interaction states that automatically use your brand’s primary color. Focus rings, hovers, active states, progress bars, and validation messages are cleaner, more accessible, and consistent across fields and devices. Tie it to your global color tokens to update styling everywhere at once.
Brand-aware states: focus rings, hover/active styles, and progress bars use your Primary color
Clearer validation: success, warning, and error states use semantic colors with improved messages
Input polish: smoother focus outlines, filled/outlined styles, and tighter spacing on mobile
Buttons and CTAs: consistent hover/pressed animations and disabled/loading states
Radios, checkboxes, toggles: selection and ripple effects shift to Primary color
Progress and steps: accent-colored progress bars and step indicators for multi-step forms
Accessibility upgrades: higher-contrast defaults and visible keyboard focus indicators
Dark mode support: automatic adjustments for legibility in dark themes
Performance: lightweight effects with no layout shift and faster paint
Use a strong Primary color with adequate contrast to make focus and actions unmistakable
Keep Success/Warning/Error colors distinct from Primary to avoid confusion
For long forms, use multi-step with accent progress to reduce abandonment
Pair inline validation with concise helper text so users can fix errors quickly
Test in dark mode and on small screens to verify contrast and tap targets
Step 1
Open Sites → Forms and create or edit a form.
Step 2
In Form Styles or Theme, ensure “Use brand colors” or “Inherit global tokens” is enabled.
Do I need to restyle my existing forms?
No. Forms adopt brand-aware states automatically if they use the default theme or global tokens.
Where do these colors come from?
From your global brand palette (Primary, Success, Warning, Error). Edit them in Branding/Design.
Can I override the Primary color per form?
Yes. In Form Styles, you can set custom overrides, but global tokens are recommended for consistency.
Does this affect accessibility?
Yes, positively. Focus states are more visible and contrast targets are improved. Still verify with your palette.
Will this slow down my pages?
No. Effects are lightweight and designed to avoid layout shift; they use efficient CSS transitions.
