CSS Variables

Preview

/* Generated by UI Archive — ui-archive.com */

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #e2e6e3;
  --color-blue: #007aff;
  --color-gray10: hsla(135,7%,89%,.1);
  --color-gray20: hsla(135,7%,89%,.2);
  --color-gray30: hsla(135,7%,89%,.3);
  --color-gray50: hsla(135,7%,89%,.5);

  /* Typography */
  --font-size-sf-pro-text: 14px;
  --font-size-sf-pro-display: 23px;

  /* Spacing */
  --spacing-2px: 2px;
  --spacing-3px: 3px;
  --spacing-4px: 4px;
  --spacing-6px: 6px;
  --spacing-8px: 8px;
  --spacing-9px: 9px;
  --spacing-10px: 10px;
  --spacing-12px: 12px;
  --spacing-16px: 16px;
  --spacing-20px: 20px;
  --spacing-24px: 24px;
  --spacing-32px: 32px;
  --spacing-44px: 44px;
  --spacing-48px: 48px;
  --spacing-68px: 68px;

  /* Border Radius */
  --radius-8px: 8px;
  --radius-10px: 10px;
  --radius-40px: 40px;
  --radius-50: 50%;
  --radius-38px: 38px;

…

All Tokens