OpenGov IconCapital Design System

Token Library

All tokens supplied by Capital Design System.

Colors

Grays

NameValueExample
color-whitergba(255, 255, 255, 1)#FFFFFF
color-gray-50rgba(247, 249, 250, 1)#F7F9FA
color-gray-100rgba(239, 242, 245, 1)#EFF2F5
color-gray-200rgba(223, 227, 232, 1)#DFE3E8
color-gray-300rgba(206, 210, 214, 1)#CED2D6
color-gray-400rgba(181, 185, 189, 1)#B5B9BD
color-gray-500rgba(154, 157, 161, 1)#9A9DA1
color-gray-600rgba(130, 132, 135, 1)#828487
color-gray-700rgba(97, 99, 101, 1)#616365
color-gray-800rgba(77, 79, 81, 1)#4D4F51
color-gray-900rgba(56, 59, 61, 1)#383B3D
color-gray-1000rgba(19, 21, 23, 1)#131517

Primary

NameValueExample
color-primary-brandrgba(22, 92, 171, 1)#165CAB
color-primary-mediumrgba(4, 65, 135, 1)#044187
color-primary-darkrgba(7, 48, 92, 1)#07305C
color-primary-selectionrgba(31, 118, 216, 1)#1F76D8
color-primary-selection-a70rgba(31, 118, 216, .7)#1F76D8, Opacity .7
color-primary-selection-a50rgba(31, 118, 216, .5)#1F76D8, Opacity .5
color-primary-hoverrgba(194, 229, 255, 1)#C2E5FF
color-primary-hover-a50rgba(194, 229, 255, .5)#C2E5FF, Opacity .5
color-primary-hover-lightrgba(224, 242, 255, 1)#E0F2FF
color-primary-focusrgba(0, 149, 255, 1)#0095FF

Semantic

NameValueExample
color-info-50rgba(240, 247, 255, 1)#F0F7FF
color-info-100rgba(217, 235, 255, 1)#D9EBFF
color-info-200rgba(180, 214, 250, 1)#B4D6FA
color-info-300rgba(145, 192, 242, 1)#91C0F2
color-info-400rgba(117, 174, 235, 1)#75AEEB
color-info-500rgba(91, 152, 217, 1)#5B98D9
color-info-600rgba(71, 129, 191, 1)#4781BF
color-info-700rgba(46, 98, 153, 1)#2E6299
color-info-800rgba(29, 70, 115, 1)#1D4673
color-info-900rgba(15, 45, 77, 1)#0F2D4D
color-info-1000rgba(0, 25, 51, 1)#001933
color-error-50rgba(255, 236, 232, 1)#FFECE8
color-error-100rgba(255, 218, 209, 1)#FFDAD1
color-error-200rgba(250, 189, 175, 1)#FABDAF
color-error-300rgba(245, 157, 137, 1)#F59D89
color-error-400rgba(232, 126, 102, 1)#E87E66
color-error-500rgba(224, 105, 79, 1)#E0694F
color-error-600rgba(209, 83, 54, 1)#D15336
color-error-700rgba(178, 62, 36, 1)#B23E24
color-error-800rgba(148, 42, 18, 1)#942A12
color-error-900rgba(107, 28, 11, 1)#6B1C0B
color-error-1000rgba(76, 14, 0, 1)#4C0E00
color-in-progress-50rgba(245, 235, 250, 1)#F5EBFA
color-in-progress-100rgba(236, 215, 245, 1)#ECD7F5
color-in-progress-200rgba(229, 199, 242, 1)#E5C7F2
color-in-progress-300rgba(205, 171, 219, 1)#CDABDB
color-in-progress-400rgba(179, 143, 194, 1)#B38FC2
color-in-progress-500rgba(160, 123, 176, 1)#A07BB0
color-in-progress-600rgba(136, 95, 153, 1)#885F99
color-in-progress-700rgba(107, 71, 122, 1)#6B477A
color-in-progress-800rgba(84, 52, 97, 1)#543461
color-in-progress-900rgba(59, 36, 69, 1)#3B2445
color-in-progress-1000rgba(35, 20, 41, 1)#231429
color-warning-50rgba(255, 238, 219, 1)#FFEEDB
color-warning-100rgba(255, 224, 189, 1)#FFE0BD
color-warning-200rgba(255, 207, 153, 1)#FFCF99
color-warning-300rgba(250, 189, 120, 1)#FABD78
color-warning-400rgba(240, 171, 93, 1)#F0AB5D
color-warning-500rgba(229, 149, 57, 1)#E59539
color-warning-600rgba(219, 131, 31, 1)#DB831F
color-warning-700rgba(199, 113, 16, 1)#C77110
color-warning-800rgba(176, 98, 9, 1)#B06209
color-warning-900rgba(153, 83, 3, 1)#995303
color-warning-1000rgba(112, 60, 0, 1)#703C00

Visualisation

NameValueExample
color-viz-1rgba(71, 129, 191, 1)#4781BF
color-viz-2rgba(161, 187, 229, 1)#A1BBE5
color-viz-3rgba(229, 149, 57, 1)#E59539
color-viz-4rgba(232, 206, 139, 1)#E8CE8B
color-viz-5rgba(111, 93, 168, 1)#6F5DA8
color-viz-6rgba(205, 171, 219, 1)#CDABDB
color-viz-7rgba(61, 153, 144, 1)#3D9990
color-viz-8rgba(124, 207, 180, 1)#7CCFB4
color-viz-9rgba(76, 95, 181, 1)#4C5FB5
color-viz-10rgba(151, 154, 204, 1)#979ACC
color-viz-11rgba(204, 94, 105, 1)#CC5E69
color-viz-12rgba(237, 161, 159, 1)#EDA19F
color-viz-13rgba(70, 146, 176, 1)#4692B0
color-viz-14rgba(139, 212, 214, 1)#8BD4D6
color-viz-15rgba(224, 105, 79, 1)#E0694F
color-viz-16rgba(245, 164, 130, 1)#F5A482
color-viz-17rgba(84, 153, 112, 1)#549970
color-viz-18rgba(154, 217, 164, 1)#9AD9A4
color-viz-19rgba(156, 65, 116, 1)#9C4174
color-viz-20rgba(207, 124, 146, 1)#CF7C92

Typography

Font Family

NameValueExample
base-font"Benton Sans", Arial, sans-serif
Aa Bb Cc
base-font-condensed"Benton Sans Condensed", Arial Narrow, sans-serif
Aa Bb Cc

Font Size

NameValueExample
font-size-maximum3rem48px
Aa
font-size-xxlarge2.5rem40px
Aa
font-size-xlarge1.75rem28px
Aa
font-size-large1.25rem20px
Aa
font-size-default1rem16px
Aa
font-size-small0.875rem14px
Aa
font-size-minimum0.75rem12px
Aa
font-size-base16px
Aa

Letter Spacing

NameValueExample
letter-spacing-default0.0125em
Aa
letter-spacing-cap0.05em
Aa

Line Height

NameValueExample
line-height-default1.5
Aa
Bb
Cc
line-height-tight1.25
Aa
Bb
Cc
line-height-small-font1.125rem
Aa
Bb
Cc

Font Weight

NameValueExample
font-weight-thin100
Aa
font-weight-extra-light200
Aa
font-weight-light300
Aa
font-weight-book400
Aa
font-weight-regular500
Aa
font-weight-medium600
Aa
font-weight-bold700
Aa
font-weight-black800
Aa

Layout

Unit

NameValue
unit-18px8px
unit-quarter$unit-1 / 42px
unit-half$unit-1 / 24px
unit-22 * $unit-116px
unit-33 * $unit-124px
unit-44 * $unit-132px
unit-55 * $unit-140px
unit-66 * $unit-148px
unit-77 * $unit-156px
unit-88 * $unit-164px
unit-99 * $unit-172px
unit-1010 * $unit-180px
unit-1515 * $unit-1120px
unit-2020 * $unit-1160px
unit-2525 * $unit-1200px
unit-3030 * $unit-1240px
unit-3535 * $unit-1280px
unit-4040 * $unit-1320px
unit-4545 * $unit-1360px
unit-5050 * $unit-1400px
unit-5555 * $unit-1440px
unit-6060 * $unit-1500px
unit-6565 * $unit-1540px
unit-7070 * $unit-1580px
unit-7575 * $unit-1620px
unit-8080 * $unit-1660px
unit-9090 * $unit-1700px
unit-100100 * $unit-1740px
unit-110110 * $unit-1780px
unit-120120 * $unit-1820px

Z-Index

NameValue
z-index-overlay1000
z-index-dialog900
z-index-alert800
z-index-flash700
z-index-main-nav600
z-index-form500
z-index-panel400
z-index-main-panel400
z-index-sub-panel400
z-index-header300
z-index-editable200
z-index-content100
z-index-ground1

Media Query

NameValue
mq-xsmallscreen and (max-width: 464px)
mq-smallscreen and (min-width: 465px) and (max-width: 728px)
mq-small-upscreen and (min-width: 465px)
mq-mediumscreen and (min-width: 729px) and (max-width: 1076px)
mq-medium-upscreen and (min-width: 729px)
mq-largescreen and (min-width: 1077px) and (max-width: 1436px)
mq-large-upscreen and (min-width: 1077px)
mq-xlargescreen and (min-width: 1436px)
mq-xlarge-upscreen and (min-width: 1436px)

Containers

Border

NameValueExample
border-transparent1px solid transparent
border-gray-1001px solid $color-gray-100
border-gray-2001px solid $color-gray-200
border-gray-3001px solid $color-gray-300
border-gray-4001px solid $color-gray-400
border-gray-7001px solid $color-gray-700
border-primary-medium1px solid $color-primary-medium
border-primary-dark1px solid $color-primary-dark
border-primary-active1px solid $color-primary-focus
border-primary-focus2px solid $color-primary-focus
border-error-6001px solid $color-error-600
border-error-7001px solid $color-error-700
border-error-8001px solid $color-error-800
border-error-9001px solid $color-error-900
border-success-5001px solid $color-success-500
border-warning-5001px solid $color-warning-500
border-radius-default3px
border-radius-small1px
border-radius-curve10em 5em

Box Shadow

NameValueExample
box-shadow-soft0 2px 4px 0 rgba(19, 21, 23, 0.3)
box-shadow-soft-overlay0 4px 8px 0 rgba(19, 21, 23, 0.6)
box-shadow-soft-selected0 1px 3px 0 rgba(7, 48, 92, 0.5)
box-shadow-hard0 1px 0 0 rgba(181, 185, 189, 1)
box-shadow-hard-hover0 1px 3px 0 rgba(97, 99, 101, 1)
box-shadow-hard-focus0 1px 0 0 rgba(0, 149, 255, 1)
box-shadow-hard-selected0 1px 0 0 rgba(7, 48, 92, 0.5)
box-shadow-inset-darkinset 0 2px 3px 1px rgba(19, 21, 23, 0.6)
box-shadow-inset-lightinset 0 2px 3px 1px rgba(19, 21, 23, 0.3)
box-shadow-above0 2px 4px 0 rgba(19, 21, 23, 0.10)
box-shadow-below0 -2px 4px 0 rgba(19, 21, 23, 0.10)
box-shadow-focus0 0 0 2px $color-primary-focus
box-shadow-focus-wrap0 0 0 1px $color-primary-focus
box-shadow-primaryinset 0 2em 1.8em -1em $color-primary-selection-a70
box-shadow-primary-hoverinset 0 1em 1em -1em $color-primary-selection-a70
box-shadow-neutralinset 0 -2em 1.8em -1em $color-gray-100
box-shadow-neutral-hoverinset 0 -1em 1em -1em $color-gray-100
box-shadow-errorinset 0 2em 1.8em -1em $color-error-600
box-shadow-error-hoverinset 0 1em 1em -1em $color-error-600
box-shadow-neutral-affixinset 0 2em 1.8em -1em $color-gray-50
box-shadow-neutral-affix-hoverinset 0 1em 1em -1em $color-gray-50

Background

NameValueExample
background-primary$color-primary-medium
background-neutral$color-white
background-error$color-error-700
background-neutral-affix$color-gray-200

Gradient

NameValueExample
gradient-successlinear-gradient(-180deg, $color-success-500, $color-success-600)
gradient-warninglinear-gradient(-180deg, $color-warning-500, $color-warning-700)
gradient-errorlinear-gradient(-180deg, $color-error-600, $color-error-700)
gradient-infolinear-gradient(-180deg, $color-info-600, $color-info-700)
gradient-chromelinear-gradient(-180deg, $color-gray-50, $color-gray-300)

Animation

Transition

NameValue
transition-naturalall 300ms ease
transition-entranceall 300ms ease-out
transition-exitall 300ms ease-in

Banners

NameValueExample
banner-border-info1px solid $color-info-600
banner-border-success1px solid $color-success-600
banner-border-error1px solid $color-error-600
banner-border-warning1px solid $color-warning-600
banner-border-neutral$border-gray-300
banner-border-light$border-gray-300
NameValueExample
banner-background-info$color-info-50
banner-background-success$color-success-50
banner-background-error$color-error-50
banner-background-warning$color-warning-50
banner-background-neutral$color-white
banner-background-light$color-gray-100
NameValueExample
banner-icon-info$color-info-700
banner-icon-success$color-success-700
banner-icon-error$color-error-700
banner-icon-warning$color-warning-700
banner-icon-neutral$color-gray-1000
banner-icon-light$color-gray-700

Popups

Max Widths

NameValue
popup-max-width-narrow480px$unit-60
popup-max-width-default640px$unit-80
popup-max-width-wide960px$unit-120

Tables

Heights

NameValue
table-header-height50px
table-group-header-height50px
table-row-height-default50px
table-row-height-condensed40px
table-row-height-extra-condensed28px
table-summary-row-height-single60px
table-summary-row-height-multi32px

Shadows

NameValueExample
table-fixed-col-shadow2px 0 4px 0 rgba(19, 21, 23, 0.2)
table-fixed-row-shadow0 2px 4px 0 rgba(19, 21, 23, 0.2)

Visualisations

Hover

NameValue
viz-hover-opacity0.25
viz-hover-filtergrayscale(0.8)

Table of Contents

© 2021 OpenGov