Design System Foundation and Token Layers

Table of Content

Let’s Learn

Design systems are crucial for developing scalable and consistent user interfaces, particularly in extensive applications.

To establish a successful design system, it’s essential to define and manage various layers. These layers include:

• Foundations
• Tokens
• Core Systems
• Components

The foundational and token layers are vital as they establish the groundwork on which all other elements are constructed.

Foundation Layer

The Foundation Layer in user interface design acts as the bedrock of an organization’s branding within digital products. It includes all the essential elements that establish and maintain visual and sensory consistency across platforms. This layer sets the fundamental design standards and creative assets, which are meticulously documented and adhered to in order to ensure that the brand’s identity is coherent and impactful.

Tokens Layer

The Tokens Layer consists of practical, codified design decisions that translate the Foundation Layer’s guidelines into actionable elements that can be reused across applications. Design tokens are variables used to maintain scalability and consistency in design by abstracting visual properties into a structured format that can be applied programmatically. This layer bridges the gap between design and development by providing a toolkit that can adapt the foundational design standards to various platforms and screen sizes without losing the essence of the brand’s visual identity.

Let’s dig in and learn more about these layers.

Colors

Colors form the most basic visual aspect of your design system. They convey emotions, draw attention, and ensure readability. The foundation should include:

• Primary colors: Your brand colors used most frequently across all platforms.
• Secondary colors: Support primary colors for accents and highlights.
• Neutral palette: Used for backgrounds, text, and borders.
• Semantic colors: Convey meanings like success (green), warning (yellow), and error (red).

:root {
  /* Primary Colors */
  --color-primary-1: #005bac; /* Main brand color, often used for primary buttons and active states */
  --color-primary-2: #003778; /* Darker shade of the primary color for hover states and deeper accents */

  /* Secondary Colors */
  --color-secondary-1: #ffc107; /* Bright secondary color, often used for secondary buttons and highlights */
  --color-secondary-2: #ffa000; /* Slightly darker shade for secondary hover states */

  /* Neutral Palette */
  --color-neutral-1: #ffffff; /* White, used for backgrounds and on light themes */
  --color-neutral-2: #f4f4f4; /* Light grey, used for off-white backgrounds and UI elements */
  --color-neutral-3: #2f2f2f; /* Dark grey, used for text and primary content areas */

  /* Semantic Colors */
  --color-success: #28a745; /* Green, used for success states and confirmations */
  --color-warning: #ffc107; /* Yellow, used for warnings and caution notices */
  --color-error: #dc3545; /* Red, used for error states and critical actions */
}

These CSS variables are defined within the :root pseudo-class, which means they are accessible globally across your stylesheets. You can use these variables anywhere in your CSS by referring to them with the var() function, like so:

button {
  background-color: var(--color-primary-1);
  color: var(--color-neutral-1);
}

button:hover {
  background-color: var(--color-primary-2);
}

.alert-success {
  background-color: var(--color-success);
}

.alert-warning {
  background-color: var(--color-warning);
}

.alert-error {
  background-color: var(--color-error);
}

Typography

Typography governs the appearance of text. It should be functional, accessible, and expressive. Key elements include:

• Type Scale: Different sizes for headings, subheadings, body text, and captions.
• Fonts: Primary and secondary fonts.
• Line Height: Ensures text readability and accessibility.
• Font Weights and Styles: Regular, bold, italic, etc.

:root {
  /* Fonts */
  --font-primary: "Roboto", sans-serif; /* Primary font for text */
  --font-secondary: "Merriweather", serif; /* Secondary font for decorative text */

  /* Type Scale */
  --font-size-h1: 2.25rem; /* Heading 1 */
  --font-size-h2: 1.75rem; /* Heading 2 */
  --font-size-h3: 1.5rem; /* Heading 3 */
  --font-size-h4: 1.25rem; /* Heading 4 */
  --font-size-body: 1rem; /* Body text */
  --font-size-caption: 0.875rem; /* Caption text */

  /* Line Heights */
  --line-height-heading: 1.3; /* Line height for headings */
  --line-height-body: 1.6; /* Line height for body text */
  --line-height-caption: 1.4; /* Line height for captions */

  /* Font Weights and Styles */
  --font-weight-regular: 400; /* Regular weight */
  --font-weight-bold: 700; /* Bold weight */
  --font-style-italic: italic; /* Italic style */
}

You can use these CSS variables in your styles to ensure consistency and readability throughout your design system.

h1 {
  font-size: var(--font-size-h1);
  font-family: var(--font-primary);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-bold);
}

h2 {
  font-size: var(--font-size-h2);
  font-family: var(--font-primary);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-bold);
}

body {
  font-size: var(--font-size-body);
  font-family: var(--font-primary);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
}

.caption {
  font-size: var(--font-size-caption);
  font-family: var(--font-secondary);
  line-height: var(--line-height-caption);
  font-style: var(--font-style-italic);
}

Spacing

Spacing helps in creating a layout structure and maintaining visual consistency. It includes:

• Padding and Margin: Space inside and outside elements.
• Grid Systems: Define layout patterns and alignment.
• Breakpoints: Adapt layouts to different screen sizes.

Here is how you can do it

:root {
  /* Padding and Margin */
  --space-xs: 4px; /* Extra small space */
  --space-sm: 8px; /* Small space */
  --space-md: 16px; /* Medium space */
  --space-lg: 24px; /* Large space */
  --space-xl: 32px; /* Extra large space */

  /* Grid System */
  --grid-gutter-width: 16px; /* Space between columns */
  --grid-column-count: 12; /* Number of columns in the grid */

  /* Breakpoints */
  --breakpoint-xs: 480px; /* Extra small devices (phones) */
  --breakpoint-sm: 768px; /* Small devices (tablets) */
  --breakpoint-md: 992px; /* Medium devices (small laptops) */
  --breakpoint-lg: 1200px; /* Large devices (desktops) */
  --breakpoint-xl: 1400px; /* Extra large devices (large desktops) */
}

Here’s how you can use these variables to create a responsive layout system:

.container {
  width: 100%;
  padding-right: var(--space-md);
  padding-left: var(--space-md);
  margin-right: auto;
  margin-left: auto;
}

/* Grid Columns */
.col {
  float: left;
  padding: 0 var(--grid-gutter-width);
}

/* For responsive designs */
@media (min-width: var(--breakpoint-sm)) {
  .col-sm {
    width: calc(
      100% / var(--grid-column-count) * 4
    ); /* Example: Four columns wide on small devices */
  }
}

@media (min-width: var(--breakpoint-md)) {
  .col-md {
    width: calc(
      100% / var(--grid-column-count) * 6
    ); /* Example: Six columns wide on medium devices */
  }
}

@media (min-width: var(--breakpoint-lg)) {
  .col-lg {
    width: calc(
      100% / var(--grid-column-count) * 8
    ); /* Example: Eight columns wide on large devices */
  }
}

@media (min-width: var(--breakpoint-xl)) {
  .col-xl {
    width: calc(
      100% / var(--grid-column-count) * 10
    ); /* Example: Ten columns wide on extra large devices */
  }
}

Iconography

Icons help in navigation and information presentation. They should be:

• Consistent: Similar in style and proportion.
• Scalable: Clear at different sizes.
• Accessible: Comprehensible to all users, including those with disabilities.

When defining a system for iconography within a CSS framework, you can’t directly store icons like you would colors or fonts in CSS variables. However, you can establish guidelines and best practices using CSS to ensure icons are consistent, scalable, and accessible.

:root {
  --icon-size-small: 16px;
  --icon-size-medium: 24px;
  --icon-size-large: 32px;
}

.icon {
  fill: currentColor; /* Allows the icon color to be defined by the text color it is contained within */
  width: var(--icon-size-medium); /* Default size */
  height: var(--icon-size-medium); /* Default size */
  display: inline-block;
  vertical-align: middle;
}

/* Example of scaling icons */
.icon-small {
  width: var(--icon-size-small);
  height: var(--icon-size-small);
}

.icon-large {
  width: var(--icon-size-large);
  height: var(--icon-size-large);
}

Borders and Radius

These define the shape and separation of elements:

• Border styles: Solid, dashed, dotted.
• Border thickness: Typically in pixels.
• Radius: For rounded corners, enhancing the UI’s feel.

Let’s define CSS custom properties for borders, border styles, border thickness, and radius to standardize and control the appearance of these properties across your design system.

:root {
  /* Border Styles */
  --border-style-solid: solid;
  --border-style-dashed: dashed;
  --border-style-dotted: dotted;

  /* Border Thickness */
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 4px;

  /* Border Radius */
  --radius-small: 4px; /* Small radius for subtle curvature */
  --radius-medium: 8px; /* Medium radius for default elements like buttons, input fields */
  --radius-large: 16px; /* Large radius for card components, modals, etc. */
}

And here is how you apply these tokens to your elements

/* Applying border styles to elements */
.box {
  border-style: var(--border-style-solid); /* Default style */
  border-width: var(--border-medium); /* Default thickness */
  border-radius: var(--radius-medium); /* Default radius */
}

/* Example usage in different contexts */
.button-rounded {
  border-radius: var(--radius-large);
}

.card {
  border: var(--border-thin) var(--border-style-dotted);
  border-radius: var(--radius-small);
}

.input-field {
  border: var(--border-medium) var(--border-style-solid);
  border-radius: var(--radius-small);
}

Shadows and Depth

Used to differentiate interface layers and emphasize elements:

• Box Shadows: Parameters like offset, blur, and spread.
• Layering: Z-index values for layout depth.

Here’s a CSS setup that includes shadow definitions and z-index layering:

:root {
  /* Box Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); /* Small shadow for subtle depth */
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); /* Medium shadow for buttons, small elements */
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); /* Large shadow for modals, popovers */
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04); /* Extra large shadow for major UI components */

  /* Layering with z-index */
  --zindex-dropdown: 1000;
  --zindex-sticky: 1020;
  --zindex-fixed: 1030;
  --zindex-modal-backdrop: 1040;
  --zindex-modal: 1050;
  --zindex-popover: 1060;
  --zindex-tooltip: 1070;
}

And this is how you can apply shadows to elements

/* Applying shadows to elements */
.card {
  box-shadow: var(--shadow-md); /* Default medium shadow for card elements */
}

.button {
  box-shadow: var(--shadow-sm); /* Small shadow for buttons */
}

.modal {
  box-shadow: var(--shadow-xl); /* Extra large shadow for modals */
  z-index: var(--zindex-modal); /* High z-index for modal */
}

/* Layering examples */
.navbar {
  position: sticky;
  z-index: var(--zindex-sticky); /* Z-index for sticky navbar */
}

.tooltip {
  z-index: var(
    --zindex-tooltip
  ); /* High z-index so tooltips float above all other elements */
}

Motion

Defines how UI elements interact dynamically:

• Animations: Smooth transitions for UI elements.
• Motion Principles: Consistent and meaningful movement that aligns with your brand’s personality.

Here’s a comprehensive setup that covers animations and motion principles:

:root {
  /* Transition Durations */
  --duration-fast: 200ms; /* Fast transitions for subtle effects */
  --duration-normal: 300ms; /* Standard duration for most UI transitions */
  --duration-slow: 500ms; /* Slow transitions for more significant movements */

  /* Easing Curves */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* Accelerates from zero velocity */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* Decelerates to zero velocity */
  --ease-in-out: cubic-bezier(
    0.4,
    0,
    0.2,
    1
  ); /* Acceleration until halfway, then deceleration */
}

/* Basic animation for fading in elements */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Basic animation for sliding elements from left */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

And you can apply it to elements like below

/* Applying fade-in animation with easing and duration */
.fade-in {
  animation: fadeIn var(--duration-normal) var(--ease-in-out) both;
}

/* Applying slide-in-left animation */
.slide-in-left {
  animation: slideInLeft var(--duration-normal) var(--ease-out) both;
}

/* Example of using transitions for hover effects */
.button {
  transition:
    background-color var(--duration-fast) var(--ease-in-out),
    transform var(--duration-fast) var(--ease-out);
}

.button:hover {
  background-color: #005bac; /* Example color */
  transform: scale(1.1); /* Example transformation */
}

Accessibility

Ensures your design is usable by everyone, including people with disabilities:

• Color Contrast: Sufficient contrast between text and background.
• Aria Labels: For screen readers.
• Keyboard Navigation: Ensure interface can be navigated using a keyboard.

Here’s how you can integrate accessibility features into your design system using CSS and HTML best practices, focusing on color contrast, ARIA labels, and keyboard navigation:

Color Contrast

Ensuring sufficient color contrast between text and its background is crucial for readability, especially for users with visual impairments. Here’s how you can define color contrast guidelines:

:root {
  /* High contrast color scheme */
  --text-color: #ffffff; /* White text */
  --background-color: #333333; /* Dark background */
  --text-color-secondary: #777777; /* Light grey for less critical text */
}

/* Applying high contrast colors */
.body-text {
  color: var(--text-color);
  background-color: var(--background-color);
}

.secondary-text {
  color: var(--text-color-secondary);
}

ARIA Labels: Using ARIA (Accessible Rich Internet Applications) labels helps screen readers interpret what’s on the screen, especially for interactive elements like buttons and links that might not have text content.

Example:

<button aria-label="Close window">X</button>

This aria-label provides a textual description for screen readers, even though the button only displays an ‘X’.

Keyboard Navigation: Ensuring your interface can be navigated with a keyboard is essential for users who cannot use a mouse. Use CSS to highlight focusable elements when they are focused:

a,
button,
input,
textarea {
  outline: none; /* Removing default outline */
}

a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: 3px solid var(--color-primary-1); /* Custom focus style for better visibility */
}

Additionally, ensure that all interactive elements are accessible by tab navigation, which means setting tabindex if necessary:

HTML Example for non-standard interactive elements:

<div tabindex="0" aria-label="Readable content" role="button">Click me</div>

This setup makes a button-like div element focusable and understandable to screen readers.

Implementing These Accessibility Features

• Check Color Contrast: Use tools like WebAIM's Contrast Checker to ensure your text-background contrasts meet WCAG AA or AAA standards.
• Use Semantic HTML: Whenever possible, use semantic HTML elements (<button>, <a>, <input>, etc.) as they come with built-in accessibility features.
• Test with Screen Readers: Regularly test your website with screen readers like NVDA or VoiceOver to understand how your site performs for non-sighted users.
• Keyboard Testing: Navigate your entire site using only the keyboard to ensure no element is inaccessible.

Voice and Tone

Voice: Voice reflects the personality of your brand. It should be consistent across all content.

• Consistent: Regardless of the context or platform, the brand voice remains the same.
• Authentic: The voice should feel genuine and true to the brand’s values.
• Descriptive Example: If your brand were a person, how would they speak? Are they formal and professional, warm and friendly, or perhaps witty and irreverent?

Example Voice Definition::

Our brand voice is approachable, confident, and knowledgeable.
We aim to be a trusted advisor to our users, offering clear, concise, and helpful information.

Tone: Tone, unlike voice, can change depending on the audience, the situation, or the platform.

• Adaptable: Adjusts to fit the context or emotional state of the audience.
• Sensitive: Recognizes and respects the user’s feelings and circumstances.
• Descriptive Example: For customer support interactions, the tone might be empathetic and reassuring, whereas for instructional content, it might be more direct and informative.

Example Tone Adjustments:

- **Support Queries**: Use a tone that is empathetic and patient. Acknowledge the user’s frustration and offer clear, straightforward solutions.
- **Marketing Content**: Be energetic and inspiring, encouraging users to see the potential in our products.
- **Educational Material**: Maintain a professional and informative tone, ensuring content is accessible and easy to understand.

Elevation

1. Principles of Elevation

• Clarity: Use elevation to differentiate between elements on the screen, making it clear which elements are interactive or in focus.
• Consistency: Maintain consistent elevation levels across similar types of elements to ensure a cohesive user experience.
• Subtlety: Avoid excessive use of deep shadows or high elevations that might clutter the interface.

2. Defining Elevation Levels: Specify a set of elevation levels, usually defined by the spread and intensity of shadows. These levels should be scalable and easily referenced.

• Base level (0dp): No shadow, used for elements directly on the surface.
• Low level (1-3dp): For less pronounced elements like buttons in their default state.
• Medium level (4-6dp): For elements that require moderate emphasis such as active buttons.
• High level (7-9dp): Used for elements that need to stand out significantly, such as modals or floating action buttons.

3. CSS Custom Properties for Shadows: Define shadow styles in CSS variables, allowing easy application and consistency.

:root {
  --shadow-1dp: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-3dp: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  --shadow-6dp: 0 6px 10px rgba(0, 0, 0, 0.19), 0 6px 20px rgba(0, 0, 0, 0.23);
  --shadow-9dp: 0 9px 12px rgba(0, 0, 0, 0.2), 0 9px 46px rgba(0, 0, 0, 0.25);
}

4. Applying Elevation in CSS: Use the defined shadow variables to apply consistent elevation styles across components.

.button {
  box-shadow: var(--shadow-1dp);
}

.active-button {
  box-shadow: var(--shadow-3dp);
}

.modal {
  box-shadow: var(--shadow-9dp);
}

Considerations for Accessibility

• Visibility: Ensure that elements at different elevations are distinguishable for users with visual impairments.
• Consistency: Avoid changing the elevation dynamically in ways that could confuse users about the interface’s structure.

Documentation and Examples: Provide clear documentation on when and how to use different elevation levels. Include visual examples to demonstrate the appropriate contexts for each level.

Responsive and Adaptive Considerations: Ensure that elevation and shadows adjust appropriately across different devices and lighting conditions. Shadows that are too subtle or too bold can look out of place on mobile devices or under different ambient lighting conditions.

These elevation guidelines help create a layered, intuitive interface that aids user interaction and visual comprehension. By documenting and standardizing these guidelines in your design system, you ensure a consistent and effective implementation across your digital products.

Content Strategy

• Content Templates: Provide templates or examples of text for different scenarios that reflect the appropriate tone.
• Training: Offer training sessions for content creators on how to use the brand voice and adapt the tone.
• Review Process: Establish a review process to ensure all content aligns with voice and tone guidelines.

Design systems are not static; they evolve with your products and technology. Regular updates and adaptations will keep your system effective and relevant.