UI Elements
Configure buttons, forms, borders, and interactive components.
Overview
The UI section in Design controls the appearance of all interactive elements:
- Buttons
- Form inputs
- Borders and dividers
- Shadows
- Rounded corners
- Focus states
Changes here affect every instance of these elements throughout your theme.
Buttons
Button Styles
TheDock provides multiple button styles:
| Style | Description |
|---|---|
| Primary | Main CTA, uses Primary color |
| Secondary | Supporting action, uses Secondary color |
| Outline | Border only, transparent background |
| Text | No background or border, just text |
| Ghost | Subtle, minimal appearance |
Button Properties
For each button style, configure:
| Property | Description |
|---|---|
| Background Color | Fill color (from palette) |
| Text Color | Label color |
| Border | Border style, width, color |
| Border Radius | Corner roundness |
| Padding | Internal spacing |
| Font Weight | Text weight |
| Text Transform | Uppercase, lowercase, etc. |
Hover States
Configure how buttons change on hover:
- Background - Color shift
- Text - Color change
- Border - Color/width change
- Transform - Scale, lift effect
- Transition - Animation timing
Active States
Define appearance when button is clicked/pressed.
Form Inputs
Input Types
Style these form elements:
- Text inputs
- Textareas
- Select dropdowns
- Checkboxes
- Radio buttons
- File uploads
Input Properties
| Property | Description |
|---|---|
| Background | Field background color |
| Border | Border style and color |
| Border Radius | Corner roundness |
| Padding | Internal spacing |
| Font Size | Text size in fields |
| Placeholder Color | Placeholder text color |
Focus States
When a user clicks into a field:
- Border Color - Highlight color
- Shadow - Glow effect
- Background - Subtle change
Validation States
- Error - Red border/text for invalid inputs
- Success - Green indicators for valid inputs
- Disabled - Grayed out appearance
Borders
Border Styles
Configure global border settings:
| Property | Options |
|---|---|
| Style | Solid, dashed, dotted |
| Width | Thin (1px) to thick (4px+) |
| Color | From your color palette |
| Radius | Sharp to fully rounded |
Border Radius Scale
Set a consistent radius scale:
| Level | Effect |
|---|---|
| None | Sharp corners (0px) |
| Small | Subtle rounding (2-4px) |
| Medium | Noticeable rounding (8px) |
| Large | Very rounded (16px+) |
| Full | Pill shape (50%) |
Using Borders
Apply borders to:
- Sections (bottom borders for separation)
- Cards and content blocks
- Images
- Buttons and inputs
Shadows
Shadow Presets
TheDock includes shadow presets:
| Preset | Description |
|---|---|
| None | No shadow |
| Small | Subtle lift |
| Medium | Standard depth |
| Large | Prominent shadow |
| Extra Large | Deep shadow |
Shadow Properties
Customize shadow values:
- X Offset - Horizontal position
- Y Offset - Vertical position
- Blur - Softness of shadow
- Spread - Size of shadow
- Color - Shadow color (usually dark transparent)
Elevation System
Use shadows to create depth hierarchy:
- Elements closer to user = larger shadow
- Modals and dropdowns = prominent shadows
- Cards and buttons = subtle shadows
Dividers
Divider Styles
Configure horizontal dividers:
| Property | Description |
|---|---|
| Style | Line, dotted, dashed |
| Width | Full width or partial |
| Thickness | Line weight |
| Color | From palette |
| Spacing | Margin above/below |
Using Dividers
Add dividers to:
- Separate content sections
- Break up long text
- Create visual rhythm
Transitions & Animations
Transition Timing
Configure how elements animate:
| Property | Description |
|---|---|
| Duration | How long (150ms-500ms typical) |
| Easing | Ease, ease-in-out, linear |
| Delay | Wait before animating |
Common Transitions
Applied to interactive elements:
- Button hover effects
- Input focus states
- Link underlines
- Card hover lifts
Applying UI Settings
Global Application
Settings in UI Elements apply everywhere automatically:
- All buttons use button settings
- All inputs use input settings
- All borders use border settings
Per-Block Overrides
Individual blocks can override global settings:
- Select the block
- Find style settings in the control panel
- Override specific properties
Best Practices
1. Consistency First
Let global settings do the work. Override sparingly.
2. Accessible Contrast
Ensure button text is readable against button background.
3. Clear Focus States
Users navigating with keyboards need visible focus indicators.
4. Appropriate Shadows
- Light themes: subtle shadows
- Dark themes: less shadow, more color contrast
5. Touch-Friendly Sizing
- Buttons: minimum 44x44px tap target
- Inputs: comfortable height for typing
- Spacing: room for fat fingers
6. Loading States
Consider how buttons look when loading/disabled.
Troubleshooting
Buttons look different across browsers
- Ensure explicit styling for all properties
- Reset browser defaults with consistent padding/margin
Focus ring not visible
- Check focus state color against background
- Ensure outline isn't set to
nonewithout alternative
Shadows look too harsh
- Reduce opacity of shadow color
- Increase blur radius
- Use multiple subtle shadows
Input fields cut off text
- Increase padding
- Verify line-height settings
Related Topics
- Colors - Color palette for UI elements
- Spacing - Padding and margins
- Icons - Icons in buttons and inputs