Skip to main content

Design Tokens

The Blue Water Design System uses CSS custom properties (variables) to maintain consistency across the design system. These tokens are organized into several categories.

Typography​

Font Weights​

--bw-font-regular: 400;
--bw-font-medium: 500;
--bw-font-semi-bold: 600;
--bw-font-bold: 700;

Font Sizes​

--bw-font-2xs: 0.625rem;  /* 10px */
--bw-font-xs: 0.75rem;    /* 12px */
--bw-font-sm: 0.875rem;   /* 14px */
--bw-font-md: 1rem;       /* 16px */
--bw-font-lg: 1.125rem;   /* 18px */
--bw-font-xl: 1.25rem;    /* 20px */
--bw-font-2xl: 1.5rem;    /* 24px */
--bw-font-3xl: 1.875rem;  /* 30px */

Spacing​

The spacing scale provides consistent spacing values throughout the system:

--bw-spacing-4xs: 0.125rem;  /* 2px */
--bw-spacing-3xs: 0.25rem;   /* 4px */
--bw-spacing-2xs: 0.375rem;  /* 6px */
--bw-spacing-xs: 0.5rem;     /* 8px */
--bw-spacing-sm: 0.75rem;    /* 12px */
--bw-spacing-md: 1rem;       /* 16px */
--bw-spacing-lg: 1.25rem;    /* 20px */
--bw-spacing-xl: 1.5rem;     /* 24px */
--bw-spacing-2xl: 2rem;      /* 32px */
--bw-spacing-3xl: 2.5rem;    /* 40px */
--bw-spacing-4xl: 3rem;      /* 48px */

Border Radius​

--bw-radius-sm: 2px;
--bw-radius-md: 4px;
--bw-radius-lg: 6px;
--bw-radius-xl: 8px;
--bw-radius-circle: 10000px;

Shadows​

--bw-shadow-xs: 0px 1px 4px 0px rgba(10, 13, 18, 0.16), 0px 0px 1px 0px rgba(10, 13, 18, 0.1);
--bw-shadow-sm: 0px 4px 11px 0px rgba(10, 13, 18, 0.08), 0px 0px 2px 0px rgba(10, 13, 18, 0.07);
--bw-shadow-md: 0px 5px 25px 0px rgba(10, 13, 18, 0.09), 0px 2px 4px 0px rgba(10, 13, 18, 0.07);
--bw-shadow-lg: 0px 10px 40px 0px rgba(10, 13, 18, 0.08), 0px 5px 8px 0px rgba(10, 13, 18, 0.08);

Colors​

Gray (Light Theme)​

--bw-gray-light-25: #FDFDFD;
--bw-gray-light-50: #FAFAFA;
--bw-gray-light-100: #F5F5F5;
--bw-gray-light-200: #E9EAEB;
--bw-gray-light-300: #D5D7DA;
--bw-gray-light-400: #A4A7AE;
--bw-gray-light-500: #717680;
--bw-gray-light-600: #535862;
--bw-gray-light-700: #414651;
--bw-gray-light-800: #252B37;
--bw-gray-light-900: #181D27;
--bw-gray-light-950: #0A0D12;

Gray (Dark Theme)​

--bw-gray-dark-25: #FAFAFA;
--bw-gray-dark-50: #F7F7F7;
--bw-gray-dark-100: #F0F0F1;
--bw-gray-dark-200: #ECECED;
--bw-gray-dark-300: #CECFD2;
--bw-gray-dark-400: #94979C;
--bw-gray-dark-500: #85888E;
--bw-gray-dark-600: #61656C;
--bw-gray-dark-700: #373A41;
--bw-gray-dark-800: #22262F;
--bw-gray-dark-900: #13161B;
--bw-gray-dark-950: #0C0E12;

Blue​

--bw-blue-25: #F5FAFF;
--bw-blue-50: #EFF8FF;
--bw-blue-100: #D1E9FF;
--bw-blue-200: #B2DDFF;
--bw-blue-300: #84CAFF;
--bw-blue-400: #53B1FD;
--bw-blue-500: #2E90FA;
--bw-blue-600: #1570EF;
--bw-blue-700: #175CD3;
--bw-blue-800: #1849A9;
--bw-blue-900: #194185;
--bw-blue-950: #102A56;

Green​

--bw-green-25: #F6FEF9;
--bw-green-50: #ECFDF2;
--bw-green-100: #DFFAE2;
--bw-green-200: #BFEFC3;
--bw-green-300: #99E3A1;
--bw-green-400: #6FC681;
--bw-green-500: #46A963;
--bw-green-600: #368B4E;
--bw-green-700: #2A6E3E;
--bw-green-800: #235635;
--bw-green-900: #1C482D;
--bw-green-950: #12311F;

Red​

--bw-red-25: #FFF7F7;
--bw-red-50: #FFEDEE;
--bw-red-100: #FFDAD9;
--bw-red-200: #FEB3B2;
--bw-red-300: #FD8A87;
--bw-red-400: #F86563;
--bw-red-500: #F23D3D;
--bw-red-600: #D93232;
--bw-red-700: #B02626;
--bw-red-800: #8E1F1F;
--bw-red-900: #731A1A;
--bw-red-950: #4D1111;

Orange​

--bw-orange-25: #FFFAF5;
--bw-orange-50: #FFF3EB;
--bw-orange-100: #FFDEC6;
--bw-orange-200: #FFC59C;
--bw-orange-300: #FFA970;
--bw-orange-400: #FF8C47;
--bw-orange-500: #F86F21;
--bw-orange-600: #D4581A;
--bw-orange-700: #B04515;
--bw-orange-800: #8F3611;
--bw-orange-900: #742D0E;
--bw-orange-950: #4D1D09;

Purple​

--bw-purple-25: #F9F6FF;
--bw-purple-50: #F0E9FF;
--bw-purple-100: #DCC7FF;
--bw-purple-200: #C6A1FF;
--bw-purple-300: #AE78FF;
--bw-purple-400: #974FFF;
--bw-purple-500: #8633FF;
--bw-purple-600: #631FD4;
--bw-purple-700: #4D19B0;
--bw-purple-800: #3C158F;
--bw-purple-900: #301173;
--bw-purple-950: #1E0B4D;

Teal​

--bw-teal-25: #f4fbfa;
--bw-teal-50: #e9f6f5;
--bw-teal-100: #cdedeb;
--bw-teal-200: #a4ded9;
--bw-teal-300: #77cdc5;
--bw-teal-400: #4abdb0;
--bw-teal-500: #27a89a;
--bw-teal-600: #1f887c;
--bw-teal-700: #196e64;
--bw-teal-800: #14554e;
--bw-teal-900: #10433f;
--bw-teal-950: #0b2d2a;

Usage​

To use these design tokens in your CSS:

.my-element {
  color: var(--bw-blue-500);
  padding: var(--bw-spacing-md);
  border-radius: var(--bw-radius-md);
  box-shadow: var(--bw-shadow-sm);
}

Best Practices​

  1. Always use design tokens instead of hardcoded values
  2. Use the appropriate color scale for your theme (light/dark)
  3. Follow the spacing scale for consistent layouts
  4. Use semantic color tokens (e.g., --bw-blue-500 for primary actions)
  5. Combine tokens with utility classes for complex styling
  6. Maintain accessibility by using appropriate color contrast ratios