Skip to main content
Home
Spark Web on GitHub

Tokens

List of our theme tokens for reference.

Animations

The animation key in our theme is used to define our durations and easings. These are used for things like smoothly transitioning the background colour of a button on hover/press.

Animation Duration

The number of milliseconds the animation should take to complete.

standard

300

Animation Easing

The easing function that should be used for the animation.

standard

cubic-bezier(0.2, 0, 0, 1)

Breakpoints

Breakpoint tokens are used for media queries so that we can create responsive designs. These tokens are surfaced by our layout primitives such as Box, Columns, Hidden, Inline, Row, and Stack.

mobile

0

tablet

740

desktop

992

wide

1200
1
2
3
const items = [1, 2, 3];


return (
  <Box
    background="primaryLow"
    display="inline-flex"
    flexDirection={{
      mobile: 'row',
      tablet: 'column',
      desktop: 'rowReverse',
    }}
    gap={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}
    padding={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}
  >
    {items.map(item => (
      <Row
        key={item}
        align="center"
        alignY="center"
        background="primary"
        height={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}
        width={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}
      >
        <Text weight="semibold">{item}</Text>
      </Row>
    ))}
  </Box>
);
Resize your browser to see the layout change between different breakpoints.

Border

The border key contains all the tokens related to styling borders as well as the Divider.

Border Radii

small: 4
medium: 8
large: 16
full: 9999
const theme = useTheme();


return (
  <Stack gap="large" background="primaryLow" padding="large">
    {Object.entries(theme.border.radius).map(([key, value]) => (
      <Row
        key={key}
        borderRadius={key}
        height="large"
        background="primary"
        align="center"
        alignY="center"
      >
        <Text weight="semibold">
          {key}: {value}
        </Text>
      </Row>
    ))}
  </Stack>
);

Border Widths

standard: 1
large: 2
const theme = useTheme();


return (
  <Stack gap="large">
    {Object.entries(theme.border.width).map(([key, value]) => (
      <Stack key={key} gap="large" padding="large" background="primaryLow">
        <Row
          border="primary"
          borderWidth={key}
          height="large"
          align="center"
          alignY="center"
        >
          <Text weight="semibold">
            {key}: {value}
          </Text>
        </Row>
        <Divider
          width={key}
          color="primary"
        />
      </Stack>
    ))}
  </Stack>
);

Border Colors

neutral: #1a2a3a
standard: #dce1ec
standardInverted: #ffffff
field: #dce1ec
fieldHover: #c7cedb
fieldAccent: #00c28d
fieldDisabled: #c7cedb
primary: #00c28d
primaryHover: #00a87b
primaryActive: #108663
secondary: #ffbb66
secondaryHover: #ffaa44
secondaryActive: #e58f27
accent: #8b5cf6
accentMuted: #997dd8
caution: #be5c1c
cautionMuted: #ffaa44
critical: #e61e32
criticalMuted: #f53841
info: #0677d6
infoMuted: #2b8aed
positive: #2c855d
positiveMuted: #1e9c65
const theme = useTheme();


return (
  <Stack gap="large" background="primaryLow" padding="large">
    {Object.entries(props.theme.border.width).map(([key, value]) => (
      <Row
        key={key}
        border="primary"
        borderWidth={key}
        height="large"
        align="center"
        alignY="center"
      >
        <Text weight="semibold">
          {key}: {value}
        </Text>
      </Row>
    ))}
  </Stack>
);

Colors

Foreground

See foreground section on the colours page for more information.

Background

See background section on the colours page for more information.

Status

See status section on the colours page for more information.

Background Interactions

See BackgroundInteractions section of colours page for more information.

Background Lightness

Determines if a background colour is "light" or "dark". Used to intelligently choose accessible foreground colours.
muted: dark
disabled: light
backdrop: dark
body: light
surface: light
surfaceMuted: light
surfacePressed: light
fieldAccent: dark
input: light
inputPressed: light
inputDisabled: light
accent: dark
accentMuted: light
neutral: light
neutralLow: light
primary: dark
primaryLow: light
primaryMuted: light
secondary: light
secondaryLow: light
secondaryMuted: light
caution: dark
cautionLow: light
cautionMuted: light
critical: dark
criticalLow: light
criticalMuted: light
info: dark
infoLow: light
infoMuted: light
positive: dark
positiveLow: light
positiveMuted: light
infoLight: light
criticalLight: light
positiveLight: light
cautionLight: light
const theme = useTheme();


return (
  <Columns
    gap="large"
    padding="large"
    template={[1, 1]}
    collapseBelow="tablet"
  >
    {Object.entries(theme.backgroundLightness).map(([key, value]) => (
      <Row
        key={key}
        background={key}
        height="large"
        align="center"
        alignY="center"
      >
        <Text weight="semibold">
          {key}: {value}
        </Text>
      </Row>
    ))}
  </Columns>
);

Content Widths

Content widths are used for constraining the maximum width of section. These tokens are surfaced by the Container component.
xsmall: 400
small: 660
medium: 940
large: 1280
xlarge: 1400
const theme = useTheme();


return (
  <Stack gap="large" background="primaryLow" padding="large">
    {Object.entries(theme.contentWidth).map(([key, value]) => {
      return (
        <Container key={key} size={key as ContainerProps['size']}>
          <Row
            height="large"
            background="primary"
            align="center"
            alignY="center"
            gap="large"
          >
            <Text weight="semibold">
              {key}: {value}
            </Text>
          </Row>
        </Container>
      );
    })}
  </Stack>
);
The example above shows you what all of the container widths are. The content of this pages is constrained by one of these containers you can't actually see the larger widths, but you get the idea 😉

Elevation

Used for controlling the stack order of elements. Exposed by thezIndex prop on Box and components that extend it.
400
notification
300
modal
290
modalBlanket
200
sticky
100
dropdown
90
dropdownBlanket
<Stack alignSelf="center" paddingTop="large">
  {Object.entries(theme.elevation)
    .reverse()
    .map(([key, value]) => (
      <Row
        key={key}
        alignY="center"
        gap="large"
        position="relative"
        zIndex={key}
        style={{ marginTop: -props.theme.spacing.large }}
      >
        <Row
          height="large"
          width="large"
          background="primaryLow"
          border="primary"
          borderWidth="large"
          borderRadius="full"
          align="center"
          alignY="center"
        >
          <Text weight="semibold">{value}</Text>
        </Row>
        <Text weight="semibold">{key}</Text>
      </Row>
    ))}
</Stack>

Shadow

Controls the box-shadow of elements to simulate elevation. Shadow tokens are very subtle and should be used sparingly.
small:
0 1px 2px rgba(0, 0, 0, 0.05)
medium:
0 2px 8px rgba(0, 0, 0, 0.04)
large:
0 6px 12px rgba(0, 0, 0, 0.1)
const theme = useTheme();


return (
  <Columns gap="large" template={[1, 1, 1]} collapseBelow="tablet">
    {Object.entries(theme.shadow).map(([key, value]) => {
      return (
        <Stack
          key={key}
          gap="large"
          padding="large"
          border="standard"
          borderRadius="medium"
        >
          <Stack gap="medium">
            <Text weight="semibold">{key}:</Text>
            <Text>{value}</Text>
          </Stack>
          <Stack
            gap={key}
            align="center"
            padding="large"
          >
            <Row
              height="large"
              width="large"
              shadow={key}
            />
          </Stack>
        </Stack>
      );
    })}
  </Columns>
);

Spacing

Spacing tokens are used to distribute space between elements. Exposed bygap, margin, andpadding props on Box and components that extend it.

xxsmall: 2

xsmall: 4

small: 8

medium: 12

large: 16

xlarge: 24

xxlarge: 32

const theme = useTheme();


return (
  <Columns gap="large" template={[1, 1]} collapseBelow="tablet">
    {Object.entries(theme.spacing).map(([key, value]) => {
      if (key === 'none') return;
      return (
        <Stack key={key} gap="medium">
          <Heading level="3">
            {key}: {value}
          </Heading>
          <Stack
            gap={key}
            background="primaryLow"
            padding="large"
          >
            <Box height="medium" background="primary" />
            <Box height="medium" background="primary" />
            <Box height="medium" background="primary" />
          </Stack>
        </Stack>
      );
    })}
  </Columns>
);

Sizing

Sizing tokens are used to size elements such as icons, inputs and buttons. Maps to the height and width props on Box and components that extend it.
xxsmall: 16
xsmall: 24
small: 32
medium: 44
large: 56
none: 0
full: 100%
const theme = useTheme();


return (
  <Columns gap="large" template={[1, 1]} collapseBelow="tablet">
    {Object.entries(theme.sizing).map(([key, value]) => {
      return (
        <Stack
          key={key}
          gap="medium"
          background="primaryMuted"
          padding="large"
        >
          <Text weight="semibold">
            {key}: {value}
          </Text>
          <Box
            height="medium"
            background="primary"
            width={key}
          />
        </Stack>
      );
    })}
  </Columns>
);

Typography

Font Family

The fontFamily key defines font-stack (under the "name" key), as well as the font metrics for Capsize to calculate leading trim. Both of the font families ("sans" and "display") have the same values. They have been separated so that the theme can be overridden to if necessary.
sans:
"Aestetico", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
{
  "capHeight": 666,
  "ascent": 980,
  "descent": -340,
  "lineGap": 0,
  "unitsPerEm": 1000
}
display:
"Aestetico", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
{
  "capHeight": 666,
  "ascent": 980,
  "descent": -340,
  "lineGap": 0,
  "unitsPerEm": 1000
}

Font Weight

See typography page for more information.
regular: 400
semibold: 600

Heading

Heading elements can have responsive sizes. By overriding thefontSize and rows (where "rows" is the number of 4px rows the Heading element should take up on a grid) the font sizes can be made to change between the mobile and tablet breakpoints. The lineHeight,capHeight and trims tokens are generated by Capsize's precomputeValues.

Heading level: 1

Mobile
{
  "fontSize": "2.1875rem",
  "lineHeight": "2.25rem",
  "capHeight": "1.456875rem",
  "trims": {
    "capHeightTrim": "-0.1683em",
    "baselineTrim": "-0.1943em"
  }
}
Tablet
{
  "fontSize": "2.1875rem",
  "lineHeight": "2.75rem",
  "capHeight": "1.456875rem",
  "trims": {
    "capHeightTrim": "-0.2826em",
    "baselineTrim": "-0.3086em"
  }
}

Heading level: 2

Mobile
{
  "fontSize": "1.4375rem",
  "lineHeight": "2rem",
  "capHeight": "0.957375rem",
  "trims": {
    "capHeightTrim": "-0.3497em",
    "baselineTrim": "-0.3757em"
  }
}
Tablet
{
  "fontSize": "1.4375rem",
  "lineHeight": "2.25rem",
  "capHeight": "0.957375rem",
  "trims": {
    "capHeightTrim": "-0.4366em",
    "baselineTrim": "-0.4626em"
  }
}

Heading level: 3

Mobile
{
  "fontSize": "1.1875rem",
  "lineHeight": "1.5rem",
  "capHeight": "0.790875rem",
  "trims": {
    "capHeightTrim": "-0.2856em",
    "baselineTrim": "-0.3116em"
  }
}
Tablet
{
  "fontSize": "1.1875rem",
  "lineHeight": "1.75rem",
  "capHeight": "0.790875rem",
  "trims": {
    "capHeightTrim": "-0.3908em",
    "baselineTrim": "-0.4168em"
  }
}

Heading level: 4

Mobile
{
  "fontSize": "1.0625rem",
  "lineHeight": "1.25rem",
  "capHeight": "0.707625rem",
  "trims": {
    "capHeightTrim": "-0.2422em",
    "baselineTrim": "-0.2682em"
  }
}
Tablet
{
  "fontSize": "1.0625rem",
  "lineHeight": "1.75rem",
  "capHeight": "0.707625rem",
  "trims": {
    "capHeightTrim": "-0.4775em",
    "baselineTrim": "-0.5035em"
  }
}

Text

Text elements can have responsive sizes. By overriding thefontSize and rows (where "rows" is the number of 4px rows the Text element should take up on a grid) the font sizes can be made to change between the mobile and tablet breakpoints. The lineHeight,capHeight and trims tokens are generated by Capsize's precomputeValues.
Heading level: xsmall
Mobile
{
  "fontSize": "0.8125rem",
  "lineHeight": "1.25rem",
  "capHeight": "0.541125rem",
  "trims": {
    "capHeightTrim": "-0.4232em",
    "baselineTrim": "-0.4492em"
  }
}
Tablet
{
  "fontSize": "0.8125rem",
  "lineHeight": "1.25rem",
  "capHeight": "0.541125rem",
  "trims": {
    "capHeightTrim": "-0.4232em",
    "baselineTrim": "-0.4492em"
  }
}
Heading level: small
Mobile
{
  "fontSize": "0.9375rem",
  "lineHeight": "1.25rem",
  "capHeight": "0.624375rem",
  "trims": {
    "capHeightTrim": "-0.3207em",
    "baselineTrim": "-0.3467em"
  }
}
Tablet
{
  "fontSize": "0.9375rem",
  "lineHeight": "1.25rem",
  "capHeight": "0.624375rem",
  "trims": {
    "capHeightTrim": "-0.3207em",
    "baselineTrim": "-0.3467em"
  }
}
Heading level: standard
Mobile
{
  "fontSize": "1.0625rem",
  "lineHeight": "1.5rem",
  "capHeight": "0.707625rem",
  "trims": {
    "capHeightTrim": "-0.3599em",
    "baselineTrim": "-0.3859em"
  }
}
Tablet
{
  "fontSize": "1.0625rem",
  "lineHeight": "1.5rem",
  "capHeight": "0.707625rem",
  "trims": {
    "capHeightTrim": "-0.3599em",
    "baselineTrim": "-0.3859em"
  }
}
Heading level: large
Mobile
{
  "fontSize": "1.1875rem",
  "lineHeight": "1.75rem",
  "capHeight": "0.790875rem",
  "trims": {
    "capHeightTrim": "-0.3908em",
    "baselineTrim": "-0.4168em"
  }
}
Tablet
{
  "fontSize": "1.1875rem",
  "lineHeight": "1.75rem",
  "capHeight": "0.790875rem",
  "trims": {
    "capHeightTrim": "-0.3908em",
    "baselineTrim": "-0.4168em"
  }
}

Utils

Along with theme tokens, the theme object also comes with a host of useful utilities. These are documented in the theme package docs.

All Tokens

Here is the complete list of our tokens for easy reference:
{
  "breakpoint": {
    "mobile": 0,
    "tablet": 740,
    "desktop": 992,
    "wide": 1200
  },
  "border": {
    "radius": {
      "small": 4,
      "medium": 8,
      "large": 16,
      "full": 9999
    },
    "width": {
      "standard": 1,
      "large": 2
    },
    "color": {
      "neutral": "#1a2a3a",
      "standard": "#dce1ec",
      "standardInverted": "#ffffff",
      "field": "#dce1ec",
      "fieldHover": "#c7cedb",
      "fieldAccent": "#00c28d",
      "fieldDisabled": "#c7cedb",
      "primary": "#00c28d",
      "primaryHover": "#00a87b",
      "primaryActive": "#108663",
      "secondary": "#ffbb66",
      "secondaryHover": "#ffaa44",
      "secondaryActive": "#e58f27",
      "accent": "#8b5cf6",
      "accentMuted": "#997dd8",
      "caution": "#be5c1c",
      "cautionMuted": "#ffaa44",
      "critical": "#e61e32",
      "criticalMuted": "#f53841",
      "info": "#0677d6",
      "infoMuted": "#2b8aed",
      "positive": "#2c855d",
      "positiveMuted": "#1e9c65"
    }
  },
  "color": {
    "foreground": {
      "neutral": "#1a2a3a",
      "neutralInverted": "#ffffff",
      "muted": "#646f84",
      "mutedInverted": "hsla(0, 0%, 100%, 0.75)",
      "link": "#00a87b",
      "disabled": "#98a2b8",
      "fieldAccent": "#00c28d",
      "placeholder": "#646f84",
      "accent": "#8b5cf6",
      "primary": "#00c28d",
      "primaryHover": "#00a87b",
      "primaryActive": "#108663",
      "secondary": "#ffbb66",
      "secondaryHover": "#ffaa44",
      "secondaryActive": "#e58f27",
      "caution": "#ad541a",
      "critical": "#c81b0e",
      "info": "#106fb8",
      "positive": "#327e59"
    },
    "background": {
      "muted": "#646f84",
      "disabled": "#98a2b8",
      "backdrop": "hsla(0, 0%, 0%, 0.4)",
      "body": "#fafcfe",
      "surface": "#ffffff",
      "surfaceMuted": "#fafcfe",
      "surfacePressed": "#c7cedb",
      "fieldAccent": "#1a2a3a",
      "input": "#ffffff",
      "inputPressed": "#f1f4fb",
      "inputDisabled": "#fafcfe",
      "accent": "#8b5cf6",
      "accentMuted": "#f7f5ff",
      "neutral": "#ffffff",
      "neutralLow": "#fafcfe",
      "primary": "#00a87b",
      "primaryLow": "#edfaf5",
      "primaryMuted": "#f5fdf9",
      "secondary": "#ffaa44",
      "secondaryLow": "#fff0e0",
      "secondaryMuted": "#fef5eb",
      "caution": "#be5c1c",
      "cautionLow": "#fff5eb",
      "cautionMuted": "#fefaf6",
      "critical": "#e61e32",
      "criticalLow": "#fff4f4",
      "criticalMuted": "#fef8f8",
      "info": "#0677d6",
      "infoLow": "#f3f8fc",
      "infoMuted": "#f6fafd",
      "positive": "#2c855d",
      "positiveLow": "#f0f9f1",
      "positiveMuted": "#f6fbf8",
      "infoLight": "#e3ecf4",
      "criticalLight": "#f2e3e5",
      "positiveLight": "#e9f1ed",
      "cautionLight": "#f2eae5"
    },
    "status": {
      "accent": "#8b5cf6",
      "caution": "#ffaa44",
      "critical": "#f53841",
      "info": "#2b8aed",
      "neutral": "#1a2a3a",
      "positive": "#1e9c65"
    }
  },
  "spacing": {
    "xxsmall": 2,
    "xsmall": 4,
    "small": 8,
    "medium": 12,
    "large": 16,
    "xlarge": 24,
    "xxlarge": 32,
    "none": 0
  },
  "sizing": {
    "xxsmall": 16,
    "xsmall": 24,
    "small": 32,
    "medium": 44,
    "large": 56,
    "none": 0,
    "full": "100%"
  },
  "typography": {
    "fontFamily": {
      "sans": {
        "fontMetrics": {
          "capHeight": 666,
          "ascent": 980,
          "descent": -340,
          "lineGap": 0,
          "unitsPerEm": 1000
        },
        "name": "\"Aestetico\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
      },
      "display": {
        "fontMetrics": {
          "capHeight": 666,
          "ascent": 980,
          "descent": -340,
          "lineGap": 0,
          "unitsPerEm": 1000
        },
        "name": "\"Aestetico\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
      }
    },
    "fontWeight": {
      "regular": 400,
      "semibold": 600
    },
    "heading": {
      "level": {
        "1": {
          "mobile": {
            "fontSize": "2.1875rem",
            "lineHeight": "2.25rem",
            "capHeight": "1.456875rem",
            "trims": {
              "capHeightTrim": "-0.1683em",
              "baselineTrim": "-0.1943em"
            }
          },
          "tablet": {
            "fontSize": "2.1875rem",
            "lineHeight": "2.75rem",
            "capHeight": "1.456875rem",
            "trims": {
              "capHeightTrim": "-0.2826em",
              "baselineTrim": "-0.3086em"
            }
          }
        },
        "2": {
          "mobile": {
            "fontSize": "1.4375rem",
            "lineHeight": "2rem",
            "capHeight": "0.957375rem",
            "trims": {
              "capHeightTrim": "-0.3497em",
              "baselineTrim": "-0.3757em"
            }
          },
          "tablet": {
            "fontSize": "1.4375rem",
            "lineHeight": "2.25rem",
            "capHeight": "0.957375rem",
            "trims": {
              "capHeightTrim": "-0.4366em",
              "baselineTrim": "-0.4626em"
            }
          }
        },
        "3": {
          "mobile": {
            "fontSize": "1.1875rem",
            "lineHeight": "1.5rem",
            "capHeight": "0.790875rem",
            "trims": {
              "capHeightTrim": "-0.2856em",
              "baselineTrim": "-0.3116em"
            }
          },
          "tablet": {
            "fontSize": "1.1875rem",
            "lineHeight": "1.75rem",
            "capHeight": "0.790875rem",
            "trims": {
              "capHeightTrim": "-0.3908em",
              "baselineTrim": "-0.4168em"
            }
          }
        },
        "4": {
          "mobile": {
            "fontSize": "1.0625rem",
            "lineHeight": "1.25rem",
            "capHeight": "0.707625rem",
            "trims": {
              "capHeightTrim": "-0.2422em",
              "baselineTrim": "-0.2682em"
            }
          },
          "tablet": {
            "fontSize": "1.0625rem",
            "lineHeight": "1.75rem",
            "capHeight": "0.707625rem",
            "trims": {
              "capHeightTrim": "-0.4775em",
              "baselineTrim": "-0.5035em"
            }
          }
        }
      }
    },
    "text": {
      "xsmall": {
        "mobile": {
          "fontSize": "0.8125rem",
          "lineHeight": "1.25rem",
          "capHeight": "0.541125rem",
          "trims": {
            "capHeightTrim": "-0.4232em",
            "baselineTrim": "-0.4492em"
          }
        },
        "tablet": {
          "fontSize": "0.8125rem",
          "lineHeight": "1.25rem",
          "capHeight": "0.541125rem",
          "trims": {
            "capHeightTrim": "-0.4232em",
            "baselineTrim": "-0.4492em"
          }
        }
      },
      "small": {
        "mobile": {
          "fontSize": "0.9375rem",
          "lineHeight": "1.25rem",
          "capHeight": "0.624375rem",
          "trims": {
            "capHeightTrim": "-0.3207em",
            "baselineTrim": "-0.3467em"
          }
        },
        "tablet": {
          "fontSize": "0.9375rem",
          "lineHeight": "1.25rem",
          "capHeight": "0.624375rem",
          "trims": {
            "capHeightTrim": "-0.3207em",
            "baselineTrim": "-0.3467em"
          }
        }
      },
      "standard": {
        "mobile": {
          "fontSize": "1.0625rem",
          "lineHeight": "1.5rem",
          "capHeight": "0.707625rem",
          "trims": {
            "capHeightTrim": "-0.3599em",
            "baselineTrim": "-0.3859em"
          }
        },
        "tablet": {
          "fontSize": "1.0625rem",
          "lineHeight": "1.5rem",
          "capHeight": "0.707625rem",
          "trims": {
            "capHeightTrim": "-0.3599em",
            "baselineTrim": "-0.3859em"
          }
        }
      },
      "large": {
        "mobile": {
          "fontSize": "1.1875rem",
          "lineHeight": "1.75rem",
          "capHeight": "0.790875rem",
          "trims": {
            "capHeightTrim": "-0.3908em",
            "baselineTrim": "-0.4168em"
          }
        },
        "tablet": {
          "fontSize": "1.1875rem",
          "lineHeight": "1.75rem",
          "capHeight": "0.790875rem",
          "trims": {
            "capHeightTrim": "-0.3908em",
            "baselineTrim": "-0.4168em"
          }
        }
      }
    }
  },
  "name": "Brighte web: light",
  "backgroundInteractions": {
    "none": "#ffffff",
    "primaryActive": "#108663",
    "primaryHover": "#00c28d",
    "primaryLowHover": "#edfaf5",
    "primaryLowActive": "#c8eada",
    "secondaryActive": "#e58f27",
    "secondaryHover": "#ffbb66",
    "secondaryLowHover": "#fff5eb",
    "secondaryLowActive": "#fdddc4",
    "neutralHover": "#f1f4fb",
    "neutralActive": "#dce1ec",
    "neutralLowHover": "#f1f4fb",
    "neutralLowActive": "#dce1ec",
    "cautionLowHover": "#fdddc4",
    "cautionLowActive": "#face9b",
    "criticalActive": "#c81b0e",
    "criticalHover": "#f53841",
    "criticalLowHover": "#ffdad7",
    "criticalLowActive": "#fec1b5",
    "infoLowHover": "#d0e4ff",
    "infoLowActive": "#b7d2f4",
    "positiveHover": "#1e9c65",
    "positiveActive": "#327e59",
    "positiveLowHover": "#cde9d2",
    "positiveLowActive": "#b1dab9"
  },
  "contentWidth": {
    "xsmall": 400,
    "small": 660,
    "medium": 940,
    "large": 1280,
    "xlarge": 1400
  },
  "elevation": {
    "dropdownBlanket": 90,
    "dropdown": 100,
    "sticky": 200,
    "modalBlanket": 290,
    "modal": 300,
    "notification": 400
  },
  "shadow": {
    "small": "0 1px 2px rgba(0, 0, 0, 0.05)",
    "medium": "0 2px 8px rgba(0, 0, 0, 0.04)",
    "large": "0 6px 12px rgba(0, 0, 0, 0.1)"
  },
  "animation": {
    "standard": {
      "duration": 300,
      "easing": "cubic-bezier(0.2, 0, 0, 1)"
    }
  },
  "backgroundLightness": {
    "muted": "dark",
    "disabled": "light",
    "backdrop": "dark",
    "body": "light",
    "surface": "light",
    "surfaceMuted": "light",
    "surfacePressed": "light",
    "fieldAccent": "dark",
    "input": "light",
    "inputPressed": "light",
    "inputDisabled": "light",
    "accent": "dark",
    "accentMuted": "light",
    "neutral": "light",
    "neutralLow": "light",
    "primary": "dark",
    "primaryLow": "light",
    "primaryMuted": "light",
    "secondary": "light",
    "secondaryLow": "light",
    "secondaryMuted": "light",
    "caution": "dark",
    "cautionLow": "light",
    "cautionMuted": "light",
    "critical": "dark",
    "criticalLow": "light",
    "criticalMuted": "light",
    "info": "dark",
    "infoLow": "light",
    "infoMuted": "light",
    "positive": "dark",
    "positiveLow": "light",
    "positiveMuted": "light",
    "infoLight": "light",
    "criticalLight": "light",
    "positiveLight": "light",
    "cautionLight": "light"
  },
  "utils": {}
}
© 2023 Brighte Capital Pty Ltd