Odyssey styleguide

Colors

  • #47BAAF

    @primary
    Primary (app specific)
  • #269189

    @secondary
    Secondary (app specific)
  • #D3EFEB

    @tertiary
    Tertiary (app specific)
  • #F9893D

    @accent
    Accent (app specific)
  • #FF4646

    @error
    Error
  • #F9893D

    @pending
    Pending
  • #FFCA00

    @pending-yellow
    Pending Variation
  • #2c8FFF

    @attention
    Attention
  • #4CD964

    @success
    Success
  • #17252A

    @dark
    Dark
  • #293639

    @dark-emphasis
    Dark Emphasis
  • #2D3A3E

    @dark-background
    Dark Background
  • #17252ab3

    @dark-70
    Dark 70% Transparency
  • #17252a80

    @dark-50
    Dark 50% Transparency
  • #17252a4d

    @dark-30
    Dark 30% Transparency
  • #17252a1a

    @dark-10
    Dark 10% Transparency
  • #FFFFFF

    @white
    White
  • #F6F6F6

    @white-emphasis
    White Emphasis
  • #FBFBFB

    @white-background
    White Background
  • #FFFFFFb3

    @white-70
    White 70% Transparency
  • #FFFFFF80

    @white-50
    White 50% Transparency
  • #FFFFFF4d

    @white-30
    White 30% Transparency
  • #FFFFFF1a

    @white-10
    White 10% Transparency
  • #17252A

    @absolute-dark
    Dark Independent From The Theme
  • #FFFFFF

    @absolute-white
    White Independent From The Theme

Dark Colors

  • #47BAAF

    @primary
    Primary (app specific)
  • #269189

    @secondary
    Secondary (app specific)
  • #D3EFEB

    @tertiary
    Tertiary (app specific)
  • #F9893D

    @accent
    Accent (app specific)
  • #FF4646

    @error
    Error
  • #F9893D

    @pending
    Pending
  • #FFCA00

    @pending-yellow
    Pending Variation
  • #2c8FFF

    @attention
    Attention
  • #4CD964

    @success
    Success
  • #FFFFFF

    @dark
    White
  • #F6F6F6

    @dark-emphasis
    White Emphasis
  • #FBFBFB

    @dark-background
    White Background
  • #FFFFFFb3

    @dark-70
    White 70% Transparency
  • #FFFFFF80

    @dark-50
    White 50% Transparency
  • #FFFFFF4d

    @dark-30
    White 30% Transparency
  • #FFFFFF1a

    @dark-10
    White 10% Transparency
  • #17252A

    @white
    Dark
  • #293639

    @white-emphasis
    Dark Emphasis
  • #2D3A3E

    @white-background
    Dark Background
  • #17252ab3

    @white-70
    Dark 70% Transparency
  • #17252a80

    @white-50
    Dark 50% Transparency
  • #17252a4d

    @white-30
    Dark 30% Transparency
  • #17252a1a

    @white-10
    Dark 10% Transparency
  • #17252A

    @absolute-dark
    Dark Independent From The Theme
  • #FFFFFF

    @absolute-white
    White Independent From The Theme