Design Tokens

Exports

Developers have long used variables to associate a value with a named property. Design tokens are integrated into the pipeline as either variables or properties. This creates a consistent design language between design and development. The naming taxonomy describes the specific use case.

                                                        
                                                        
                                                            // Design Tokens as a Variable
                                                        --co-base-font-family: "Arial, sans-serif"
                                                        
                                                        // Design tokens as a value
                                                        --component-font-family: var(--co-base-font-family)
                                                        
                                                        // Example Class
                                                        .prose {
                                                            font-family: var(--co-base-font-family);
                                                            ...
                                                        }
                                                        
                                                            

Compound uses Supernova to manage design tokens that output namespaced CSS variables.Other export options are available.

Token Management

Supernova's token manager is the centralised interface for all Compound design tokens. It provides a visual UI to manage each brand and theme.

Custom exporters convert these to CSS and SCSS variables following the naming convention and deploy them to the Compound codebase.

Supernova Token Manager

CSS Tokens

This output file contains standard CSS custom properties (variables) and themes, Compound components.

                                                        
                                                        
                                                            :root {
                                                          /* Body copy font family */
                                                          --co-font-family-body: "Arial";
                                                          /* To be used for Headings/Subheadings */
                                                          --co-font-family-heading: "Ubuntu";
                                                        
                                                        /*  Composite Example */
                                                          --co-typography-heading-xl: "700" var(--co-font-size-xl)/var(--co-line-height-xl) "Ubuntu";
                                                          --co-typography-heading-lg: "700" var(--co-font-size-lg)/var(--co-line-height-lg) "Ubuntu";
                                                          --co-typography-heading-md: "700" var(--co-font-size-md)/var(--co-line-height-md) "Ubuntu";
                                                        }
                                                        
                                                            

Prefixes

Compound design tokens use the "co" prefix to namespace them from other tokens on the web platform. This is not required for the React Native platform.

                                                        
                                                        
                                                            // CSS Variables
                                                        --co-variable-name : value;