@cloudfour/patterns
Version:
Front-end patterns for cloudfour.com
309 lines (308 loc) • 7.07 kB
JSON
{
"color": {
"base": {
"blue_lighter": "#8abfff",
"blue_light": "#3d84f5",
"blue": "#215cca",
"blue_dark": "#183889",
"blue_darker": "#0e1c43",
"green_lighter": "#71f4ae",
"green_light": "#2cdd90",
"green": "#158466",
"green_dark": "#105c52",
"green_darker": "#0c3538",
"purple_lighter": "#e98efa",
"purple_light": "#d250f7",
"purple": "#950cde",
"purple_dark": "#560a9b",
"purple_darker": "#2a085e",
"fuchsia_lighter": "#ff80ca",
"fuchsia_light": "#f240ae",
"fuchsia": "#d9118f",
"fuchsia_dark": "#950f7d",
"fuchsia_darker": "#5c0a5c",
"orange_lighter": "#ffad5c",
"orange_light": "#fa8f47",
"orange": "#f27041",
"orange_dark": "#aa3f24",
"orange_darker": "#622018",
"gray_lighter": "#f2f5f7",
"gray_light": "#c0cfd8",
"gray": "#738da0",
"gray_dark": "#485968",
"gray_darker": "#252b32",
"black": "#000000",
"black_transparent_60": "rgba(0, 0, 0, 0.6)",
"black_transparent_85": "rgba(0, 0, 0, 0.85)",
"white": "#ffffff",
"white_transparent_85": "rgba(255, 255, 255, 0.85)"
},
"brand": {
"primary_lighter": "#8abfff",
"primary_light": "#3d84f5",
"primary": "#215cca",
"primary_dark": "#183889",
"primary_darker": "#0e1c43"
},
"status": {
"error_dark": "#bc1919",
"error_light": "#ffcaca"
},
"text": {
"dark": "rgba(0, 0, 0, 0.85)",
"dark_muted": "rgba(0, 0, 0, 0.6)",
"light": "rgba(255, 255, 255, 0.85)",
"light_emphasis": "#ffffff",
"action": "#215cca",
"code": "rgba(202, 2, 129, 0.94)"
}
},
"ease": {
"in_out": "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
"in": "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
"out": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
"in_out_sine": "cubic-bezier(0.37, 0, 0.63, 1)",
"out_sine": "cubic-bezier(0.61, 1, 0.88, 1)"
},
"font": {
"family": {
"sans": "'Source Sans Pro Variable', Tahoma, 'Helvetica Neue', Helvetica, Arial, sans-serif",
"sans_fallback": "'Source Sans Pro', Tahoma, 'Helvetica Neue', Helvetica, Arial, sans-serif",
"mono": "'Source Code Pro', Monaco, Consolas, 'Lucida Console', 'Andale Mono', monospace"
}
},
"number": {
"aspect_ratio": {
"square": 1,
"full": 1.3333333333333333,
"wide": 1.7777777777777777,
"cinema": 2
},
"brightness": {
"control": {
"brighten": "110%",
"dim": "80%"
},
"image": {
"brighten": "102.5%"
}
},
"font_weight": {
"light": "300",
"normal": "400",
"medium": "500",
"semibold": "600",
"bold": "700",
"heavy": "800"
},
"line_height": {
"loose": 1.5625,
"tight": 1.25,
"tighter": 1
},
"opacity": {
"muted": "0.65"
},
"scale": {
"effect": {
"grow": "1.05",
"shrink": "0.95"
},
"modular": {
"ratio": "1.25",
"minimum_step": "-6",
"maximum_step": "10"
}
},
"z_index": {
"alert": 999
}
},
"size": {
"border": {
"radius": {
"small": "0.125em",
"medium": "0.25em",
"large": "0.5em",
"card-contained": "0.5em",
"full": "9999px"
},
"width": {
"blockquote": "0.125rem"
}
},
"breakpoint": {
"xs": "20em",
"s": "30em",
"m": "40em",
"l": "60em",
"xl": "72em",
"xxl": "84em",
"xxxl": "96em"
},
"edge": {
"small": "0.0625rem",
"medium": "0.125rem",
"large": "0.25rem",
"control": "0.125rem"
},
"font": {
"big": "1.25em",
"small": "0.8em",
"heading_n2": {
"max": "3.814697265625em",
"min": "3.0517578125em"
},
"heading_n1": {
"max": "3.0517578125em",
"min": "2.44140625em"
},
"heading_0": {
"max": "2.44140625em",
"min": "1.953125em"
},
"heading_1": {
"max": "1.953125em",
"min": "1.5625em"
},
"heading_2": {
"max": "1.5625em",
"min": "1.25em"
},
"heading_3": {
"max": "1.25em",
"min": "1em"
}
},
"max_width": {
"media_object": "7em",
"prose": "40em",
"spread": "72em"
},
"padding": {
"control": {
"horizontal": "1.25em",
"vertical": "0.40959999999999996em"
},
"cell": {
"horizontal": "0.512em",
"vertical": "0.512em"
},
"container": {
"horizontal": {
"min": "1.25rem",
"max": "3.0517578125rem"
},
"vertical": {
"min": "1.953125rem",
"max": "3.814697265625rem"
}
}
},
"rhythm": {
"compact": "0.262144em",
"condensed": "0.8em",
"default": "1.25em",
"default_rem": "1.25rem",
"generous": "1.953125em"
},
"xs": "20em",
"s": "30em",
"m": "40em",
"l": "60em",
"xl": "72em",
"xxl": "84em",
"xxxl": "96em",
"height": {
"control": {
"default": "2.44140625em",
"multiline": "3.814697265625em"
},
"logo": {
"default": "1.953125em"
}
},
"icon": {
"default": "1em",
"medium": "1.25em",
"large": "1.5625em",
"x-large": "3.0517578125em"
},
"width": {
"card_column": {
"min": "16em"
},
"logo_group": {
"item_width": "9em"
}
},
"square": {
"avatar": {
"small": "1.953125em",
"medium": "3.0517578125em",
"large": "11.641532182693481em",
"full": "100%"
},
"control": {
"icon": "1em"
},
"toggle": {
"medium": "1.5625em"
},
"footnote_link": "1.5625em"
},
"overlap": {
"small": "0.262144em",
"large": "1.25em"
},
"spacing": {
"gap": {
"button": {
"extra": "0.40959999999999996em"
},
"inline": {
"small": "1em",
"medium": "1.25em"
},
"fluid": {
"min": "1.953125em",
"max": "3.814697265625em"
},
"button_group": {
"default": "0.64em"
},
"form_group": {
"default": "0.32767999999999997em"
},
"logo_group": "1.953125em",
"comment_form": {
"horizontal": "2.44140625rem",
"vertical": "1.5625rem"
}
},
"control": {
"text_inset": "0.8em",
"icon_inset": "0.512em"
},
"type": {
"block_indent": "1.25em"
},
"list": {
"inline_gap": "1.25em"
},
"media": {
"gap": "1em"
}
}
},
"time": {
"transition": {
"instant": "0s",
"immediate": "0.1s",
"quick": "0.2s",
"prompt": "0.3s",
"slow": "0.4s",
"glacial": "0.6s"
}
}
}