XYZ Design System

More coming soon

Motivation

In order to create a consistent experience for our users, the design system is meant to be the single source of truth for user interface standards for both designers and developers.

Building off of the work of previous efforts, this project intends to consolidate those ideas into a living, well-documented, and growing system.

Goals

The core goals of this project are to:

• Speed up design and development velocity
• Help create consistent, beautiful, and usable UI in our applications
• Promote best practices for accessibility, internationalization, and responsive web design

We hope to accomplish these goals by:

• Reducing the number of decisions needed when iterating on UI
• Reducing the amount of code duplication in our applications
• Serving as the standard for XYZ's visual language
• Providing easy-to-use and extensible components for anyone to consume

ThemeProvider

To use the design system in a React app, wrap the root component with the ThemeProvider. This will set typographic defaults and pass the theme as context, which allows styled-components to consume the theme.

import { ThemeProvider } from 'xyz-ds';

const App = props => (
    <ThemeProvider>
        <h1>Hello</h1>
    </ThemeProvider>
);

// Usage in a styled component
import styled from 'styled-components';

const Section = styled.section`
    background-color: ${props => props.theme.background};
`;

Theme

The theme style constants should be used wherever font sizes, margin, padding, media queries, and colors are needed. To be continued...

Primitive UI components

The preferred way of using the design system in a React application is with UI primitives. With effective use of the UI primitives, you can avoid writing custom CSS in your applications altogether.

<Text />

Use the <Text /> component to control font size, weight, alignment, and color.

// Font size 4 on the typographic scale
<Text fontSize={4} />

// Center aligned
<Text align='center' />

// Weight on the weight scale
<Text fontWeight={4} /<

// All-caps
<Text caps />

// Blue text from the color palette
<Text color='blue' />

// With a <p> HTML tag
<Text is="p" />

Prop | Type | Description
---|---|---
fontSize | number or string | Sets font size based on the typographic scale
align | string | Sets the `text-string` property
weight | number | Sets the `font-weight` property
caps | boolean | Sets styles for all-caps type treatments
color | string | Sets color based on the theme's color palette
is | string or element | Changes the underlying HTML element