Skip to content

wagGit1248/tokendesign

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

64 Commits
 
 
 
 
 
 
 
 

Repository files navigation

<<<<<<< HEAD

Design Token -bth lai

=======

8f79fb54b10a53682ad0264dc44b52fc1f3e628b

Systematize variables in JSON format to synchronize from designing to coding (2023)

Token Structure

App Screenshot

Ref - Root Token

Color Hex
primary-90 #15304C #0a192f
secondary-0 #F2F7EA #f8f8f8
tertiary-60 #FAA500 #FAA500
gray-100 #171616 #171616
alpha-dark-10 #171616 #00d1a0
alpha-light-70 #FFFFFF #FFFFFF
error-90 #4C1E15 #4C1E15
success-30 #AECC7C #AECC7C
warning-10 #FFE0A5 #FFE0A5
info-50 #639CCE #639CCE

Sys (Light, Dark) - Alias Token

Color Reference
core-background-neutral-40 {gray-50}
core-extend-content-primary-80 {primary-80}
core-extend-border-always-light-alpha-80 {alpha-light-80}

Comp - Component Token

Color Reference
button-primary-default-container-color {core-background-neutral-40}
text-field-hover-leading-icon-color {core-extend-content-primary-80}
radio-disable-container-outline-color {core-extend-border-always-light-alpha-80 }

Features

  • Light/dark mode toggle
  • Theming with similar tonal

References

Related famous Design Token

Authors

The designers