Finstral Handbooks
Structure of components
Elements
Elements are small components that are used by multiple higher order components. They are not meant to be used directly to author the content of a page.
Patterns
Patterns are components that can be used by content editors or template developers to author the content of a page. They usually make use of elements .
Template Components
Template components are the main parts of a template , but not usable by content editors. Instead they are used by template developers to construct templates .
Templates
Templates are the overarching components that represent a complete page. They usually make only use of template components .
Colors
a
Name
--c-a
RGB
Hex
HSL
a-dark
Name
--c-a-dark
RGB
Hex
HSL
a-light
Name
--c-a-light
RGB
Hex
HSL
b
Name
--c-b
RGB
Hex
HSL
b-dark
Name
--c-b-dark
RGB
Hex
HSL
b-light
Name
--c-b-light
RGB
Hex
HSL
disabled
Name
--c-typo-disabled
RGB
Hex
HSL
error
Name
--c-typo-error
RGB
Hex
HSL
link
Name
--c-typo-link
RGB
Hex
HSL
on-a
Name
--c-typo-on-a
RGB
Hex
HSL
on-b
Name
--c-typo-on-b
RGB
Hex
HSL
on-bg-light
Name
--c-typo-on-bg-light
RGB
Hex
HSL
on-error
Name
--c-typo-on-error
RGB
Hex
HSL
on-success
Name
--c-typo-on-success
RGB
Hex
HSL
primary
Name
--c-typo-primary
RGB
Hex
HSL
primary-on-dark
Name
--c-typo-primary-on-dark
RGB
Hex
HSL
secondary
Name
--c-typo-secondary
RGB
Hex
HSL
secondary-on-dark
Name
--c-typo-secondary-on-dark
RGB
Hex
HSL
bg
Name
--c-decoration-bg
RGB
Hex
HSL
bg-dark
Name
--c-decoration-bg-dark
RGB
Hex
HSL
bg-light
Name
--c-decoration-bg-light
RGB
Hex
HSL
disabled
Name
--c-decoration-disabled
RGB
Hex
HSL
divider
Name
--c-decoration-divider
RGB
Hex
HSL
error
Name
--c-decoration-error
RGB
Hex
HSL
error-disabled
Name
--c-decoration-error-disabled
RGB
Hex
HSL
success
Name
--c-decoration-success
RGB
Hex
HSL
Fonts
Default
Name
--typo-Default
font-family
font-size
letter-spacing
line-height
DefaultLarge
Name
--typo-DefaultLarge
font-size
letter-spacing
line-height
DefaultSmall
Name
--typo-DefaultSmall
font-size
letter-spacing
line-height
HeadingL
Name
--typo-HeadingL
font-family
font-size
font-weight
line-height
HeadingM
Name
--typo-HeadingM
font-family
font-size
font-weight
line-height
HeadingS
Name
--typo-HeadingS
font-family
font-size
font-weight
line-height
HeadingXL
Name
--typo-HeadingXL
font-family
font-size
font-weight
line-height
HeadingXS
Name
--typo-HeadingXS
font-family
font-size
font-weight
line-height
HeadingXXL
Name
--typo-HeadingXXL
font-family
font-size
font-weight
line-height
HeadingXXS
Name
--typo-HeadingXXS
font-family
font-size
font-weight
line-height
Mono
Name
--typo-Mono
font-family
font-size
font-weight
line-height
Spacings
2
Name
--size-2
Size
4
Name
--size-4
Size
8
Name
--size-8
Size
12
Name
--size-12
Size
14
Name
--size-14
Size
16
Name
--size-16
Size
24
Name
--size-24
Size
30
Name
--size-30
Size
32
Name
--size-32
Size
36
Name
--size-36
Size
40
Name
--size-40
Size
48
Name
--size-48
Size
56
Name
--size-56
Size
64
Name
--size-64
Size
72
Name
--size-72
Size
80
Name
--size-80
Size
88
Name
--size-88
Size
96
Name
--size-96
Size
104
Name
--size-104
Size
112
Name
--size-112
Size
120
Name
--size-120
Size
128
Name
--size-128
Size
144
Name
--size-144
Size
xxxs
Name
--size-xxxs
Size
xxs
Name
--size-xxs
Size
xs
Name
--size-xs
Size
s
Name
--size-s
Size
m
Name
--size-m
Size
l
Name
--size-l
Size
xl
Name
--size-xl
Size
xxl
Name
--size-xxl
Size
xxxl
Name
--size-xxxl
Size