Preview
{
"$description": "UI Lingo · Frutiger Aero (frutiger-aero). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Hind:wght@500;600;700&family=Open+Sans:wght@400;600&family=Noto+Sans+Thai+Looped:wght@400;500;600;700&display=swap",
"color": {
"light": {
"bg": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.8627,
0.9451,
1
],
"hex": "#dcf1ff"
}
},
"surface": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
1,
1,
1
],
"hex": "#ffffff",
"alpha": 0.82
}
},
"surface-2": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
1,
1,
1
],
"hex": "#ffffff",
"alpha": 0.55
}
},
"text": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0431,
0.1647,
0.2706
],
"hex": "#0b2a45"
}
},
"text-muted": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.2275,
0.3529,
0.4588
],
"hex": "#3a5a75"
}
},
"primary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0431,
0.4353,
0.7608
],
"hex": "#0b6fc2"
}
},
"on-primary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
1,
1,
1
],
"hex": "#ffffff"
}
},
"secondary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.298,
0.7216,
0.1804
],
"hex": "#4cb82e"
}
},
"on-secondary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0235,
0.1647,
0.0549
],
"hex": "#062a0e"
}
},
"accent": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0,
0.6627,
0.8392
],
"hex": "#00a9d6"
}
},
"border": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.6588,
0.8235,
0.9333
],
"hex": "#a8d2ee"
}
},
"success": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.1804,
0.6039,
0.2275
],
"hex": "#2e9a3a"
}
},
"warning": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.7804,
0.4784,
0
],
"hex": "#c77a00"
}
},
"danger": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.8196,
0.2314,
0.2314
],
"hex": "#d13b3b"
}
},
"chart-1": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0431,
0.4353,
0.7608
],
"hex": "#0b6fc2"
}
},
"chart-2": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.298,
0.7216,
0.1804
],
"hex": "#4cb82e"
}
},
"chart-3": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0,
0.6627,
0.8392
],
"hex": "#00a9d6"
}
},
"chart-4": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.9608,
0.651,
0.1373
],
"hex": "#f5a623"
}
},
"chart-5": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.4824,
0.3804,
0.851
],
"hex": "#7b61d9"
}
}
},
"dark": {
"bg": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0235,
0.0941,
0.1686
],
"hex": "#06182b"
}
},
"surface": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
1,
1,
1
],
"hex": "#ffffff",
"alpha": 0.09
}
},
"surface-2": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
1,
1,
1
],
"hex": "#ffffff",
"alpha": 0.05
}
},
"text": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.9176,
0.9647,
1
],
"hex": "#eaf6ff"
}
},
"text-muted": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.6549,
0.7725,
0.8627
],
"hex": "#a7c5dc"
}
},
"primary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.2235,
0.6588,
1
],
"hex": "#39a8ff"
}
},
"on-primary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0157,
0.0941,
0.1686
],
"hex": "#04182b"
}
},
"secondary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.4314,
0.8588,
0.2902
],
"hex": "#6edb4a"
}
},
"on-secondary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0235,
0.1647,
0.0549
],
"hex": "#062a0e"
}
},
"accent": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.2471,
0.8471,
1
],
"hex": "#3fd8ff"
}
},
"border": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.5882,
0.8431,
1
],
"hex": "#96d7ff",
"alpha": 0.28
}
},
"success": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.4314,
0.8588,
0.2902
],
"hex": "#6edb4a"
}
},
"warning": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
1,
0.7569,
0.2706
],
"hex": "#ffc145"
}
},
"danger": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
1,
0.4196,
0.4196
],
"hex": "#ff6b6b"
}
},
"chart-1": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.2235,
0.6588,
1
],
"hex": "#39a8ff"
}
},
"chart-2": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.4314,
0.8588,
0.2902
],
"hex": "#6edb4a"
}
},
"chart-3": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.2471,
0.8471,
1
],
"hex": "#3fd8ff"
}
},
"chart-4": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
1,
0.7569,
0.2706
],
"hex": "#ffc145"
}
},
"chart-5": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.6588,
0.5804,
1
],
"hex": "#a894ff"
}
}
}
},
"radius": {
"sm": {
"$type": "dimension",
"$value": {
"value": 6,
"unit": "px"
}
},
"md": {
"$type": "dimension",
"$value": {
"value": 10,
"unit": "px"
}
},
"lg": {
"$type": "dimension",
"$value": {
"value": 16,
"unit": "px"
}
},
"xl": {
"$type": "dimension",
"$value": {
"value": 24,
"unit": "px"
}
},
"pill": {
"$type": "dimension",
"$value": {
"value": 999,
"unit": "px"
}
}
},
"border-width": {
"$type": "dimension",
"$value": {
"value": 1,
"unit": "px"
}
},
"shadow": {
"sm": {
"$type": "shadow",
"$value": [
{
"color": {
"colorSpace": "srgb",
"components": [
0.0392,
0.2353,
0.4314
],
"hex": "#0a3c6e",
"alpha": 0.16
},
"offsetX": {
"value": 0,
"unit": "px"
},
"offsetY": {
"value": 1,
"unit": "px"
},
"blur": {
"value": 2,
"unit": "px"
},
"spread": {
"value": 0,
"unit": "px"
},
"inset": false
}
]
},
"md": {
"$type": "shadow",
"$value": [
{
"color": {
"colorSpace": "srgb",
"components": [
0.0392,
0.2745,
0.5098
],
"hex": "#0a4682",
"alpha": 0.1
},
"offsetX": {
"value": 0,
"unit": "px"
},
"offsetY": {
"value": 2,
"unit": "px"
},
"blur": {
"value": 4,
"unit": "px"
},
"spread": {
"value": 0,
"unit": "px"
},
"inset": false
},
{
"color": {
"colorSpace": "srgb",
"components": [
0.0392,
0.2745,
0.5098
],
"hex": "#0a4682",
"alpha": 0.16
},
"offsetX": {
"value": 0,
"unit": "px"
},
"offsetY": {
"value": 10,
"unit": "px"
},
"blur": {
"value": 24,
"unit": "px"
},
"spread": {
"value": 0,
"unit": "px"
},
"inset": false
}
]
},
"lg": {
"$type": "shadow",
"$value": [
{
"color": {
"colorSpace": "srgb",
"components": [
0.0392,
0.2745,
0.5098
],
"hex": "#0a4682",
"alpha": 0.12
},
"offsetX": {
"value": 0,
"unit": "px"
},
"offsetY": {
"value": 4,
"unit": "px"
},
"blur": {
"value": 10,
"unit": "px"
},
"spread": {
"value": 0,
"unit": "px"
},
"inset": false
},
{
"color": {
"colorSpace": "srgb",
"components": [
0.0392,
0.2745,
0.5098
],
"hex": "#0a4682",
"alpha": 0.24
},
"offsetX": {
"value": 0,
"unit": "px"
},
"offsetY": {
"value": 24,
"unit": "px"
},
"blur": {
"value": 56,
"unit": "px"
},
"spread": {
"value": 0,
"unit": "px"
},
"inset": false
}
]
}
},
"font": {
"heading": {
"$type": "fontFamily",
"$value": [
"Hind",
"Noto Sans Thai Looped",
"system-ui",
"sans-serif"
]
},
"body": {
"$type": "fontFamily",
"$value": [
"Open Sans",
"Noto Sans Thai Looped",
"system-ui",
"sans-serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Noto Sans Thai Looped",
"monospace"
]
}
},
"font-weight": {
"heading": {
"$type": "fontWeight",
"$value": 600
},
"body": {
"$type": "fontWeight",
"$value": 400
}
},
"duration": {
"$type": "duration",
"$value": {
"value": 260,
"unit": "ms"
}
},
"easing": {
"$type": "cubicBezier",
"$value": [
0.2,
0.9,
0.3,
1
]
},
"density": {
"$type": "number",
"$value": 1.05
}
}