Colors

Convey meaning through color.

Out of the box you get access to all colors in the Sonnat Design System. You can use any color anywhere, all colors change with the theme.

import { useTheme } from '@sonnat/ui/styles'

const Component = () => {
  const { colors, swatches } = useTheme()

  ...
}

import { makeStyles } from "@sonnat/ui/styles";

const useStyles = makeStyles(
  ({ colors, swatches }) => ({
    root: {
      ...
    },
    ...
  }),
  { name: "MyComponentStyle" }
);

Primary Color

Represents primary interface elements for a user. It's the color displayed most frequently across your app's screens and components.

Secondary Color

Represents secondary interface elements for a user. It provides more ways to accent and distinguish your product. Having it is optional.

Status Colors

Represents a clear message as well as status, such as success, error, failure, reminder, link and so on. Status color selection need to comply with the user's basic understanding of color.

Error

Indicates errors in components, such as invalid text in a text field.

Success

Indicates the successful completion of an action.

Warning

Represents potentially dangerous actions or important messages.

Info

Presents information to the user that is neutral and not necessarily important.

Swatches

Here is a collection of colors, i.e. hues and their shades. This color palette has been designed with colors that work harmoniously with each other.