@lucasmiqueias/blip-tokens
Version:
Design token system inspired by BLiP's design language
220 lines • 5.15 kB
JSON
{
"color": {
"brand": "#0096FA",
"light": {
"primary": "#1E6BF1",
"secondary": "#292929",
"surface": {
"0": "#FFFFFF",
"1": "#F6F6F6",
"2": "#EDEDED",
"3": "#E3E3E3",
"4": "#141414"
},
"content": {
"default": "#282828",
"disable": "#595959",
"ghost": "#8C8C8C",
"bright": "#FFFFFF",
"din": "#000000"
},
"border": {
"1": "rgba(0, 0, 0, 0.2)",
"2": "rgba(0, 0, 0, 0.16)",
"3": "rgba(0, 0, 0, 0.06)"
},
"semantic": {
"positive": "#007A42",
"negative": "#A80B0B",
"info": "#80E3EB",
"system": "#B2DFFD",
"focus": "#C226FB",
"success": "#84EBBC",
"warning": "#FDE99B",
"error": "#FABEBE",
"delete": "#E60F0F"
},
"extended": {
"blue": "#1968F0",
"blue-bright": "#B2DFFD",
"ocean": "#00D3E4",
"ocean-bright": "#80E3EB",
"green": "#35DE90",
"green-bright": "#84EBBC",
"yellow": "#FBCF23",
"yellow-bright": "#FDE99B",
"orange": "#F06305",
"orange-bright": "#FCAA73",
"red": "#E60F0F",
"red-bright": "#F99F9F",
"pink": "#FB4BC1",
"pink-bright": "#FD9BDC",
"gray": "#666666",
"gray-bright": "#C7C7C7"
},
"actions": {
"hover": "rgba(0, 0, 0, 0.08)",
"pressed": "rgba(0, 0, 0, 0.16)"
}
},
"dark": {
"primary": "#498BFF",
"secondary": "#FFFFFF",
"surface": {
"0": "#424242",
"1": "#393939",
"2": "#1F1F1F",
"3": "#141414",
"4": "#0A0A0A"
},
"content": {
"default": "#FFFFFF",
"disable": "#949494",
"ghost": "#666666",
"bright": "#FFFFFF",
"din": "#000000"
},
"border": {
"1": "rgba(255, 255, 255, 0.2)",
"2": "rgba(255, 255, 255, 0.16)",
"3": "rgba(255, 255, 255, 0.06)"
},
"semantic": {
"positive": "#6BFFBC",
"negative": "#FFB8B8",
"info": "#004F56",
"system": "#003C64",
"focus": "#C226FB",
"success": "#355E4B",
"warning": "#60593B",
"error": "#7B3D3D",
"delete": "#B60C0C"
},
"extended": {
"blue": "#1968F0",
"blue-bright": "#B2DFFD",
"ocean": "#00D3E4",
"ocean-bright": "#80E3EB",
"green": "#35DE90",
"green-bright": "#84EBBC",
"yellow": "#FBCF23",
"yellow-bright": "#FDE99B",
"orange": "#F06305",
"orange-bright": "#FCAA73",
"red": "#E60F0F",
"red-bright": "#F99F9F",
"pink": "#FB4BC1",
"pink-bright": "#FD9BDC",
"gray": "#666666",
"gray-bright": "#C7C7C7"
},
"actions": {
"hover": "rgba(255, 255, 255, 0.16)",
"pressed": "rgba(255, 255, 255, 0.08)"
}
}
},
"spacing": {
"0": "0px",
"1": "8px",
"2": "16px",
"3": "24px",
"4": "32px",
"5": "40px",
"6": "48px",
"7": "56px",
"8": "64px",
"9": "72px",
"10": "80px",
"11": "88px",
"12": "96px",
"0-5": "4px"
},
"radius": {
"none": "0px",
"sm": "2px",
"base": "4px",
"md": "6px",
"lg": "8px",
"xl": "12px",
"2xl": "16px",
"3xl": "24px",
"full": "9999px"
},
"typography": {
"fontSizes": {
"xs": "12px",
"sm": "14px",
"base": "16px",
"lg": "18px",
"xl": "20px",
"2xl": "24px",
"3xl": "30px",
"4xl": "36px",
"5xl": "48px",
"6xl": "60px",
"7xl": "72px",
"8xl": "96px",
"9xl": "128px"
},
"fontFamilies": {
"sans": [
"Nunito Sans",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
"sans-serif"
],
"serif": [
"Georgia",
"Cambria",
"Times New Roman",
"Times",
"serif"
],
"mono": [
"Menlo",
"Monaco",
"Consolas",
"Liberation Mono",
"Courier New",
"monospace"
]
},
"fontWeights": {
"thin": 100,
"extralight": 200,
"light": 300,
"normal": 400,
"medium": 500,
"semibold": 600,
"bold": 700,
"extrabold": 800,
"black": 900
},
"lineHeights": {
"none": 1,
"tight": 1.25,
"snug": 1.375,
"normal": 1.5,
"relaxed": 1.625,
"loose": 2
}
},
"shadow": {
"sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
"md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
"lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
"xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
"inner": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
"none": "none"
}
}