Style guide
This page outlines the current styles and standards for the TextileArtist website.
Colors
An overview of this site's brand colors.
Primary
Ultra light
Light
Semi light
Semi dark
Dark
Ultra dark
Secondary
Ultra light
Light
Semi light
Semi dark
Dark
Ultra dark
Accent
Ultra Light
Light
Semi light
Semi dark
Dark
Ultra dark
Base
Ultra Light
Light
Semi light
Semi dark
Dark
Ultra dark
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Buttons
Solid and outline buttons are available across all color sets including black and white.
Typography
Below is an overview of responsive typography sizes and weights for this site. These are computed from a base size and a mathematical scale.
Headings
Heading 1 / H1 (--xxl)
Regular
Medium
Bold
Heading 2 / H2 (--xl)
Regular
Medium
Bold
Heading / H3 (--l)
Regular
Medium
Bold
Heading 4 / H4 (--m)
Regular
Medium
Bold
Heading 5 / H5 (--s)
Regular
Medium
Bold
Heading 6 / H6 (--xs)
Regular
Medium
Bold
Body Text
Extra-large text (--l)
Regular
Medium
Bold
Large text (--l)
Regular
Medium
Bold
Body text (--m)
Regular
Medium
Bold
Small text (--s)
Regular
Medium
Bold
Extra small text (--xs)
Regular
Medium
Bold
Examples
Heading 1
This is large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 2
This is medium text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 3
This is medium text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 4
This is small text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 5
This is extra small text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Heading 6
This is extra-small text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magn.
Widths
There are six values you can use to control element width. They're automatically responsive.
Section Padding
Padding for sections is responsive and based on a multiplier of the core spacing system.
Spacing
There are six levels of responsive spacing calculated from a base size and a mathematical scale. This ensures margin, padding, and gaps all match perfectly.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl
Element Padding
Here are the six levels of spacing visualized as padding.
Card
This is a card with XS padding. Its content is pretty close to the edges.
Card
This is a card with S padding. It has a little bit tighter padding.
Card
This is a card with M padding. It has standard breathing room.
Card
This is a card with L padding. It has extra breathing room.
Card
This is a card with XL padding. It has significant breathing room.
Card
This is a card with XXL padding. Avoid using this in a confined space.
Shadows
There are three multi-layer box shadows to choose from.
Box shadow M
Box shadow L
Box shadow XL
Border radius
There are six border radius values calculated from a base size and a mathematical scale.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL