Colours

Five colours. One accent.

White pages, Black text, Highlight as the one accent fill and Dark Purple for accent text. Everything else supports these.

Core

The palette.

  • White

    #FFFFFF

    --sona8-white

    The page.

  • Light Grey

    #FCFBFF

    --sona8-light-grey

    Cards and bands that set a section apart.

  • Highlight

    #9677FF

    --sona8-highlight

    The one accent fill: primary button, chips, selection, focus, the lead chart series. Never text on white.

    3.29:1 on white, so never text. Black on Highlight 5.82:1.

  • Dark Purple

    #211F54

    --sona8-dark-purple

    Accent text and links, pressed buttons, the footer and dark fields.

    15.12:1 on white. White on Dark Purple 15.12:1.

  • Black

    #0F0F0F

    --sona8-black

    Text, the logo, the client logo band.

Support

For interface detail.

  • Muted text

    #5C5A6E

    --sona8-muted

    Secondary text.

    6.68:1 on white.

  • Highlight hover

    #8466F2

    --sona8-highlight-hover

    Primary button on hover.

  • Hairline

    #E7E5EF

    --sona8-hairline

    The one hairline for cards, inputs and tables.

  • Input border

    #D4D1E0

    --sona8-input

    Input borders.

  • Chip fill

    #F1F0F7

    --sona8-chip

    Chips, ghost hover, free days in a calendar.

States

Only when a person needs to act.

  • Destructive

    #C42B3C

    --sona8-destructive

    Errors and deleting. Always with an icon and a word.

  • Warning

    #8A5A00

    --sona8-warning

    Something needs a look. Always with an icon and a word.

  • Success

    #1C7A55

    --sona8-success

    Done. Always with an icon and a word.

Charts

Series and scales.

Chart series, in this order
  1. 1. #9677FF
  2. 2. #211F54
  3. 3. #5B44C9
  4. 4. #0F0F0F
  5. 5. #7A788C
Ordinal ramp, light to dark
  1. 1. #D6CCFF
  2. 2. #B3A0FF
  3. 3. #9677FF
  4. 4. #5B44C9
  5. 5. #211F54

Rules

Flat fields, one accent.

  • No gradients anywhere: buttons, covers, backgrounds and charts are flat.
  • No glow. Shadows only in Dark Purple at low opacity.
  • Highlight is a fill. Text on it is Black; White on Highlight fails contrast.
  • State colours only where a person needs to act or read a state, and never as the only signal.
  • No red-to-green scales for opinions.