Finstral Global
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
border-black50
Name
--color-border-black50
RGB
Hex
HSL
border-brand
Name
--color-border-brand
RGB
Hex
HSL
border-brand-darker
Name
--color-border-brand-darker
RGB
Hex
HSL
border-error
Name
--color-border-error
RGB
Hex
HSL
border-invert
Name
--color-border-invert
RGB
Hex
HSL
border-primary
Name
--color-border-primary
RGB
Hex
HSL
border-secondary
Name
--color-border-secondary
RGB
Hex
HSL
border-success
Name
--color-border-success
RGB
Hex
HSL
border-tertiary
Name
--color-border-tertiary
RGB
Hex
HSL
notecard-error
Name
--color-notecard-error
RGB
Hex
HSL
notecard-info
Name
--color-notecard-info
RGB
Hex
HSL
notecard-note
Name
--color-notecard-note
RGB
Hex
HSL
notecard-success
Name
--color-notecard-success
RGB
Hex
HSL
notecard-warning
Name
--color-notecard-warning
RGB
Hex
HSL
surface-black05
Name
--color-surface-black05
RGB
Hex
HSL
surface-black10
Name
--color-surface-black10
RGB
Hex
HSL
surface-black20
Name
--color-surface-black20
RGB
Hex
HSL
surface-black25
Name
--color-surface-black25
RGB
Hex
HSL
surface-black50
Name
--color-surface-black50
RGB
Hex
HSL
surface-brand
Name
--color-surface-brand
RGB
Hex
HSL
surface-brand-darker
Name
--color-surface-brand-darker
RGB
Hex
HSL
surface-brand-darkest
Name
--color-surface-brand-darkest
RGB
Hex
HSL
surface-error
Name
--color-surface-error
RGB
Hex
HSL
surface-estrich
Name
--color-surface-estrich
RGB
Hex
HSL
surface-invert
Name
--color-surface-invert
RGB
Hex
HSL
surface-jakobskraut
Name
--color-surface-jakobskraut
RGB
Hex
HSL
surface-jakobskraut-light
Name
--color-surface-jakobskraut-light
RGB
Hex
HSL
surface-latsche
Name
--color-surface-latsche
RGB
Hex
HSL
surface-latsche-light
Name
--color-surface-latsche-light
RGB
Hex
HSL
surface-leinen
Name
--color-surface-leinen
RGB
Hex
HSL
surface-leinen-light
Name
--color-surface-leinen-light
RGB
Hex
HSL
surface-primary
Name
--color-surface-primary
RGB
Hex
HSL
surface-sandstein
Name
--color-surface-sandstein
RGB
Hex
HSL
surface-sandstein-light
Name
--color-surface-sandstein-light
RGB
Hex
HSL
surface-schlern
Name
--color-surface-schlern
RGB
Hex
HSL
surface-schlern-dark
Name
--color-surface-schlern-dark
RGB
Hex
HSL
surface-schlern-light
Name
--color-surface-schlern-light
RGB
Hex
HSL
surface-schwarz-esche
Name
--color-surface-schwarz-esche
RGB
Hex
HSL
surface-success
Name
--color-surface-success
RGB
Hex
HSL
surface-terrakotta
Name
--color-surface-terrakotta
RGB
Hex
HSL
surface-terrakotta-dark
Name
--color-surface-terrakotta-dark
RGB
Hex
HSL
surface-terrakotta-light
Name
--color-surface-terrakotta-light
RGB
Hex
HSL
text-brand
Name
--color-text-brand
RGB
Hex
HSL
text-brand-darker
Name
--color-text-brand-darker
RGB
Hex
HSL
text-error
Name
--color-text-error
RGB
Hex
HSL
text-invert
Name
--color-text-invert
RGB
Hex
HSL
text-primary
Name
--color-text-primary
RGB
Hex
HSL
text-secondary
Name
--color-text-secondary
RGB
Hex
HSL
text-success
Name
--color-text-success
RGB
Hex
HSL
Fonts
Button
Name
--typo-Button
font-size
font-weight
letter-spacing
line-height
Default
Name
--typo-Default
font-family
HeadlineL
Name
--typo-HeadlineL
font-size
font-weight
letter-spacing
line-height
HeadlineM
Name
--typo-HeadlineM
font-size
font-weight
letter-spacing
line-height
HeadlineS
Name
--typo-HeadlineS
font-size
font-weight
letter-spacing
line-height
HeadlineXL
Name
--typo-HeadlineXL
font-size
font-weight
letter-spacing
line-height
HeadlineXXL
Name
--typo-HeadlineXXL
font-size
font-weight
letter-spacing
line-height
TextL
Name
--typo-TextL
font-size
font-weight
letter-spacing
line-height
TextM
Name
--typo-TextM
font-size
font-weight
letter-spacing
line-height
TextS
Name
--typo-TextS
font-size
font-weight
letter-spacing
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