• FRAMEWORK

Foundations

Design Principles

Design Principles Overview

FO UI Framework follows clear design principles to ensure consistency, scalability, and accessibility across all applications. These principles define the foundation of our visual and interaction language, covering color, typography, spacing, and alignment.

Color Principles

Colors in FO Framework are defined using design tokens for flexibility and multi-brand support. All primary and secondary colors maintain WCAG AA contrast ratios for readability. Click to see all colors

Example Color Role Class Name Usage
Primary .fo-color-primary Main brand color for actions (e.g., buttons, links)
Secondary .fo-color-secondary Highlight elements or secondary actions
Success .fo-color-success Confirmation states, positive actions
Error .fo-color-error Error messages, destructive actions

Tip: Use semantic color classes like fo-color-primary instead of hardcoded hex values.

Typography Principles

FO UI Framework uses Ford F1 as the only approved typeface across all products. No alternative or fallback fonts should be used to ensure brand consistency.

Heading Hierarchy

A clear hierarchy of headings (H1–H6) is used for structure and accessibility. Each heading level represents a step down in visual and semantic importance.

  • H1 – Page titles, unique per page
  • H2 – Major sections
  • H3–H4 – Subsections
  • H5–H6 – Minor details or captions
Accessibility & Contrast

Typography must meet WCAG AA contrast ratios for readability. Ensure sufficient contrast between text and background, especially for headings and body text.

Example: Light grey text on white background should be avoided.

Font Size Utilities

Utility classes for font sizes (e.g., .fo-font-size-small, .fo-font-size-large) are documented separately in the Utilities section. Use these classes for precise sizing while maintaining design consistency.

Usage Notes
  • Always use Ford F1 font; no external or fallback fonts are permitted.
  • Maintain semantic HTML structure (H1–H6) for accessibility and SEO.
  • Ensure responsive scaling of headings for different breakpoints.

Spacing Utilities

FO UI Framework uses a 4px grid spacing system for consistency across all layouts. Spacing utilities help apply margin and padding quickly, supporting responsive and scalable design.

Two types of spacing utilities are available: granular classes (e.g., fo-m-2, fo-px-3) and quick spacing (e.g., fo-space-2 applies margin & padding together).

Spacing Scale (4px grid)

Values are based on rem units: 1 = 0.25rem (4px), 2 = 0.5rem (8px), 3 = 1rem (16px) etc.

Class Suffix Pixels REM
00px0rem
14px0.25rem
28px0.5rem
316px1rem
424px1.5rem
532px2rem
648px3rem
Directional Classes
  • fo-mt-2 → margin-top: 0.5rem
  • fo-mx-3 → margin-left/right: 1rem
  • fo-py-4 → padding-top/bottom: 1.5rem
  • fo-pl-1 → padding-left: 0.25rem
Best Practices
  • Use consistent scale (avoid arbitrary pixel values).
  • Prefer granular classes for layout control, fo-space for quick prototypes.
  • Combine with responsive utilities (future roadmap: fo-m-md-3).
Spacing Principles

Consistent spacing ensures visual rhythm and alignment across components. FO Framework uses a 4px grid system (4, 8, 12, 16px multiples).

Spacing Token Value Usage
fo-space-1 4px Small gaps, icon padding
fo-space-2 8px Default padding between elements
fo-space-3 12px Form field spacing
fo-space-4 16px Section separation, card padding

Use spacing utility classes (fo-m-2, fo-p-3) instead of fixed values for consistency.

Visual Language & Microinteractions

Motion and microinteractions are used sparingly to guide attention and confirm actions. Animations follow the ease-in-out timing function and last between 150–300ms.

  • Hover effects on buttons and links
  • Focus states for keyboard users
  • Subtle fade or slide animations for modals