Preview
{
"$description": "UI Lingo · Hero-Centric Design (hero-centric-design). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=DM+Sans:wght@400;500;700&family=Kanit:wght@600;800&family=Noto+Sans+Thai:wght@400;500;700&display=swap",
"color": {
"light": {
"bg": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.9804,
0.9686,
0.949
],
"hex": "#faf7f2"
}
},
"surface": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
1,
1,
1
],
"hex": "#ffffff"
}
},
"surface-2": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.949,
0.9255,
0.8863
],
"hex": "#f2ece2"
}
},
"text": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0863,
0.1294,
0.1686
],
"hex": "#16212b"
}
},
"text-muted": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.349,
0.3882,
0.4314
],
"hex": "#59636e"
}
},
"primary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.7608,
0.2549,
0.0471
],
"hex": "#c2410c"
}
},
"on-primary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
1,
1,
1
],
"hex": "#ffffff"
}
},
"secondary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0588,
0.2392,
0.2431
],
"hex": "#0f3d3e"
}
},
"on-secondary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
1,
1,
1
],
"hex": "#ffffff"
}
},
"accent": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.949,
0.6471,
0.2549
],
"hex": "#f2a541"
}
},
"border": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.8941,
0.8588,
0.8
],
"hex": "#e4dbcc"
}
},
"success": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.1843,
0.4902,
0.3098
],
"hex": "#2f7d4f"
}
},
"warning": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.6588,
0.4157,
0.0706
],
"hex": "#a86a12"
}
},
"danger": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.702,
0.149,
0.1176
],
"hex": "#b3261e"
}
},
"chart-1": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.7608,
0.2549,
0.0471
],
"hex": "#c2410c"
}
},
"chart-2": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0588,
0.2392,
0.2431
],
"hex": "#0f3d3e"
}
},
"chart-3": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.949,
0.6471,
0.2549
],
"hex": "#f2a541"
}
},
"chart-4": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.3569,
0.5529,
0.7216
],
"hex": "#5b8db8"
}
},
"chart-5": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.5412,
0.4314,
0.3412
],
"hex": "#8a6e57"
}
}
},
"dark": {
"bg": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.051,
0.0784,
0.0941
],
"hex": "#0d1418"
}
},
"surface": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0824,
0.1255,
0.1529
],
"hex": "#152027"
}
},
"surface-2": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.1098,
0.1647,
0.2
],
"hex": "#1c2a33"
}
},
"text": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.9608,
0.9373,
0.902
],
"hex": "#f5efe6"
}
},
"text-muted": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.6627,
0.7059,
0.7373
],
"hex": "#a9b4bc"
}
},
"primary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.949,
0.4784,
0.2706
],
"hex": "#f27a45"
}
},
"on-primary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.102,
0.0392,
0.0118
],
"hex": "#1a0a03"
}
},
"secondary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.3725,
0.702,
0.6902
],
"hex": "#5fb3b0"
}
},
"on-secondary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.0235,
0.1255,
0.1216
],
"hex": "#06201f"
}
},
"accent": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.949,
0.6471,
0.2549
],
"hex": "#f2a541"
}
},
"border": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.1647,
0.2275,
0.2667
],
"hex": "#2a3a44"
}
},
"success": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.3608,
0.7686,
0.5373
],
"hex": "#5cc489"
}
},
"warning": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.9137,
0.6902,
0.2902
],
"hex": "#e9b04a"
}
},
"danger": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.949,
0.4196,
0.3686
],
"hex": "#f26b5e"
}
},
"chart-1": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.949,
0.4784,
0.2706
],
"hex": "#f27a45"
}
},
"chart-2": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.3725,
0.702,
0.6902
],
"hex": "#5fb3b0"
}
},
"chart-3": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.949,
0.6471,
0.2549
],
"hex": "#f2a541"
}
},
"chart-4": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.5529,
0.7137,
0.8784
],
"hex": "#8db6e0"
}
},
"chart-5": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.7804,
0.6588,
0.549
],
"hex": "#c7a88c"
}
}
}
},
"radius": {
"sm": {
"$type": "dimension",
"$value": {
"value": 8,
"unit": "px"
}
},
"md": {
"$type": "dimension",
"$value": {
"value": 14,
"unit": "px"
}
},
"lg": {
"$type": "dimension",
"$value": {
"value": 22,
"unit": "px"
}
},
"xl": {
"$type": "dimension",
"$value": {
"value": 32,
"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.0863,
0.1294,
0.1686
],
"hex": "#16212b",
"alpha": 0.06
},
"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.0863,
0.1294,
0.1686
],
"hex": "#16212b",
"alpha": 0.1
},
"offsetX": {
"value": 0,
"unit": "px"
},
"offsetY": {
"value": 14,
"unit": "px"
},
"blur": {
"value": 34,
"unit": "px"
},
"spread": {
"value": 0,
"unit": "px"
},
"inset": false
}
]
},
"lg": {
"$type": "shadow",
"$value": [
{
"color": {
"colorSpace": "srgb",
"components": [
0.0863,
0.1294,
0.1686
],
"hex": "#16212b",
"alpha": 0.2
},
"offsetX": {
"value": 0,
"unit": "px"
},
"offsetY": {
"value": 30,
"unit": "px"
},
"blur": {
"value": 80,
"unit": "px"
},
"spread": {
"value": 0,
"unit": "px"
},
"inset": false
}
]
}
},
"font": {
"heading": {
"$type": "fontFamily",
"$value": [
"Bricolage Grotesque",
"Kanit",
"system-ui",
"sans-serif"
]
},
"body": {
"$type": "fontFamily",
"$value": [
"DM Sans",
"Noto Sans Thai",
"system-ui",
"sans-serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Noto Sans Thai",
"monospace"
]
}
},
"font-weight": {
"heading": {
"$type": "fontWeight",
"$value": 800
},
"body": {
"$type": "fontWeight",
"$value": 400
}
},
"duration": {
"$type": "duration",
"$value": {
"value": 600,
"unit": "ms"
}
},
"easing": {
"$type": "cubicBezier",
"$value": [
0.16,
1,
0.3,
1
]
},
"density": {
"$type": "number",
"$value": 1.05
}
}