Patterns
Do's and don'ts for using Finitless design system components. Follow these patterns to maintain brand consistency.
Buttons
Do
Use Finitless Blue (#165DFC) for solid action buttons
Don't
Use non-brand blues (#2563eb, etc.) for buttons
Do
Use CTA gradient for the ONE primary action per page
Don't
Use multiple gradient buttons on the same page
Do
Use minimum 36px height for button touch targets
Don't
Use button heights below 36px
Do
Use minimum 8px border radius (default is 12px)
Don't
Use border radius below 8px on buttons
Cards
Do
Use glass background: rgba(255,255,255,0.05)
Don't
Use solid white or light backgrounds on cards
Do
Include a hover state with cyan border glow
Don't
Omit hover states on interactive cards
Do
Use minimum 8px border radius (default is 12px)
Don't
Use sharp corners (0px radius)
Do
Use subtle borders: rgba(255,255,255,0.10)
Don't
Use strong white borders that feel heavy
Gradient Text
Do
Use all 3 gradient stops: cyan → purple → magenta
Don't
Omit the cyan stop from the gradient
Do
Apply gradient text to hero headings only
Don't
Apply gradient text to body copy or UI labels
Do
Use left-to-right direction for gradients
Don't
Use top-to-bottom or other directions
Form Inputs
Do
Use dark glass background: rgba(255,255,255,0.05)
Don't
Use white or light backgrounds on inputs
Do
Show cyan focus ring on focus state
Don't
Omit focus states on form elements
Do
Use minimum 16px font size (prevents iOS zoom)
Don't
Use font sizes below 16px in inputs
Do
Use minimum 12px border radius
Don't
Use border radius below 8px on inputs
OAuth / Social Buttons
Do
Use secondary button pattern (glass bg + border)
Don't
Use CTA gradient for OAuth buttons
Do
Include provider icon and name (e.g., "Continue with Google")
Don't
Use just the provider logo without text
Do
Use consistent height with primary submit button (48px)
Don't
Make OAuth buttons smaller than the main form submit
Logo Usage
Do
Use supplied image assets from /assets/logos/
Don't
Render the logo from BEASIGNE font or any text
Do
Resize proportionately only
Don't
Stretch or distort the logo
Do
Use appropriate size for context (120w-300w for headers)
Don't
Use low-resolution versions in high-DPI contexts
Do
Maintain minimum clear space (50% of icon height)
Don't
Crowd the logo with other elements
Select / Dropdowns
Do
Use custom styled select with glass panel
Don't
Use native browser <select> without styling
Do
Use subtle cyan tint for hover: rgba(0,183,255,0.12)
Don't
Use brand gradient as option hover background
Do
Use elevated background for dropdown: rgba(255,255,255,0.08)
Don't
Use same background as page for dropdown panel
Do
Include 12px 16px padding per option
Don't
Omit padding between dropdown options
Quick Reference
| Element | Min Radius | Default Radius | Background |
|---|---|---|---|
| Buttons | 8px | 12px | #165DFC (solid) or gradient |
| Cards | 8px | 12px | rgba(255,255,255,0.05) |
| Inputs | 8px | 12px | rgba(255,255,255,0.05) |
| Dropdown Panel | 8px | 12px | rgba(255,255,255,0.08) |
| Badges | 6px | 8px | varies by variant |