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 = <ThemeProvider> <h1>Hello</h1> </ThemeProvider>;
// Usage in a styled componentimport styled from 'styled-components'; const Section = styledsection` background-color: ;`;
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 = /> // Center aligned<Text ='center' /> // Weight on the weight scale<Text = /< // < /> // Blue text from the color palette<Text ='blue' /> // With a <p> HTML tag<Text ="p" /> Prop | Type | Description---|---|---fontSize | number or string | Sets font size based on the typographic scalealign | string | Sets the `text-string` propertyweight | number | Sets the `font-weight` propertycaps | boolean | Sets styles for all-caps type treatmentscolor | string | Sets color based on the color paletteis | string or element | Changes the underlying HTML element