Skip to content

Instantly share code, notes, and snippets.

@urcades
Created April 12, 2022 16:50
Show Gist options
  • Save urcades/e2680fab778ef1bd78ddca810ebfa226 to your computer and use it in GitHub Desktop.
Save urcades/e2680fab778ef1bd78ddca810ebfa226 to your computer and use it in GitHub Desktop.
{
"global": {
"Monochrome": {
"Black 100": {
"value": "#000000",
"type": "color"
},
"Black 90": {
"value": "#1a1a1a",
"type": "color"
},
"Black 80 (Primary Text)": {
"value": "#333333",
"type": "color"
},
"Black 70": {
"value": "#4c4c4c",
"type": "color"
},
"Black 60 (Secondary Text)": {
"value": "#666666",
"type": "color"
},
"Black 50": {
"value": "#808080",
"type": "color"
},
"Black 40 (Tertiary Text)": {
"value": "#999999",
"type": "color"
},
"Black 30": {
"value": "#b3b3b3",
"type": "color"
},
"Black 20": {
"value": "#cccccc",
"type": "color"
},
"Black 10": {
"value": "#e5e5e5",
"type": "color"
},
"Black 04 (Secondary Background)": {
"value": "#f5f5f5",
"type": "color"
},
"White (Primary Background)": {
"value": "#ffffff",
"type": "color"
}
},
"Utility": {
"Red": {
"value": "#ff6240",
"type": "color"
},
"Orange": {
"value": "#ff9040",
"type": "color"
},
"Yellow": {
"value": "#fade7a",
"type": "color"
},
"Green": {
"value": "#2ad546",
"type": "color"
},
"Blue": {
"value": "#008eff",
"type": "color"
},
"Indigo": {
"value": "#615fd3",
"type": "color"
},
"Soft Red": {
"value": "#ffefec",
"type": "color"
},
"Soft Orange": {
"value": "#fff4ec",
"type": "color"
},
"Soft Yellow": {
"value": "#faf5d9",
"type": "color"
},
"Soft Green": {
"value": "#eafbec",
"type": "color"
},
"Soft Blue": {
"value": "#e5f4ff",
"type": "color"
},
"Soft Indigo": {
"value": "#efeffb",
"type": "color"
}
},
"Dropdown Shadow": {
"value": {
"color": "#00000033",
"type": "dropShadow",
"x": 0,
"y": 4,
"blur": 16,
"spread": 0
},
"type": "boxShadow"
},
"Sidebar Border (Right)": {
"value": {
"color": "#0000000a",
"type": "dropShadow",
"x": 2,
"y": 0,
"blur": 0,
"spread": 0
},
"type": "boxShadow"
},
"fontFamilies": {
"inter": {
"value": "Inter",
"type": "fontFamilies"
},
"source-code-pro": {
"value": "Source Code Pro",
"type": "fontFamilies"
}
},
"lineHeights": {
"0": {
"value": "48",
"type": "lineHeights"
},
"1": {
"value": "32",
"type": "lineHeights"
},
"2": {
"value": "24",
"type": "lineHeights"
},
"3": {
"value": "20",
"type": "lineHeights"
},
"4": {
"value": "16",
"type": "lineHeights"
}
},
"fontWeights": {
"inter-0": {
"value": "Extra Bold",
"type": "fontWeights"
},
"inter-1": {
"value": "Bold",
"type": "fontWeights"
},
"inter-2": {
"value": "Regular",
"type": "fontWeights"
},
"inter-3": {
"value": "Semi Bold",
"type": "fontWeights"
},
"source-code-pro-4": {
"value": "Bold",
"type": "fontWeights"
},
"source-code-pro-5": {
"value": "Semibold",
"type": "fontWeights"
},
"source-code-pro-6": {
"value": "Medium",
"type": "fontWeights"
}
},
"fontSize": {
"0": {
"value": "10",
"type": "fontSizes"
},
"1": {
"value": "12",
"type": "fontSizes"
},
"2": {
"value": "14",
"type": "fontSizes"
},
"3": {
"value": "16",
"type": "fontSizes"
},
"4": {
"value": "20",
"type": "fontSizes"
},
"5": {
"value": "24",
"type": "fontSizes"
},
"6": {
"value": "32",
"type": "fontSizes"
}
},
"letterSpacing": {
"0": {
"value": "-2%",
"type": "letterSpacing"
},
"1": {
"value": "-1.1%",
"type": "letterSpacing"
},
"2": {
"value": "0%",
"type": "letterSpacing"
},
"3": {
"value": "0",
"type": "letterSpacing"
},
"4": {
"value": "-0.08",
"type": "letterSpacing"
}
},
"paragraphSpacing": {
"0": {
"value": "0",
"type": "paragraphSpacing"
}
},
"Writing Sans": {
"Header 1": {
"value": {
"fontFamily": "$fontFamilies.inter",
"fontWeight": "$fontWeights.inter-0",
"lineHeight": "$lineHeights.0",
"fontSize": "$fontSize.6",
"letterSpacing": "$letterSpacing.0",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
},
"Header 2": {
"value": {
"fontFamily": "$fontFamilies.inter",
"fontWeight": "$fontWeights.inter-1",
"lineHeight": "$lineHeights.1",
"fontSize": "$fontSize.5",
"letterSpacing": "$letterSpacing.1",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
},
"Header 3": {
"value": {
"fontFamily": "$fontFamilies.inter",
"fontWeight": "$fontWeights.inter-1",
"lineHeight": "$lineHeights.1",
"fontSize": "$fontSize.4",
"letterSpacing": "$letterSpacing.2",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
},
"Header 4": {
"value": {
"fontFamily": "$fontFamilies.inter",
"fontWeight": "$fontWeights.inter-1",
"lineHeight": "$lineHeights.2",
"fontSize": "$fontSize.3",
"letterSpacing": "$letterSpacing.1",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
},
"Paragraph A": {
"value": {
"fontFamily": "$fontFamilies.inter",
"fontWeight": "$fontWeights.inter-2",
"lineHeight": "$lineHeights.2",
"fontSize": "$fontSize.2",
"letterSpacing": "$letterSpacing.3",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
},
"Paragraph B": {
"value": {
"fontFamily": "$fontFamilies.inter",
"fontWeight": "$fontWeights.inter-2",
"lineHeight": "$lineHeights.3",
"fontSize": "$fontSize.2",
"letterSpacing": "$letterSpacing.4",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
}
},
"Product Sans": {
"Buttons": {
"value": {
"fontFamily": "$fontFamilies.inter",
"fontWeight": "$fontWeights.inter-3",
"lineHeight": "$lineHeights.4",
"fontSize": "$fontSize.2",
"letterSpacing": "$letterSpacing.2",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
},
"One-liners": {
"value": {
"fontFamily": "$fontFamilies.inter",
"fontWeight": "$fontWeights.inter-2",
"lineHeight": "$lineHeights.4",
"fontSize": "$fontSize.2",
"letterSpacing": "$letterSpacing.3",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
},
"Small Label": {
"value": {
"fontFamily": "$fontFamilies.inter",
"fontWeight": "$fontWeights.inter-2",
"lineHeight": "$lineHeights.4",
"fontSize": "$fontSize.1",
"letterSpacing": "$letterSpacing.3",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
},
"Small Label (Bold)": {
"value": {
"fontFamily": "$fontFamilies.inter",
"fontWeight": "$fontWeights.inter-3",
"lineHeight": "$lineHeights.4",
"fontSize": "$fontSize.1",
"letterSpacing": "$letterSpacing.3",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
},
"Tiny Label": {
"value": {
"fontFamily": "$fontFamilies.inter",
"fontWeight": "$fontWeights.inter-3",
"lineHeight": "$lineHeights.4",
"fontSize": "$fontSize.0",
"letterSpacing": "$letterSpacing.3",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
}
},
"Code Mono": {
"Header 1": {
"value": {
"fontFamily": "$fontFamilies.source-code-pro",
"fontWeight": "$fontWeights.source-code-pro-4",
"lineHeight": "$lineHeights.0",
"fontSize": "$fontSize.6",
"letterSpacing": "$letterSpacing.0",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
},
"Header 2": {
"value": {
"fontFamily": "$fontFamilies.source-code-pro",
"fontWeight": "$fontWeights.source-code-pro-5",
"lineHeight": "$lineHeights.1",
"fontSize": "$fontSize.5",
"letterSpacing": "$letterSpacing.1",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
},
"Header 3": {
"value": {
"fontFamily": "$fontFamilies.source-code-pro",
"fontWeight": "$fontWeights.source-code-pro-5",
"lineHeight": "$lineHeights.1",
"fontSize": "$fontSize.4",
"letterSpacing": "$letterSpacing.2",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
},
"Header 4": {
"value": {
"fontFamily": "$fontFamilies.source-code-pro",
"fontWeight": "$fontWeights.source-code-pro-5",
"lineHeight": "$lineHeights.2",
"fontSize": "$fontSize.3",
"letterSpacing": "$letterSpacing.1",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
},
"Paragraph": {
"value": {
"fontFamily": "$fontFamilies.source-code-pro",
"fontWeight": "$fontWeights.source-code-pro-6",
"lineHeight": "$lineHeights.2",
"fontSize": "$fontSize.2",
"letterSpacing": "$letterSpacing.3",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
}
},
"Product Mono": {
"Buttons": {
"value": {
"fontFamily": "$fontFamilies.source-code-pro",
"fontWeight": "$fontWeights.source-code-pro-5",
"lineHeight": "$lineHeights.4",
"fontSize": "$fontSize.2",
"letterSpacing": "$letterSpacing.2",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
},
"One-liners": {
"value": {
"fontFamily": "$fontFamilies.source-code-pro",
"fontWeight": "$fontWeights.source-code-pro-6",
"lineHeight": "$lineHeights.4",
"fontSize": "$fontSize.2",
"letterSpacing": "$letterSpacing.3",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
},
"Small Label": {
"value": {
"fontFamily": "$fontFamilies.source-code-pro",
"fontWeight": "$fontWeights.source-code-pro-6",
"lineHeight": "$lineHeights.4",
"fontSize": "$fontSize.1",
"letterSpacing": "$letterSpacing.3",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
},
"Small Label (Bold)": {
"value": {
"fontFamily": "$fontFamilies.source-code-pro",
"fontWeight": "$fontWeights.source-code-pro-5",
"lineHeight": "$lineHeights.4",
"fontSize": "$fontSize.1",
"letterSpacing": "$letterSpacing.3",
"paragraphSpacing": "$paragraphSpacing.0",
"textCase": "$textCase.none",
"textDecoration": "$textDecoration.none"
},
"type": "typography"
}
},
"textCase": {
"none": {
"value": "none",
"type": "textCase"
}
},
"textDecoration": {
"none": {
"value": "none",
"type": "textDecoration"
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment