FORD GLOBAL DESIGN SYSTEM

A composition of elements, components, and templates that drive the Ford digital space.

Combining modern design with technology, the Ford Design System is a unified language and the sole guide for designing and developing within the Ford Digital Ecosystem.
It’s meant to improve UI Consistency and quality and make the design and development process more efficient.

ECOSYSTEM

ENVIRONMENT

This system is about eliciting a the feeling of obtainable premium and removing the noise and confusion. A a place where every piece of content lives in organized chaos.

SURFACE

The surface lays beneath and holds together this environment. Freeing elements to almost float enabling a physical real world interaction feedback loop.

LAYERS

Using three levels of layers to prioritize and organize content. Our environment will energize with motions.

PHILOSOPHY

ELEMENTS

An element is the basic unit of the whole ecosystem. A group of elements conform a component.

01 // GRID LAYOUT (Copy)

02 // COLORS (Copy)

03 // DEPTH (Copy)

04 // TYPOGRAPHY (Copy)

05 // ICONOGRAPHY (Copy)

  
    ,
  
COMPONENTS

A composition of elements to build out globally scalable components

STYLING // DESKTOP (Copy)

STYLING // MOBILE (Copy)

STYLING // ACCESSIBILITY (Copy)

DISPLAY // OVERLAY (Copy)

CTA // DEPTH (Copy)

CTA // SPECIALTY (Copy)

CTA // PRIMARY (Copy)

CTA // SECONDARY (Copy)

TAB // ANATOMY (Copy)

TAB // DISPLAY (Copy)

CHECKBOX // ANATOMY (Copy)

RADIO // ANATOMY (Copy)

SWITCH // ANATOMY (Copy)

TOOLTIP // ANATOMY (Copy)

ACCORDION // ANATOMY (Copy)

SELECTIVE DROPDOWN // ANATOMY (Copy)

PREDICTIVE DROPDOWN // ANATOMY (Copy)

RADIO CARD // ANATOMY (Copy)

RADIO CARD // BEHAVIOR (Copy)

RADIO CARD // DEPTH (Copy)

RADIO CARD // TYPE (Copy)

CONTENT CARD // ANATOMY (Copy)

CONTENT CARD // PREVENTION (Copy)

CONTENT CARD // BEHAVIOR (Copy)

CONTENT CARD // IMAGE-FILL (Copy)

CONTENT CARD // EXPANDABLE (Copy)

CONTENT CARD // CONTENT VARIABLES (Copy)

BILLBOARD // ANATOMY (Copy)

BILLBOARD // DISPALY (Copy)

BILLBOARDS // BANNER HEADING (Copy)

BILLBOARD // SLIDER_1 (Copy)

BILLBOARD // SLIDER_2 (Copy)

BILLBOARDS // MASTHEAD (Copy)

BILLBOARDS // SOCIAL (Copy)

INDICATORS // ANATOMY_A (Copy)

INDICATORS // ANATOMY_B (Copy)

INDICATORS // BEHAVIOR (Copy)

TIMELINE // ANATOMY (Copy)

CAROUSEL // MOBILE DISPLAYS (Copy)

CAROUSEL // 4ct. SLIDES (Copy)

CAROUSEL // +5ct. SLIDES (Copy)

CAROUSEL // BILLBOARDS (Copy)

  
    ,
  
TEMPLATES

Templates are created by a group of components to create pages. They serve as an evergreen space where beauty is expressed in an organized way, and user interaction can exist.