tokens.json
Token Studio Format
{
"$schema": "https://schemas.tokens.studio/latest.json",
"$metadata": {
"tokenSetOrder": [
"colors",
"typography",
"spacing",
"sizing",
"borderRadius",
"borderWidth",
"shadows",
"effects",
"semantic"
]
},
"colors": {
"primary": {
"100": {
"$value": "#e3f2fd",
"$type": "color"
},
"200": {
"$value": "#bbdefb",
"$type": "color"
},
"300": {
"$value": "#90caf9",
"$type": "color"
},
"400": {
"$value": "#64b5f6",
"$type": "color"
},
"500": {
"$value": "#55a7f8",
"$type": "color"
},
"600": {
"$value": "#2196f3",
"$type": "color"
},
"700": {
"$value": "#1976d2",
"$type": "color"
},
"800": {
"$value": "#1565c0",
"$type": "color"
},
"900": {
"$value": "#0d47a1",
"$type": "color"
}
},
"secondary": {
"100": {
"$value": "#cfd8dc",
"$type": "color"
},
"200": {
"$value": "#b0bec5",
"$type": "color"
},
"300": {
"$value": "#90a4ae",
"$type": "color"
},
"400": {
"$value": "#78909c",
"$type": "color"
},
"500": {
"$value": "#607d8b",
"$type": "color"
},
"600": {
"$value": "#546e7a",
"$type": "color"
},
"700": {
"$value": "#455a64",
"$type": "color"
},
"800": {
"$value": "#2f3136",
"$type": "color"
},
"900": {
"$value": "#1c1e22",
"$type": "color"
}
},
"functional": {
"green": {
"100": {
"$value": "#F4F9F0",
"$type": "color"
},
"500": {
"$value": "#C3F3AF",
"$type": "color"
},
"900": {
"$value": "#355728",
"$type": "color"
}
},
"yellow": {
"100": {
"$value": "#FFF6DF",
"$type": "color"
},
"500": {
"$value": "#FCC45C",
"$type": "color"
},
"900": {
"$value": "#70461E",
"$type": "color"
}
},
"coral": {
"100": {
"$value": "#FFE9E4",
"$type": "color"
},
"500": {
"$value": "#FFA489",
"$type": "color"
},
"900": {
"$value": "#6C2E22",
"$type": "color"
}
},
"purple": {
"100": {
"$value": "#F3EFFF",
"$type": "color"
},
"500": {
"$value": "#BBAAFA",
"$type": "color"
},
"900": {
"$value": "#362C5C",
"$type": "color"
}
}
},
"ui": {
"lemon": {
"$value": "#F4E285",
"$type": "color"
},
"sky": {
"$value": "#DBEAFE",
"$type": "color"
}
},
"profile": {
"blue": {
"500": {
"$value": "#55A7F8",
"$type": "color"
}
},
"pink": {
"500": {
"$value": "#F8A5C2",
"$type": "color"
}
},
"coral": {
"500": {
"$value": "#FFA489",
"$type": "color"
}
},
"orange": {
"500": {
"$value": "#FFB464",
"$type": "color"
}
},
"purple": {
"500": {
"$value": "#BBAAFA",
"$type": "color"
}
},
"green": {
"500": {
"$value": "#C3F3AF",
"$type": "color"
}
}
},
"neutrals": {
"0": {
"$value": "#ffffff",
"$type": "color"
},
"50": {
"$value": "#FBFAF5",
"$type": "color"
},
"100": {
"$value": "#F5F4EE",
"$type": "color"
},
"200": {
"$value": "#ECEAE0",
"$type": "color"
},
"300": {
"$value": "#DDD9CC",
"$type": "color"
},
"400": {
"$value": "#C5C0B0",
"$type": "color"
},
"500": {
"$value": "#9A9585",
"$type": "color"
},
"600": {
"$value": "#6c757d",
"$type": "color"
},
"700": {
"$value": "#4a4f57",
"$type": "color"
},
"800": {
"$value": "#2f3136",
"$type": "color"
},
"900": {
"$value": "#212529",
"$type": "color"
}
}
},
"typography": {
"fontFamilies": {
"primary": {
"$value": "Igra Sans",
"$type": "fontFamily"
},
"mono": {
"$value": "Inter",
"$type": "fontFamily"
}
},
"fontWeights": {
"regular": {
"$value": "900",
"$type": "fontWeight"
},
"code": {
"$value": "400",
"$type": "fontWeight"
}
},
"fontSize": {
"xs": {
"$value": "0.75rem",
"$type": "fontSize"
},
"sm": {
"$value": "0.875rem",
"$type": "fontSize"
},
"base": {
"$value": "1rem",
"$type": "fontSize"
},
"lg": {
"$value": "1.125rem",
"$type": "fontSize"
},
"xl": {
"$value": "1.25rem",
"$type": "fontSize"
},
"2xl": {
"$value": "1.5rem",
"$type": "fontSize"
},
"3xl": {
"$value": "1.875rem",
"$type": "fontSize"
},
"4xl": {
"$value": "2.25rem",
"$type": "fontSize"
},
"5xl": {
"$value": "3rem",
"$type": "fontSize"
}
},
"lineHeights": {
"tight": {
"$value": "1.1",
"$type": "lineHeight"
},
"normal": {
"$value": "1.5",
"$type": "lineHeight"
},
"relaxed": {
"$value": "1.75",
"$type": "lineHeight"
}
},
"letterSpacing": {
"tight": {
"$value": "-0.02em",
"$type": "letterSpacing"
},
"normal": {
"$value": "0",
"$type": "letterSpacing"
},
"wide": {
"$value": "0.05em",
"$type": "letterSpacing"
}
},
"textStroke": {
"bold": {
"$value": "0.6px",
"$type": "borderWidth"
},
"heavy": {
"$value": "0.7px",
"$type": "borderWidth"
}
}
},
"spacing": {
"0": {
"$value": "0rem",
"$type": "spacing"
},
"1": {
"$value": "0.25rem",
"$type": "spacing"
},
"2": {
"$value": "0.5rem",
"$type": "spacing"
},
"3": {
"$value": "0.75rem",
"$type": "spacing"
},
"4": {
"$value": "1rem",
"$type": "spacing"
},
"5": {
"$value": "1.25rem",
"$type": "spacing"
},
"6": {
"$value": "1.5rem",
"$type": "spacing"
},
"8": {
"$value": "2rem",
"$type": "spacing"
},
"10": {
"$value": "2.5rem",
"$type": "spacing"
},
"12": {
"$value": "3rem",
"$type": "spacing"
},
"16": {
"$value": "4rem",
"$type": "spacing"
}
},
"sizing": {
"container": {
"$value": "60.75rem",
"$type": "sizing"
},
"card": {
"$value": "66.5rem",
"$type": "sizing"
},
"pill": {
"$value": "2.25rem",
"$type": "sizing"
}
},
"borderRadius": {
"sm": {
"$value": "0.75rem",
"$type": "borderRadius"
},
"md": {
"$value": "1.3125rem",
"$type": "borderRadius"
},
"lg": {
"$value": "1.75rem",
"$type": "borderRadius"
}
},
"borderWidth": {
"base": {
"$value": "2px",
"$type": "borderWidth"
},
"strong": {
"$value": "4px",
"$type": "borderWidth"
}
},
"shadows": {
"card": {
"$value": {
"x": "8px",
"y": "8px",
"blur": "0px",
"spread": "0px",
"color": "rgba(47,49,54,0.1)",
"type": "dropShadow"
},
"$type": "boxShadow"
}
},
"effects": {
"strokeHeading": {
"$value": "0.6px",
"$type": "borderWidth"
}
},
"semantic": {
"background": {
"page": {
"$value": "{colors.neutrals.50}",
"$type": "color"
},
"surface": {
"$value": "{colors.neutrals.0}",
"$type": "color"
},
"code": {
"$value": "{colors.secondary.800}",
"$type": "color"
}
},
"text": {
"primary": {
"$value": "{colors.secondary.800}",
"$type": "color"
},
"inverse": {
"$value": "{colors.neutrals.0}",
"$type": "color"
},
"muted": {
"$value": "rgba(255,255,255,0.9)",
"$type": "color"
}
},
"status": {
"success": {
"$value": "{colors.functional.green.500}",
"$type": "color"
},
"warning": {
"$value": "{colors.functional.yellow.500}",
"$type": "color"
},
"danger": {
"$value": "{colors.functional.coral.500}",
"$type": "color"
},
"info": {
"$value": "{colors.functional.purple.500}",
"$type": "color"
}
}
}
}