{
    "typography": {
        "body": {
            "sm_regular": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Regular",
                    "lineHeight": "20px",
                    "fontSize": "14px",
                    "letterSpacing": "0.07px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "sm_bold": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Bold",
                    "lineHeight": "20px",
                    "fontSize": "14px",
                    "letterSpacing": "0.07px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "sm_semibold": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "SemiBold",
                    "lineHeight": "20px",
                    "fontSize": "14px",
                    "letterSpacing": "0.07px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "md_regular": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Regular",
                    "lineHeight": "24px",
                    "fontSize": "16px",
                    "letterSpacing": "0.08px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "md_bold": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Bold",
                    "lineHeight": "24px",
                    "fontSize": "16px",
                    "letterSpacing": "0.08px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "md_semibold": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "SemiBold",
                    "lineHeight": "24px",
                    "fontSize": "16px",
                    "letterSpacing": "0.08px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            }
        },
        "callout": {
            "regular": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Regular",
                    "lineHeight": "24px",
                    "fontSize": "18px",
                    "letterSpacing": "0.09px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "bold": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Bold",
                    "lineHeight": "24px",
                    "fontSize": "18px",
                    "letterSpacing": "0.09px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "semibold": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "SemiBold",
                    "lineHeight": "24px",
                    "fontSize": "18px",
                    "letterSpacing": "0.09px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            }
        },
        "headline": {
            "regular": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Regular",
                    "lineHeight": "28px",
                    "fontSize": "20px",
                    "letterSpacing": "-0.26px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "bold": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Bold",
                    "lineHeight": "28px",
                    "fontSize": "20px",
                    "letterSpacing": "-0.26px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "semibold": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "SemiBold",
                    "lineHeight": "28px",
                    "fontSize": "20px",
                    "letterSpacing": "-0.26px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            }
        },
        "heading": {
            "title_1": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Bold",
                    "lineHeight": "56px",
                    "fontSize": "40px",
                    "letterSpacing": "-0.52px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "title_2": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Bold",
                    "lineHeight": "40px",
                    "fontSize": "32px",
                    "letterSpacing": "-0.416px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "title_3": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Bold",
                    "lineHeight": "32px",
                    "fontSize": "24px",
                    "letterSpacing": "-0.312px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            }
        },
        "caption": {
            "regular": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Regular",
                    "lineHeight": "18px",
                    "fontSize": "12px",
                    "letterSpacing": "0.18px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "bold": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Bold",
                    "lineHeight": "18px",
                    "fontSize": "12px",
                    "letterSpacing": "0.18px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            }
        },
        "interactive": {
            "md_link": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Regular",
                    "lineHeight": "24px",
                    "fontSize": "16px",
                    "letterSpacing": "0.08px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "underline"
                },
                "type": "typography"
            },
            "sm_link": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Regular",
                    "lineHeight": "20px",
                    "fontSize": "14px",
                    "letterSpacing": "0.07px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "underline"
                },
                "type": "typography"
            },
            "sm_regular": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Regular",
                    "lineHeight": "20px",
                    "fontSize": "14px",
                    "letterSpacing": "0.07px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "sm_bold": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Bold",
                    "lineHeight": "20px",
                    "fontSize": "14px",
                    "letterSpacing": "0.07px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "sm_semibold": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "SemiBold",
                    "lineHeight": "20px",
                    "fontSize": "14px",
                    "letterSpacing": "0.07px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "md_bold": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Bold",
                    "lineHeight": "24px",
                    "fontSize": "16px",
                    "letterSpacing": "0.08px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "md_semibold": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "SemiBold",
                    "lineHeight": "24px",
                    "fontSize": "16px",
                    "letterSpacing": "0.08px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            },
            "md_regular": {
                "value": {
                    "fontFamily": "Roboto",
                    "fontWeight": "Regular",
                    "lineHeight": "24px",
                    "fontSize": "16px",
                    "letterSpacing": "0.08px",
                    "paragraphSpacing": "12px",
                    "textCase": "none",
                    "textDecoration": "none"
                },
                "type": "typography"
            }
        }
    },
    "backgroundColor": {
        "layout": {
            "container-L0": {
                "value": "#f5f8ff",
                "type": "color",
                "description": "apply shadow"
            },
            "container-L1": {
                "value": "#ffffff",
                "type": "color"
            },
            "container-emphasized": {
                "value": "#d7e3fa",
                "type": "color"
            },
            "container-emphasized-primary": {
                "value": "#2b64d6",
                "type": "color"
            }
        },
        "interactive": {
            "primary-default": {
                "value": "#2b64d6",
                "type": "color"
            },
            "primary-hover": {
                "value": "#4074db",
                "type": "color"
            },
            "primary-press": {
                "value": "#2659bf",
                "type": "color"
            },
            "primary-disabled": {
                "value": "#0f244d0a",
                "type": "color"
            },
            "secondary-default": {
                "value": "#d7e3fa",
                "type": "color"
            },
            "secondary-hover": {
                "value": "#f5f8ff",
                "type": "color"
            },
            "secondary-press": {
                "value": "#bccff5",
                "type": "color"
            },
            "secondary-disabled": {
                "value": "#0f244d0a",
                "type": "color"
            },
            "tertiary-default": {
                "value": "#d7e3fa",
                "type": "color"
            },
            "tertiary-hover": {
                "value": "#f5f8ff",
                "type": "color"
            },
            "tertiary-press": {
                "value": "#bccff5",
                "type": "color"
            },
            "tertiary-disabled": {
                "value": "#0f244d0a",
                "type": "color"
            },
            "surface-default": {
                "value": "#0f244d00",
                "type": "color"
            },
            "surface-hover": {
                "value": "#0f244d0a",
                "type": "color"
            },
            "surface-press": {
                "value": "#0f244d14",
                "type": "color"
            },
            "surface-disabled": {
                "value": "#0f244d0a",
                "type": "color"
            }
        },
        "feedback": {
            "negative": {
                "value": "#fff5f5",
                "type": "color"
            },
            "warning": {
                "value": "#fffbf5",
                "type": "color"
            },
            "positive": {
                "value": "#eef5eb",
                "type": "color"
            },
            "info": {
                "value": "#f5fcff",
                "type": "color"
            }
        }
    },
    "padding": {
        "xxxs": {
            "value": "4px",
            "type": "spacing"
        },
        "xxs": {
            "value": "8px",
            "type": "spacing"
        },
        "xs": {
            "value": "12px",
            "type": "spacing"
        },
        "sm": {
            "value": "16px",
            "type": "spacing"
        },
        "md": {
            "value": "20px",
            "type": "spacing"
        },
        "lg": {
            "value": "24px",
            "type": "spacing"
        },
        "xl": {
            "value": "32px",
            "type": "spacing"
        },
        "xxl": {
            "value": "40px",
            "type": "spacing"
        },
        "xxxl": {
            "value": "48px",
            "type": "spacing"
        }
    },
    "gap": {
        "xxxs": {
            "value": "4px",
            "type": "spacing"
        },
        "xxs": {
            "value": "8px",
            "type": "spacing"
        },
        "xs": {
            "value": "12px",
            "type": "spacing"
        },
        "sm": {
            "value": "16px",
            "type": "spacing"
        },
        "md": {
            "value": "20px",
            "type": "spacing"
        },
        "lg": {
            "value": "24px",
            "type": "spacing"
        },
        "xl": {
            "value": "32px",
            "type": "spacing"
        },
        "xxl": {
            "value": "40px",
            "type": "spacing"
        },
        "xxxl": {
            "value": "48px",
            "type": "spacing"
        }
    },
    "margin": {
        "xxxs": {
            "value": "4px",
            "type": "spacing"
        },
        "xxs": {
            "value": "8px",
            "type": "spacing"
        },
        "xs": {
            "value": "12px",
            "type": "spacing"
        },
        "sm": {
            "value": "16px",
            "type": "spacing"
        },
        "md": {
            "value": "20px",
            "type": "spacing"
        },
        "lg": {
            "value": "24px",
            "type": "spacing"
        },
        "xl": {
            "value": "32px",
            "type": "spacing"
        },
        "xxl": {
            "value": "40px",
            "type": "spacing"
        },
        "xxxl": {
            "value": "48px",
            "type": "spacing"
        }
    },
    "width": {
        "xxxs": {
            "value": "4px",
            "type": "sizing"
        },
        "xxs": {
            "value": "8px",
            "type": "sizing"
        },
        "xs": {
            "value": "12px",
            "type": "sizing"
        },
        "sm": {
            "value": "16px",
            "type": "sizing"
        },
        "md": {
            "value": "24px",
            "type": "sizing"
        },
        "lg": {
            "value": "32px",
            "type": "sizing"
        },
        "xl": {
            "value": "40px",
            "type": "sizing"
        },
        "xxl": {
            "value": "48px",
            "type": "sizing"
        },
        "xxxl": {
            "value": "64px",
            "type": "sizing"
        },
        "18x": {
            "value": "72px",
            "type": "sizing"
        },
        "20x": {
            "value": "80px",
            "type": "sizing"
        },
        "24x": {
            "value": "96px",
            "type": "sizing"
        },
        "30x": {
            "value": "120px",
            "type": "sizing"
        },
        "40x": {
            "value": "160px",
            "type": "sizing"
        },
        "60x": {
            "value": "240px",
            "type": "sizing"
        },
        "80x": {
            "value": "320px",
            "type": "sizing"
        }
    },
    "height": {
        "xxxs": {
            "value": "4px",
            "type": "sizing"
        },
        "xxs": {
            "value": "8px",
            "type": "sizing"
        },
        "xs": {
            "value": "12px",
            "type": "sizing"
        },
        "sm": {
            "value": "16px",
            "type": "sizing"
        },
        "md": {
            "value": "24px",
            "type": "sizing"
        },
        "lg": {
            "value": "32px",
            "type": "sizing"
        },
        "xl": {
            "value": "40px",
            "type": "sizing"
        },
        "xxl": {
            "value": "48px",
            "type": "sizing"
        },
        "xxxl": {
            "value": "64px",
            "type": "sizing"
        },
        "18x": {
            "value": "72px",
            "type": "sizing"
        },
        "20x": {
            "value": "80px",
            "type": "sizing"
        },
        "24x": {
            "value": "96px",
            "type": "sizing"
        },
        "30x": {
            "value": "120px",
            "type": "sizing"
        },
        "40x": {
            "value": "160px",
            "type": "sizing"
        },
        "60x": {
            "value": "240px",
            "type": "sizing"
        },
        "80x": {
            "value": "320px",
            "type": "sizing"
        }
    },
    "textColor": {
        "feedback": {
            "text-negative": {
                "value": "#751d1d",
                "type": "color"
            },
            "icon-negative": {
                "value": "#c72a2a",
                "type": "color"
            },
            "text-warning": {
                "value": "#73501d",
                "type": "color"
            },
            "icon-warning": {
                "value": "#ab711a",
                "type": "color"
            },
            "text-positive": {
                "value": "#34661a",
                "type": "color"
            },
            "icon-positive": {
                "value": "#408f15",
                "type": "color"
            },
            "text-info": {
                "value": "#164359",
                "type": "color"
            },
            "icon-info": {
                "value": "#135a7d",
                "type": "color"
            }
        },
        "layout": {
            "primary": {
                "value": "#0b1936",
                "type": "color"
            },
            "secondary": {
                "value": "#0f244da3",
                "type": "color"
            },
            "emphasized": {
                "value": "#2b64d6",
                "type": "color"
            }
        },
        "interactive": {
            "default": {
                "value": "#2b64d6",
                "type": "color"
            },
            "default-inverse": {
                "value": "#ffffff",
                "type": "color"
            },
            "enabled": {
                "value": "#0b1936",
                "type": "color"
            },
            "placeholder": {
                "value": "#0f244da3",
                "type": "color"
            },
            "disabled": {
                "value": "#0f244d29",
                "type": "color"
            },
            "link": {
                "value": "#2b64d6",
                "type": "color"
            }
        }
    },
    "borderColor": {
        "layout": {
            "border-subtle": {
                "value": "#0f244d29",
                "type": "color"
            },
            "border-strong": {
                "value": "#0f244d52",
                "type": "color"
            },
            "divider-subtle": {
                "value": "#0f244d14",
                "type": "color"
            },
            "divider-strong": {
                "value": "#0f244d29",
                "type": "color"
            },
            "border-inverse": {
                "value": "#ffffff",
                "type": "color"
            }
        },
        "interactive": {
            "default": {
                "value": "#0f244d29",
                "type": "color"
            },
            "hover": {
                "value": "#0f244d52",
                "type": "color"
            },
            "disabled": {
                "value": "#0f244d14",
                "type": "color"
            },
            "focus-default": {
                "value": "#224fa8",
                "type": "color"
            },
            "focus-negative": {
                "value": "#b22727",
                "type": "color"
            },
            "focus-warning": {
                "value": "#c77f14",
                "type": "color"
            },
            "focus-positive": {
                "value": "#44a310",
                "type": "color"
            },
            "focus-info": {
                "value": "#0e648f",
                "type": "color"
            }
        },
        "feedback": {
            "negative": {
                "value": "#f7bebe",
                "type": "color"
            },
            "warning": {
                "value": "#ffe2b8",
                "type": "color"
            },
            "positive": {
                "value": "#c0eba9",
                "type": "color"
            },
            "info": {
                "value": "#add9f0",
                "type": "color"
            }
        }
    },
    "backdropOpacity": {
        "default": {
            "value": "#00000066",
            "type": "color"
        }
    },
    "borderRadius": {
        "radius-xs": {
            "value": "2px",
            "type": "borderRadius"
        },
        "radius-sm": {
            "value": "4px",
            "type": "borderRadius"
        },
        "radius-md": {
            "value": "8px",
            "type": "borderRadius"
        },
        "radius-lg": {
            "value": "12px",
            "type": "borderRadius"
        },
        "radius-xl": {
            "value": "16px",
            "type": "borderRadius"
        },
        "radius-xxl": {
            "value": "24px",
            "type": "borderRadius"
        },
        "radius-full": {
            "value": "2000px",
            "type": "borderRadius"
        },
        "radius-none": {
            "value": "0px",
            "type": "borderRadius"
        }
    },
    "borderWidth": {
        "width-sm": {
            "value": "1px",
            "type": "borderWidth"
        },
        "width-md": {
            "value": "2px",
            "type": "borderWidth"
        },
        "width-lg": {
            "value": "4px",
            "type": "borderWidth"
        }
    },
    "boxShadow": {
        "level-1": {
            "value": {
                "x": 0,
                "y": 2,
                "blur": 6,
                "spread": 0,
                "color": "#0000001a",
                "type": "dropShadow"
            },
            "type": "boxShadow"
        },
        "level-2": {
            "value": {
                "x": 0,
                "y": 6,
                "blur": 16,
                "spread": 0,
                "color": "#00000026",
                "type": "dropShadow"
            },
            "type": "boxShadow"
        },
        "level-3": {
            "value": {
                "x": 0,
                "y": 12,
                "blur": 32,
                "spread": 0,
                "color": "#00000033",
                "type": "dropShadow"
            },
            "type": "boxShadow"
        },
        "level-4": {
            "value": {
                "x": 0,
                "y": 24,
                "blur": 48,
                "spread": 0,
                "color": "#00000026",
                "type": "dropShadow"
            },
            "type": "boxShadow"
        }
    }
}