Color Palette

All colors defined in _skribble-vars.sass and vuetify.config.ts. Both files must be kept in sync.

Brand & Primary

$c-brand#FF531A
sassvuetify
$c-primary#006FE6
sassvuetify
$c-skribbleu#293D66
sassvuetify

Status / Semantic

$c-success#00A671
sassvuetify
$c-danger / error#E50040
sassvuetify
$c-warning#FF7803
sassvuetify
info#006FE6

Greyscale

$c-black#000000
sassvuetify
$c-grey-darker#293D66
sassvuetify
$c-grey-dark-2#62708C
sassvuetify
$c-grey-dark#65728E
sassvuetify
$c-grey-medium-2#717171
sass
$c-grey-medium-3#949DB0
sass
$c-grey-medium#979797
sass
$c-grey#A1AABA
sassvuetify
$c-grey-medium-4#C0C0C0
sass
$c-grey-light#DADEE6
sassvuetify
$c-grey-fine#EEF0F3
sassvuetify
$c-grey-light-1#F3F3F3
sass
$c-grey-light-5#F3F6FE
sassvuetify
$c-white#FFFFFF
sassvuetify

Grey Backgrounds

$c-grey-bg-4#D8D8D8
sass
$c-grey-bg-9#E2E2E2
sass
$c-grey-bg-5#EAEAEA
sass
$c-grey-bg-3#F0F0F0
sass
$c-grey-bg-6#F1F1F1
sass
$c-grey-bg-2#F6F6F6
sassvuetify
$c-grey-bg-7#F7F7F7
sassvuetify
$c-grey-light-2#F7F8F9
sassvuetify
$c-page-bg#F9FBFC
sassvuetify
$c-grey-bg#FAFAFA
sass
$c-grey-bg-8#FCFCFC
sass

Semantic Backgrounds

$c-primary-bg#D9EAFC
sassvuetify
$c-success-bg#D9F2EA
sassvuetifyunused
$c-danger-bg#FBD9E3
sassvuetify
$c-warning-bg#FFEBD9
sassvuetifyunused
$c-purple-bg#EEE7FF
sass
$c-info-bg#FFFAF8
sass

Signature Standards

$c-ses#20ABFD
sassvuetify
$c-aes#006FE6
sassvuetify
$c-qes#00A671
sassvuetify
$c-xqes#59EDBE
sassvuetify
$c-part11#8120FD
sassvuetify

Signature Request Status

$c-to-sign-bg#FFEED8
sassvuetify
$c-to-sign-status#B1580D
sass
$c-waiting-bg#F1F7FF
sassvuetify
$c-waiting-status#355DA7
sass
$c-completed-bg#CCFAD8
sassvuetify
$c-completed-status#18604D
sass
$c-cancelled-bg#FCE8ED
sassvuetify
$c-cancelled-status#E30B3C
sass

Pricing Plans

$c-plan-individual#7024AE
sassvuetify
$c-plan-team#F2C04B
sassvuetifyunused
$c-plan-pro#4893F0
sassvuetify
$c-plan-scale#293D66
sassvuetifyunused
$c-price-plan-gold#F4BD27
sassvuetify
$c-price-plan-purple#814CBF
sassvuetifyunused

Avatar Palette

$c-avatar-0#6C79FF
sassvuetify
$c-avatar-1#51CC80
sassvuetify
$c-avatar-2#F4BD27
sassvuetify
$c-avatar-3#BF4CBF
sassvuetify
$c-avatar-4#FDA23B
sassvuetify
$c-avatar-5#4CAD9F
sassvuetify
$c-avatar-6#743EB3
sassvuetify
$c-avatar-7#FF6044
sassvuetify
$c-avatar-8#5EC4FC
sassvuetify
$c-avatar-9#FD6868
sassvuetify

Blues

$c-primary#006FE6
sassvuetify
$c-blue#187CE8
sass
$c-blue-light-2#ABD0EE
sass
$c-blue-light#EEF4FF
sass
$c-blue-bg-4#EAF3FB
sassvuetify
$c-blue-bg-3#F2F8FE
sass
$c-blue-bg-2#EEF6FF
sass
$c-blue-bg#F6F8FC
sass

Purples

$c-purple-dark#4200FF
sassvuetify
$c-purple-light-2#3000B7
sassvuetify
$c-purple-light#F8F5FF
sassvuetify
$c-purple-bg#EEE7FF
sass

Greens

$c-success#00A671
sassvuetify
$c-green#43946A
sassvuetify
$c-green-light#1FC792
sass
$c-xqes#59EDBE
sassvuetify
$c-green-bg#E6F7F1
sass

Oranges & Yellows

$c-warning#FF7803
sassvuetify
$c-orange#EC6033
sassvuetify
$c-orange-bg#FFEEE9
sass
$c-orange-light-2#FFF4ED
sass
$c-yellow#FBBE25
sass
$c-yellow-light-2#F8DC6D
sass
$c-yellow-light#FFF4C7
sass

Navigation

$c-mobile-nav-bg#1F2E4D
sassvuetifyunused
$c-mininav-bg#213152
sassvuetify
$c-mininav-color#B2D7FF
sassvuetify
$c-mininav-primary#47A0FF
sassvuetify
$c-mininav-primary-bg#0D82FF
sassvuetify

Miscellaneous

$c-trustid#ED0000
sassvuetify
$c-trustid-darken#D40000
sassvuetifyunused
$c-border#DADEE6
sass
$c-widget#F4F9FE
sass
$c-warning-rollover#F03E6C
sassunused

Typography

Vuetify typography classes using Averta font family.

Type Scale

.text-h1 Heading 1 6rem / 300 / line-height: 1
.text-h2 Heading 2 3.75rem / 300 / line-height: 1
.text-h3 Heading 3 3rem / 400 / line-height: 1.05
.text-h4 Heading 4 2.125rem / 400 / line-height: 1.175
.text-h5 Heading 5 1.5rem / 400 / line-height: 1.333
.text-h6 Heading 6 1.25rem / 500 / line-height: 1.6
.text-subtitle-1 Subtitle 1 1rem / 400 / line-height: 1.75
.text-subtitle-2 Subtitle 2 0.875rem / 500 / line-height: 1.6
.text-body-1 Body 1 — the quick brown fox jumps over the lazy dog 1rem / 400 / line-height: 1.5
.text-body-2 Body 2 — the quick brown fox jumps over the lazy dog 0.875rem / 400 / line-height: 1.425
.text-button Button Text 0.875rem / 500 / uppercase / line-height: 2.6
.text-caption Caption text 0.875rem / 400 / line-height: 1.667
.text-overline Overline text 0.75rem / 500 / uppercase / line-height: 2.667

Custom Headings (.h1 – .h6)

App-specific heading classes, separate from Vuetify's .text-h* classes. All use color #293D66.

.h1 Heading 1 2.5rem
.h2 Heading 2 1.375rem / line-height: 1.2727
.h3 Heading 3 1.5rem
.h4 Heading 4 1.25rem
.h5 / .h6 Heading 5 / 6 1.125rem
.card__title Card Title bold 1.125rem / line-height: 1
.blockquote A blockquote style for quoted content 18px / 300

Rich Text (.rtf)

Heading sizes inside .rtf containers (CMS/rich text content).

.rtf h1 Rich Text H1 3.125rem
.rtf h2 Rich Text H2 1.875rem
.rtf h3 Rich Text H3 1.5rem
.rtf h4 Rich Text H4 1.25rem
.rtf h5 / h6 Rich Text H5 / H6 1.125rem

Component Text Styles

Typography defined on Vuetify component elements and custom component classes.

.v-card-title Card Title 1.25rem / 500 / ls: 0.0125em
.v-card-text Card body text content 1.125rem / 400 / lh: 1.375rem
.v-dialog .v-card-title Dialog Title 1.375rem / 700 / bg: #293D66
.v-dialog .v-card-text Dialog body text 1.125rem / 400 / lh: 1.375rem
.v-list-item-title List Item Title 0.875rem / 700 / lh: 1.5
.v-list-item-subtitle List item subtitle text 0.875rem / 400 / lh: 1rem
.v-select .v-list-item__title Select Option Text 0.875rem / 700
.skr-logo Skribble bold 1.875rem / line-height: 1
.skr-logo small tagline normal 1.125rem / line-height: 1

Font Weights

Utility classes for font-weight. Line-height utilities: .lh-1 (1) and .lh-3 (1.3).

.font-weight-thin The quick brown fox — 100
.font-weight-light The quick brown fox — 300
.font-weight-regular The quick brown fox — 400
.font-weight-medium The quick brown fox — 500
.font-weight-semibold The quick brown fox — 600
.font-weight-bold The quick brown fox — 700
.font-weight-black The quick brown fox — 900

Base Elements

Default typography on HTML elements. Font family: Averta, Arial, sans-serif.

body Body text — default paragraph style 1rem / 400 / color: #65728E / lh: 1.5
strong / b Bold text renders in skribbleu bolder / color: #293D66
a Link text in primary blue color: #006FE6
small Small text at 80% size 80% of parent
code monospace code monospace, monospace
.link Bold link text bold / color: #65728E
.link.fwn Normal weight underlined link normal / underline

Spacing

Vuetify spacing scale used for padding/margin utilities (pa-4, mt-6, etc.). Base unit = 4px.

Spacing Scale

0
0px
1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
7
28px
8
32px
9
36px
10
40px
12
48px
16
64px

Elevation

Vuetify elevation system (elevation-0 through elevation-24). Most commonly used: 0, 1, 2, 3, 4, 6, 8, 12, 24.

Shadows

elevation-0
none
elevation-1
subtle
elevation-2
cards
elevation-3
hover
elevation-4
raised
elevation-6
floating
elevation-8
menus
elevation-12
modals
elevation-24
max

Layout

Border radius, breakpoints, transitions, and z-index values.

Border Radius

rounded-0
0px
rounded-sm
3px
rounded
4px
rounded-lg
8px
rounded-xl
24px
rounded-circle
50%

Breakpoints

xs
0 – 599px
sm
600 – 959px
md
960 – 1279px
lg
1280 – 1919px
xl
1920 – 2559px
xxl
2560px+

Transitions

fast-out-slow-in
0.3s cubic-bezier(0.4, 0, 0.2, 1) — default for most components
linear-out-slow-in
0.3s cubic-bezier(0, 0, 0.2, 1) — entering elements
fast-out-linear-in
0.3s cubic-bezier(0.4, 0, 1, 1) — leaving elements
ease-in-out
0.2s cubic-bezier(0.4, 0, 0.6, 1) — hover states, color changes
swing
0.3s cubic-bezier(0.25, 0.8, 0.5, 1) — scroll, expansion panels

Z-Index

1
Buttons, cards
3
Sticky headers
5
App bar
6
Navigation drawer
8
Menus, autocomplete
1000
Tooltips
2000
Overlay / scrim
2400
Dialogs
9999
Snackbar, notifications