Digital & Web UI Components
Buttons
Buttons are the primary call-to-action elements in our digital interfaces.
Button Styles
Button Specifications
| Type | Background | Text Color | Usage |
|---|---|---|---|
| Primary | DYFIA Blue (#2D6DB5) | White | Main actions, CTAs |
| Secondary | White | DYFIA Blue (#2D6DB5) | Alternative actions |
| Text | Transparent | DYFIA Blue (#2D6DB5) | Tertiary actions, links |
Form Elements
Form inputs should be clear, accessible, and easy to use.
Input Fields
Input Specifications
| Property | Value |
|---|---|
| Height | 48px |
| Padding | 12px 16px |
| Border | 1px solid #E0E0E0 |
| Border Radius | 4px |
| Focus State | 2px solid DYFIA Blue (#2D6DB5) |
Cards
Cards are containers for grouping related content and actions.
Card Title
This is an example of a card component. Cards are used to group related information and make content scannable.
Card Specifications
| Property | Value |
|---|---|
| Background | White |
| Border | 1px solid #E0E0E0 |
| Border Radius | 8px |
| Padding | 24px |
| Shadow | 0 2px 8px rgba(0,0,0,0.08) |
Interactive States
| State | Visual Change |
|---|---|
| Hover | Darken by 10%, cursor: pointer |
| Active/Pressed | Darken by 15%, scale: 0.98 |
| Focus | 2px outline in DYFIA Blue |
| Disabled | Opacity: 0.5, cursor: not-allowed |
Component Best Practices
- Consistency: Use the same components across all interfaces
- Accessibility: Ensure all interactive elements are keyboard accessible
- Feedback: Provide clear visual feedback for all interactions
- Touch Targets: Minimum 44x44px for mobile touch targets
- Loading States: Show loading indicators for async actions