{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Revolut",
  "meta": {
    "name": "Revolut",
    "description": "Revolut's marketing surfaces pair a stark black canvas with the brand's\ncobalt-violet (`#494fdf`) and a wide accent palette of deep, fully-saturated\nproduct colours — teal, light-blue, deep pink, light-green, warning orange.\nThe system reads as fintech-meets-product-brochure: oversized 80px–136px\nAeonik Pro display headlines, generous whitespace, photography-led hero\nbands, and full-width product mockups (cards, phones, terminals) shown as\nhero objects inside near-black sections. Most surfaces are either black or\noff-white; pill-shaped buttons and rounded-12/20px content cards carry the\nconsumer-financial-app feel without crossing into playful territory.",
    "theme": "light"
  },
  "color": {
    "primary": {
      "$value": "#494fdf",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "primary-bright": {
      "$value": "#4f55f1",
      "$type": "color",
      "$description": "Use for the primary bright role."
    },
    "primary-deep": {
      "$value": "#3a40c4",
      "$type": "color",
      "$description": "Use for the primary deep role."
    },
    "on-primary": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "ink": {
      "$value": "#191c1f",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "body": {
      "$value": "#1f2226",
      "$type": "color",
      "$description": "Use for the body role."
    },
    "charcoal": {
      "$value": "#3a3d40",
      "$type": "color",
      "$description": "Use for the charcoal role."
    },
    "mute": {
      "$value": "#505a63",
      "$type": "color",
      "$description": "Use for the mute role."
    },
    "ash": {
      "$value": "#5c5e60",
      "$type": "color",
      "$description": "Use for the ash role."
    },
    "stone": {
      "$value": "#8d969e",
      "$type": "color",
      "$description": "Use for the stone role."
    },
    "faint": {
      "$value": "#c9c9cd",
      "$type": "color",
      "$description": "Use for the faint role."
    },
    "on-dark": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on dark role."
    },
    "on-dark-mute": {
      "$value": "rgba(255,255,255,0.72)",
      "$type": "color",
      "$description": "Use for the on dark mute role."
    },
    "canvas-light": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the canvas light role."
    },
    "canvas-dark": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the canvas dark role."
    },
    "surface-soft": {
      "$value": "#f4f4f4",
      "$type": "color",
      "$description": "Use for the surface soft role."
    },
    "surface-card": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the surface card role."
    },
    "surface-deep": {
      "$value": "#0a0a0a",
      "$type": "color",
      "$description": "Use for the surface deep role."
    },
    "surface-elevated": {
      "$value": "#16181a",
      "$type": "color",
      "$description": "Use for the surface elevated role."
    },
    "hairline-light": {
      "$value": "#e2e2e7",
      "$type": "color",
      "$description": "Use for the hairline light role."
    },
    "hairline-dark": {
      "$value": "rgba(255,255,255,0.12)",
      "$type": "color",
      "$description": "Use for the hairline dark role."
    },
    "hairline-strong": {
      "$value": "#191c1f",
      "$type": "color",
      "$description": "Use for the hairline strong role."
    },
    "divider-soft": {
      "$value": "rgba(255,255,255,0.06)",
      "$type": "color",
      "$description": "Use for the divider soft role."
    },
    "accent-teal": {
      "$value": "#00a87e",
      "$type": "color",
      "$description": "Use for the accent teal role."
    },
    "accent-blue-link": {
      "$value": "#376cd5",
      "$type": "color",
      "$description": "Use for the accent blue link role."
    },
    "accent-light-blue": {
      "$value": "#007bc2",
      "$type": "color",
      "$description": "Use for the accent light blue role."
    },
    "accent-light-green": {
      "$value": "#428619",
      "$type": "color",
      "$description": "Use for the accent light green role."
    },
    "accent-green-text": {
      "$value": "#006400",
      "$type": "color",
      "$description": "Use for the accent green text role."
    },
    "accent-yellow": {
      "$value": "#b09000",
      "$type": "color",
      "$description": "Use for the accent yellow role."
    },
    "accent-warning": {
      "$value": "#ec7e00",
      "$type": "color",
      "$description": "Use for the accent warning role."
    },
    "accent-pink": {
      "$value": "#e61e49",
      "$type": "color",
      "$description": "Use for the accent pink role."
    },
    "accent-danger": {
      "$value": "#e23b4a",
      "$type": "color",
      "$description": "Use for the accent danger role."
    },
    "accent-deep-red": {
      "$value": "#8b0000",
      "$type": "color",
      "$description": "Use for the accent deep red role."
    },
    "accent-brown": {
      "$value": "#936d62",
      "$type": "color",
      "$description": "Use for the accent brown role."
    },
    "link": {
      "$value": "#376cd5",
      "$type": "color",
      "$description": "Use for the link role."
    }
  },
  "typography": {
    "display-xxl": {
      "$value": {
        "fontFamily": "Aeonik Pro",
        "fontSize": "136px",
        "fontWeight": 500,
        "lineHeight": 1,
        "letterSpacing": "-2.72px"
      },
      "$type": "typography",
      "$description": "Typography style for display xxl."
    },
    "display-xl": {
      "$value": {
        "fontFamily": "Aeonik Pro",
        "fontSize": "80px",
        "fontWeight": 500,
        "lineHeight": 1,
        "letterSpacing": "-0.8px"
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "Aeonik Pro",
        "fontSize": "48px",
        "fontWeight": 500,
        "lineHeight": 1.21,
        "letterSpacing": "-0.48px"
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "display-md": {
      "$value": {
        "fontFamily": "Aeonik Pro",
        "fontSize": "40px",
        "fontWeight": 500,
        "lineHeight": 1.2,
        "letterSpacing": "-0.4px"
      },
      "$type": "typography",
      "$description": "Typography style for display md."
    },
    "heading-lg": {
      "$value": {
        "fontFamily": "Aeonik Pro",
        "fontSize": "32px",
        "fontWeight": 500,
        "lineHeight": 1.19,
        "letterSpacing": "-0.32px"
      },
      "$type": "typography",
      "$description": "Typography style for heading lg."
    },
    "heading-md": {
      "$value": {
        "fontFamily": "Aeonik Pro",
        "fontSize": "24px",
        "fontWeight": 500,
        "lineHeight": 1.33,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading md."
    },
    "heading-sm": {
      "$value": {
        "fontFamily": "Aeonik Pro",
        "fontSize": "20px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading sm."
    },
    "body-lg": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "18px",
        "fontWeight": 400,
        "lineHeight": 1.56,
        "letterSpacing": "-0.09px"
      },
      "$type": "typography",
      "$description": "Typography style for body lg."
    },
    "body-md": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "0.24px"
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "body-md-bold": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "16px",
        "fontWeight": 600,
        "lineHeight": 1.5,
        "letterSpacing": "0.16px"
      },
      "$type": "typography",
      "$description": "Typography style for body md bold."
    },
    "body-sm": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.43,
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for body sm."
    },
    "button-lg": {
      "$value": {
        "fontFamily": "Aeonik Pro",
        "fontSize": "20px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for button lg."
    },
    "button-md": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "16px",
        "fontWeight": 600,
        "lineHeight": 1.5,
        "letterSpacing": "0.24px"
      },
      "$type": "typography",
      "$description": "Typography style for button md."
    },
    "button-sm": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "14px",
        "fontWeight": 600,
        "lineHeight": 1.43,
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for button sm."
    },
    "caption": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "13px",
        "fontWeight": 400,
        "lineHeight": 1.4,
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "link-emph": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "16px",
        "fontWeight": 700,
        "lineHeight": 1.5,
        "letterSpacing": "0.24px"
      },
      "$type": "typography",
      "$description": "Typography style for link emph."
    }
  },
  "spacing": {
    "xxs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Spacing step xs."
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step sm."
    },
    "md": {
      "$value": "14px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "lg": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step lg."
    },
    "xl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step xl."
    },
    "xxl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step xxl."
    },
    "xxxl": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step xxxl."
    },
    "block": {
      "$value": "80px",
      "$type": "dimension",
      "$description": "Spacing step block."
    },
    "section": {
      "$value": "88px",
      "$type": "dimension",
      "$description": "Spacing step section."
    },
    "band": {
      "$value": "120px",
      "$type": "dimension",
      "$description": "Spacing step band."
    }
  },
  "radius": {
    "none": {
      "$value": "0px",
      "$type": "dimension",
      "$description": "Border radius none."
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "28px",
      "$type": "dimension",
      "$description": "Border radius xl."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.revolut.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}