Design tokens

Usage

 

Add a list of tokens for developers with a Code block:


                                                        
                                                        
                                                            /* Primary 500 */
                                                        
                                                        
                                                        width: 96px;
                                                        height: 54px;
                                                        
                                                        /* Primary 500 */
                                                        
                                                        background: #D98C33;
                                                        
                                                        /* Inside auto layout */
                                                        
                                                        flex: none;
                                                        order: 0;
                                                        flex-grow: 0;
                                                        
                                                        /* Red 500 */
                                                        
                                                        
                                                        width: 96px;
                                                        height: 54px;
                                                        
                                                        /* Red 500 */
                                                        
                                                        background: #FA5252;
                                                        
                                                        /* Inside auto layout */
                                                        
                                                        flex: none;
                                                        order: 0;
                                                        flex-grow: 0;
                                                        
                                                        /* Orange 500 */
                                                        
                                                        
                                                        width: 96px;
                                                        height: 54px;
                                                        
                                                        /* Orange 500 */
                                                        
                                                        background: #FF922B;
                                                        
                                                        /* Inside auto layout */
                                                        
                                                        flex: none;
                                                        order: 0;
                                                        flex-grow: 0;
                                                        
                                                        /* Green 500 */
                                                        
                                                        
                                                        width: 96px;
                                                        height: 54px;
                                                        
                                                        /* Green 500 */
                                                        
                                                        background: #51CF66;
                                                        
                                                        /* Inside auto layout */
                                                        
                                                        flex: none;
                                                        order: 0;
                                                        flex-grow: 0;
                                                        
                                                            
#ae7029

Primary 600

#ae7029

Token set
-
#2b8a3e

Green 700

#2b8a3e

Token set
-
#d98c33

Primary 500

#d98c33

Token set
-
#ffffff

White

#ffffff

Token set
Core
#f76707

Orange 600

#f76707

Token set
-

Unable to render Markdown block, please provide valid .md URL.

Color

#ffffff
White
Token set
Core
#f8f9fa
Gray 000
Token set
-
#f1f3f5
Gray 100
Token set
-
#e9ecef
Gray 200
Token set
-
#dee2e6
Gray 300
Token set
-
#ced4da
Gray 400
Token set
-
#adb5bd
Gray 500
Token set
-
#868e96
Gray 600
Token set
-
#495057
Gray 700
Token set
-
#343a40
Gray 800
Token set
-
#212529
Gray 900
Token set
-
#000000
Black
Token set
-
#fbf4eb
Primary 100
Token set
-
#f7e8d6
Primary 200
Token set
-
#f0d1ad
Primary 300
Token set
-
#e1a35c
Primary 400
Token set
-
#d98c33
Primary 500
Token set
-
#ae7029
Primary 600
Token set
-
#573814
Primary 700
Token set
-
#fff5f5
Red 100
Token set
-
#ffe3e3
Red 200
Token set
-
#ff8787
Red 300
Token set
-
#ff6b6b
Red 400
Token set
-
#fa5252
Red 500
Token set
-
#f03e3e
Red 600
Token set
-
#c92a2a
Red 700
Token set
-
#fff4e6
Orange 100
Token set
-
#ffe8cc
Orange 200
Token set
-
#ffc078
Orange 300
Token set
-
#ffa94d
Orange 400
Token set
-
#ff922b
Orange 500
Token set
-
#f76707
Orange 600
Token set
-
#d9480f
Orange 700
Token set
-
#ebfbee
Green 100
Token set
-
#d3f9d8
Green 200
Token set
-
#8ce99a
Green 300
Token set
-
#69db7c
Green 400
Token set
-
#51cf66
Green 500
Token set
-
#37b24d
Green 600
Token set
-
#2b8a3e
Green 700
Token set
-