Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Take your shot of Vitamin!

Take your shot of Vitamin!

Decathlon has more than 160 frontend products, including 50 dedicated to mobile applications. Due to this context, it is hard to align the user interface across all these projects while respecting the platform.

Vitamin is a Design System developed by Decathlon as a product which can be adapted to any context and with multiple technical implementations for Android, iOS and Web. In theory, you can use this Design System in your application and customize it to fit your theme and your needs.

In this presentation, I'll focus on Vitamin Compose, the design and technical architecture, biases and what are the next steps.

Gerard

March 23, 2023
Tweet

More Decks by Gerard

Other Decks in Technology

Transcript

  1. @GerardPaligot
    TAKE YOUR SHOT OF VITAMIN!
    Cross platform Design System

    View Slide

  2. VITAMIN? CROSS DESIGN SYSTEM!

    View Slide

  3. IMPLEMENTATIONS
    2,026,487 Figma instances
    519 Editors
    4411 Viewers
    1,501,741 Npm downloads
    4 variants (CSS, Svelte, Vue, React)
    208 stars
    356,041 Maven downloads
    2 variants (XML, Compose)
    237 stars
    2 variants (UIKit, SwiftUI)
    28 stars

    View Slide

  4. COMPOSE IMPLEMENTATION

    View Slide

  5. COLOR PALETTE
    object VitaminPalette {
    val vtmnPurple50 = Color(242, 237, 242)
    val vtmnPurple100 = Color(220, 207, 221)
    val vtmnPurple200 = Color(172, 141, 175)
    val vtmnPurple300 = Color(150, 111, 154)
    val vtmnPurple400 = Color(108, 78, 111)
    val vtmnPurple500 = Color(91, 65, 93)
    val vtmnPurple600 = Color(73, 53, 75)
    val vtmnPurple700 = Color(44, 32, 45)
    !" same for blue, green, conifer, yellow,
    !" orange, red and grey
    }

    View Slide

  6. SEMANTIC COLORS
    val vtmnLightColors = VitaminColors(
    vtmnBackgroundPrimary = VitaminPalette.vtmnWhite,
    vtmnBackgroundSecondary = VitaminPalette.vtmnGrey50,
    vtmnBackgroundTertiary = VitaminPalette.vtmnGrey100,
    vtmnBackgroundBrandPrimary = VitaminPalette.vtmnBlue400,
    vtmnBackgroundBrandSecondary = VitaminPalette.vtmnBlue50,
    vtmnBackgroundAccent = VitaminPalette.vtmnYellow400,
    vtmnBackgroundDiscount = VitaminPalette.vtmnRed400,
    vtmnBackgroundPrimaryReversed = VitaminPalette.vtmnBlack,
    vtmnBackgroundBrandPrimaryReversed = VitaminPalette.vtmnWhite,
    !" same for contents, borders and decoratives
    )
    !" same for vtmnDarkColors

    View Slide

  7. FONT FAMILY
    private val robotoCondensed = FontFamily(
    Font(R.font.roboto_condensed_regular, FontWeight.Normal, FontStyle.Normal),
    Font(R.font.roboto_condensed_regularitalic, FontWeight.Normal, FontStyle.Italic),
    Font(R.font.roboto_condensed_bold, FontWeight.Bold, FontStyle.Normal),
    Font(R.font.roboto_condensed_bolditalic, FontWeight.Bold, FontStyle.Italic),
    Font(R.font.roboto_condensed_light, FontWeight.Light, FontStyle.Normal),
    Font(R.font.roboto_condensed_lightitalic, FontWeight.Light, FontStyle.Italic),
    )
    private val roboto = FontFamily(
    Font(R.font.roboto_regular, FontWeight.Normal, FontStyle.Normal),
    Font(R.font.roboto_italic, FontWeight.Normal, FontStyle.Italic),
    Font(R.font.roboto_bold, FontWeight.Bold, FontStyle.Normal),
    Font(R.font.roboto_bolditalic, FontWeight.Bold, FontStyle.Italic),
    Font(R.font.roboto_light, FontWeight.Light, FontStyle.Normal),
    Font(R.font.roboto_lightitalic, FontWeight.Light, FontStyle.Italic),
    )

    View Slide

  8. SEMANTIC TYPOGRAPHY
    val vtmnTypography = VitaminTypography(
    h1 = TextStyle(
    fontFamily = robotoCondensed,
    fontSize = 42.sp,
    fontWeight = FontWeight.W700,
    lineHeight = 44.sp
    ),
    !" h2, h3, h4, h5, h6, subtitle1, subtitle2
    text1 = TextStyle(
    fontFamily = roboto,
    fontSize = 17.sp,
    fontWeight = FontWeight.W400,
    lineHeight = 28.sp
    ),
    !" text2, text3, text1 bold, text2 bold and text3 bold
    button = TextStyle(
    fontFamily = roboto,
    fontSize = 16.sp,
    fontWeight = FontWeight.W700,
    lineHeight = 16.sp
    ),
    !" caption, overline
    )

    View Slide

  9. SEMANTIC SHAPES
    private val radius100 = 4.dp
    private val radius200 = 8.dp
    private val radius300 = 12.dp
    private val radius400 = 16.dp
    private val radius500 = 20.dp
    private val radius600 = 24.dp
    private val radius700 = 32.dp
    private val radius800 = 48.dp
    val vtmnShapes = VitaminShapes(
    radius100 = RoundedCornerShape(radius100),
    radius200 = RoundedCornerShape(radius200),
    radius300 = RoundedCornerShape(radius300),
    radius400 = RoundedCornerShape(radius400),
    radius500 = RoundedCornerShape(radius500),
    radius600 = RoundedCornerShape(radius600),
    radius700 = RoundedCornerShape(radius700),
    radius800 = RoundedCornerShape(radius800)
    )
    Radius 100
    Radius 200
    Radius 300
    Radius 400
    Radius 500
    Radius 600
    Radius 700
    Radius 800

    View Slide

  10. TopAppBar
    Vitamin Specification

    View Slide

  11. MATERIAL 2
    @Composable
    fun TopAppBar(
    title: @Composable () !# Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable (() !# Unit)? = null,
    actions: @Composable RowScope.() !# Unit = {},
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation
    )

    View Slide

  12. VITAMIN
    object VitaminTopBars {
    private const val MAX_ACTIONS = 3
    @Composable
    fun Primary(
    title: String,
    modifier: Modifier = Modifier,
    maxActions: Int = MAX_ACTIONS,
    actions: List = emptyList(),
    expandedMenu: MutableState = remember { mutableStateOf(false) },
    colors: TopBarColors = VitaminTopBarColors.primary(),
    onDismissOverflowMenu: (() !# Unit)? = null,
    overflowIcon: (@Composable VitaminMenuIconButtons.() !# Unit)? = null,
    navigationIcon: (@Composable VitaminNavigationIconButtons.() !# Unit)? = null
    )
    }

    View Slide

  13. VITAMIN
    object VitaminTopBars {
    private const val MAX_ACTIONS = 3
    @Composable
    fun Primary(
    title: String,
    modifier: Modifier = Modifier,
    maxActions: Int = MAX_ACTIONS,
    actions: List = emptyList(),
    expandedMenu: MutableState = remember { mutableStateOf(false) },
    colors: TopBarColors = VitaminTopBarColors.primary(),
    onDismissOverflowMenu: (() !# Unit)? = null,
    overflowIcon: (@Composable VitaminMenuIconButtons.() !# Unit)? = null,
    navigationIcon: (@Composable VitaminNavigationIconButtons.() !# Unit)? = null
    )
    }

    View Slide

  14. VITAMIN
    open class ActionItem(
    val icon: Painter? = null,
    val contentDescription: String?,
    val content: @Composable () !# Unit = {},
    val onClick: () !# Unit,
    )

    View Slide

  15. VITAMIN
    VitaminTopBars.Primary(
    title = "Title",
    actions = arrayListOf(
    ActionItem(
    icon = painterResource(R.drawable.ic_vtmn_android_line),
    contentDescription = "Android",
    onClick = { }
    ),
    ActionItem(
    contentDescription = null,
    content = { Text("Windows") },
    onClick = { }
    ),
    ActionItem(
    icon = painterResource(R.drawable.ic_vtmn_apple_line),
    contentDescription = "Apple",
    onClick = { }
    )
    )
    )

    View Slide

  16. MATERIAL 2
    TopAppBar(
    title = { Text(text = "Title") },
    actions = {
    IconButton(onClick = { }) {
    Icon(
    painter = painterResource(R.drawable.ic_vtmn_android_line),
    contentDescription = "Android"
    )
    }
    TextButton(onClick = { }) {
    Text(text = "Windows")
    }
    IconButton(onClick = { }) {
    Icon(
    painter = painterResource(R.drawable.ic_vtmn_apple_line),
    contentDescription = "Apple"
    )
    }
    }
    )

    View Slide

  17. VITAMIN
    object VitaminTopBars {
    private const val MAX_ACTIONS = 3
    @Composable
    fun Primary(
    title: String,
    modifier: Modifier = Modifier,
    maxActions: Int = MAX_ACTIONS,
    actions: List = emptyList(),
    expandedMenu: MutableState = remember { mutableStateOf(false) },
    colors: TopBarColors = VitaminTopBarColors.primary(),
    onDismissOverflowMenu: (() !# Unit)? = null,
    overflowIcon: (@Composable VitaminMenuIconButtons.() !# Unit)? = null,
    navigationIcon: (@Composable VitaminNavigationIconButtons.() !# Unit)? = null
    )
    }

    View Slide

  18. VITAMIN
    object VitaminTopBarColors {
    @Composable
    fun primary(
    background: Color = VitaminTheme.colors.vtmnBackgroundPrimary,
    contentColor: Color = VitaminTheme.colors.vtmnContentPrimary,
    iconColor: Color = VitaminTheme.colors.vtmnContentPrimary
    ): TopBarColors = !" !!$
    @Composable
    fun contextual(
    background: Color = VitaminTheme.colors.vtmnContentActive,
    contentColor: Color = VitaminTheme.colors.vtmnContentPrimaryReversed,
    iconColor: Color = VitaminTheme.colors.vtmnContentPrimaryReversed
    ): TopBarColors = !" !!$
    }

    View Slide

  19. MATERIAL 2
    !" primary
    TopAppBar(
    title = { Text(text = "Title") },
    backgroundColor = MaterialTheme.colors.surface,
    contentColor = MaterialTheme.colors.onSurface
    )
    !" contextual
    TopAppBar(
    title = { Text(text = "Title") },
    backgroundColor = MaterialTheme.colors.primarySurface,
    contentColor = MaterialTheme.colors.onPrimary
    )

    View Slide

  20. VITAMIN
    object VitaminTopBars {
    private const val MAX_ACTIONS = 3
    @Composable
    fun Primary(
    title: String,
    modifier: Modifier = Modifier,
    maxActions: Int = MAX_ACTIONS,
    actions: List = emptyList(),
    expandedMenu: MutableState = remember { mutableStateOf(false) },
    colors: TopBarColors = VitaminTopBarColors.primary(),
    onDismissOverflowMenu: (() !# Unit)? = null,
    overflowIcon: (@Composable VitaminMenuIconButtons.() !# Unit)? = null,
    navigationIcon: (@Composable VitaminNavigationIconButtons.() !# Unit)? = null
    )
    }

    View Slide

  21. VITAMIN
    object VitaminNavigationIconButtons {
    @Composable
    fun PreviousPage(
    !" !!$
    )
    @Composable
    fun Drawer(
    !" !!$
    )
    @Composable
    fun Context(
    !" !!$
    )
    @Composable
    fun Close(
    !" !!$
    )
    }

    View Slide

  22. VITAMIN
    object VitaminNavigationIconButtons {
    @Composable
    fun PreviousPage(
    onClick: () !# Unit,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    ) {
    IconButtons(
    onClick = onClick,
    modifier = modifier,
    enabled = enabled,
    interactionSource = interactionSource,
    icon = {
    Icon(
    painter = painterResource(R.drawable.ic_vtmn_chevron_left_line),
    contentDescription = contentDescription
    )
    }
    )
    }
    }

    View Slide

  23. VITAMIN
    VitaminTopBars.Primary(
    title = "Title",
    navigationIcon = {
    PreviousPage(
    onClick = { },
    contentDescription = "Come back to previous page"
    )
    }
    )

    View Slide

  24. MATERIAL 2
    TopAppBar(
    title = { Text(text = "Title") },
    navigationIcon = {
    IconButton(
    onClick = { },
    content = {
    Icon(
    painter = painterResource(R.drawable.ic_vtmn_chevron_left_line),
    contentDescription = "Come back to previous page"
    )
    }
    )
    }
    )

    View Slide

  25. VITAMIN
    object VitaminTopBars {
    private const val MAX_ACTIONS = 3
    @Composable
    fun Primary(
    title: String,
    modifier: Modifier = Modifier,
    maxActions: Int = MAX_ACTIONS,
    actions: List = emptyList(),
    expandedMenu: MutableState = remember { mutableStateOf(false) },
    colors: TopBarColors = VitaminTopBarColors.primary(),
    onDismissOverflowMenu: (() !# Unit)? = null,
    overflowIcon: (@Composable VitaminMenuIconButtons.() !# Unit)? = null,
    navigationIcon: (@Composable VitaminNavigationIconButtons.() !# Unit)? = null
    )
    }

    View Slide

  26. VITAMIN
    object VitaminMenuIconButtons {
    @Composable
    fun More(
    onClick: () !# Unit,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    ) {
    IconButtons(
    onClick = onClick,
    modifier = modifier,
    enabled = enabled,
    interactionSource = interactionSource,
    icon = {
    Icon(
    painter = painterResource(R.drawable.ic_vtmn_more_2_line),
    contentDescription = contentDescription
    )
    }
    )
    }
    }

    View Slide

  27. VITAMIN
    @Composable
    internal fun OverflowMenu(
    actions: List,
    modifier: Modifier = Modifier,
    expanded: MutableState = remember { mutableStateOf(false) },
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    onDismissRequest: (() !# Unit)? = null,
    overflowIcon: @Composable VitaminMenuIconButtons.() !# Unit
    )

    View Slide

  28. VITAMIN
    object VitaminMenus {
    @Composable
    fun Dropdown(
    anchor: @Composable () !# Unit,
    modifier: Modifier = Modifier,
    expanded: MutableState = remember { mutableStateOf(false) },
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    onDismissRequest: () !# Unit = {},
    children: @Composable VitaminMenuItems.() !# Unit
    )
    }

    View Slide

  29. VITAMIN
    val expanded = remember { mutableStateOf(false) }
    VitaminTopBars.Primary(
    title = "Title",
    overflowIcon = {
    More(
    onClick = { expanded.value = true },
    contentDescription = "More",
    )
    },
    expandedMenu = expanded
    )

    View Slide

  30. MATERIAL 2
    @Composable
    fun OverflowMenu() {
    val expanded = remember { mutableStateOf(false) }
    Box {
    IconButton(onClick = { expanded.value = true }) {
    Icon(
    painter = painterResource(id = R.drawable.ic_vtmn_more_2_line),
    contentDescription = "More"
    )
    }
    DropdownMenu(
    expanded = expanded.value,
    onDismissRequest = { expanded.value = false },
    content = {
    DropdownMenuItem(
    onClick = { },
    content = {
    Text(text = "Sub menu 1")
    }
    )
    }
    )
    }
    }

    View Slide

  31. MATERIAL 2
    TopAppBar(
    title = { Text(text = "Title") },
    actions = {
    OverflowMenu()
    }
    )

    View Slide

  32. WHAT’S NEXT?!

    View Slide

  33. VITAMIN ! ACCESSIBILITY

    View Slide

  34. VITAMIN ! TESTING
    Button
    Button
    Button
    Button
    Button
    Button
    Button
    Button
    Button
    Button
    Button
    Button

    View Slide

  35. VITAMIN ! TOKENISATION

    View Slide

  36. VITAMIN ! MATERIAL
    @Composable
    fun VitaminTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () !# Unit
    ) {
    val vtmnColors = if (darkTheme) vtmnDarkColors else vtmnLightColors
    ProvideVitaminResources(vtmnColors, vtmnTypography, vtmnShapes) {
    MaterialTheme(
    colors = mdColors(darkTheme, palette),
    typography = mdTypography,
    shapes = mdShapes,
    content = content
    )
    }
    }

    View Slide

  37. VITAMIN ! MATERIAL
    fun mdColors(
    darkTheme: Boolean,
    vtmnColors: VitaminColors
    ) = Colors(
    primary = vtmnColors.vtmnBackgroundBrandPrimary,
    primaryVariant = vtmnColors.vtmnBackgroundBrandPrimary,
    onPrimary = vtmnColors.vtmnContentPrimaryReversed,
    secondary = vtmnColors.vtmnBackgroundAccent,
    secondaryVariant = vtmnColors.vtmnBackgroundAccent,
    onSecondary = vtmnColors.vtmnContentPrimaryReversed,
    background = vtmnColors.vtmnBackgroundSecondary,
    onBackground = vtmnColors.vtmnContentPrimary,
    surface = vtmnColors.vtmnBackgroundPrimary,
    onSurface = vtmnColors.vtmnContentPrimary,
    error = vtmnColors.vtmnContentNegative,
    onError = vtmnColors.vtmnContentPrimaryReversed,
    isLight = !darkTheme
    )

    View Slide

  38. REFERENCES
    Vitamin Figma Community https://www.figma.com/@decathlon
    Vitamin Compose https://github.com/Decathlon/vitamin-compose
    Vitamin Android https://github.com/Decathlon/vitamin-android
    Vitamin iOS https://github.com/Decathlon/vitamin-ios
    Vitamin Web https://github.com/Decathlon/vitamin-web
    Vitamin Slack https://decathlon-design.slack.com/
    Conferences4Hall https://github.com/GerardPaligot/conferences4hall

    View Slide

  39. @GerardPaligot
    TAKE YOUR SHOT OF VITAMIN!
    Thank you! Any questions?

    View Slide

  40. Foundation

    View Slide

  41. HEADLINE1
    Headline2
    Headline3
    Headline4
    Headline5
    Headline6
    Subtitle1
    Subtitle2
    Body/Regular/Text1
    Body/Regular/Text2
    Body/Regular/Text3
    Body/Regular/Text1
    Body/Regular/Text2
    Body/Regular/Text3
    Caption
    Overline
    Radius 100
    Radius 200
    Radius 300
    Radius 400
    Radius 500
    Radius 600
    Radius 700
    Radius 800
    Elevation 1
    Elevation 2
    Elevation 3
    Elevation 4
    Elevation 6
    Elevation 8
    Elevation 12
    Elevation 16
    Elevation 24

    View Slide

  42. HEADLINE1
    Headline2
    Headline3
    Headline4
    Headline5
    Headline6
    Subtitle1
    Subtitle2
    Body/Regular/Text1
    Body/Regular/Text2
    Body/Regular/Text3
    Body/Regular/Text1
    Body/Regular/Text2
    Body/Regular/Text3
    Caption
    Overline
    Radius 100
    Radius 200
    Radius 300
    Radius 400
    Radius 500
    Radius 600
    Radius 700
    Radius 800
    Elevation 1
    Elevation 2
    Elevation 3
    Elevation 4
    Elevation 6
    Elevation 8
    Elevation 12
    Elevation 16
    Elevation 24

    View Slide

  43. BUTTONS
    Button
    Button
    Button Button
    Button Button

    View Slide

  44. BUTTONS
    Button
    Button
    Button Button
    Button Button

    View Slide

  45. CARDS
    Android

    View Slide

  46. Purple 700
    #2C202D
    Purple 600
    #49354B
    Purple 500
    #5B415D
    Purple 400
    #6C4E6F
    Purple 300
    #966F9A
    Purple 200
    #AC8DAF
    Purple 100
    #DCCFDD
    Purple 50
    #F2EDF2
    Blue 50
    #E7F3F9
    Blue 100
    #BEDEEF
    Blue 200
    #7EBEE0
    Blue 300
    #3D9ACC
    Blue 400
    #007DBC
    Blue 450
    #0071B5
    Blue 500
    #00689D
    Blue 600
    #00537D
    Blue 700
    #012B49
    Green 50
    #E4F9F3
    Green 100
    #BEEFE2
    Green 200
    #7CDFC4
    Green 300
    #21CE9C
    Green 400
    #02BE8A
    Green 500
    #029E73
    Green 600
    #017F5C
    Green 700
    #006F43
    Conifer 50
    #EAFBE8
    Conifer 100
    #CBF0C7
    Conifer 200
    #88D77F
    Conifer 300
    #74C76A
    Conifer 400
    #23A942
    Conifer 500
    #41A036
    Conifer 600
    #378D2E
    Conifer 700
    #256C1D
    Yellow 50
    #FFFEF0
    Yellow 100
    #FFFBC7
    Yellow 200
    #FFF58D
    Yellow 300
    #FFF370
    Yellow 400
    #FFEA28
    Yellow 500
    #BCB02C
    Yellow 600
    #999028
    Yellow 700
    #67611B
    Orange 50
    #FFF3ED
    Orange 100
    #FFE4D6
    Orange 200
    #FAC3A5
    Orange 300
    #FA9C69
    Orange 400
    #FF600A
    Orange 500
    #C15E29
    Orange 600
    #007DBC
    Orange 700
    #007DBC
    Red 50
    #FEECED
    Red 100
    #FEC9CB
    Red 200
    #FD9297
    Red 300
    #FD7278
    Red 400
    #E3262F
    Red 500
    #AB0009
    Red 600
    #870007
    Red 700
    #5A0005
    Grey 50
    #F7F8F9
    Grey 100
    #EFF1F3
    Grey 200
    #D9DDE1
    White
    #FFFFFF
    Grey 300
    #B3BAC3
    Grey 400
    #8996A2
    Grey 500
    #687787
    Grey 600
    #4E5D6B
    Grey 700
    #344450
    Grey 800
    #1A2A34
    Grey 900
    #142129
    Black
    #001018

    View Slide

  47. Background
    Primary
    White
    Secondary
    Grey 50
    Tertiary
    Grey 100
    Brand Primary
    Blue 400
    Brand Secondary
    Blue 50
    Accent
    Yellow 400
    Alert
    Red 400
    Primary Reversed
    Black
    Brand Primary Reversed
    White
    Content
    Primary
    Black
    Secondary
    Grey 600
    Tertiary
    Grey 500
    Action
    Blue 500
    Active
    Blue 400
    Inactive
    Grey 400
    Negative
    Red 400
    Warning
    Orange 400
    Positive
    Conifer 400
    Information
    Blue 400
    Accent
    Black
    Visited
    Purple 400
    Primary Reversed
    White
    Action Reversed
    White
    Visited Reversed
    Purple 200
    Border
    Primary
    Grey 200
    Secondary
    Grey 100
    Tertiary
    White
    Active
    Blue 400
    Inactive
    Grey 400
    Negative
    Red 400
    Warning
    Orange 400
    Positive
    Conifer 400
    Information
    Blue 400
    Primary Reversed
    Black
    Decorative
    Gravel
    Grey 100
    Brick
    Red 100
    Saffron
    Orange 100
    Gold
    Yellow 100
    Jade
    Conifer 100
    Emerald
    Green 100
    Cobalt
    Blue 100
    Amethyst
    Purple 100

    View Slide

  48. Background
    Primary
    Grey 900
    Secondary
    Black
    Tertiary
    Grey 800
    Brand Primary
    Blue 300
    Brand Secondary
    Blue 700
    Accent
    Yellow 400
    Alert
    Red 300
    Primary Reversed
    White
    Brand Primary Reversed
    Black
    Content
    Primary
    White
    Secondary
    Grey 200
    Tertiary
    Grey 300
    Action
    Blue 200
    Active
    Blue 300
    Inactive
    Grey 500
    Negative
    Red 300
    Warning
    Orange 300
    Positive
    Conifer 300
    Information
    Blue 300
    Accent
    Black
    Visited
    Purple 300
    Primary Reversed
    Black
    Action Reversed
    Black
    Visited Reversed
    Purple 300
    Border
    Primary
    Grey 700
    Secondary
    Black
    Tertiary
    Grey 800
    Active
    Blue 300
    Inactive
    Grey 500
    Negative
    Red 300
    Warning
    Orange 300
    Positive
    Conifer 300
    Information
    Blue 300
    Primary Reversed
    White
    Decorative
    Gravel
    Grey 600
    Brick
    Red 600
    Saffron
    Orange 600
    Gold
    Yellow 700
    Jade
    Conifer 700
    Emerald
    Green 600
    Cobalt
    Blue 600
    Amethyst
    Purple 600

    View Slide

  49. View Slide