You must be logged in to become a member.
The End Credits Film Club
Style Guide
This page outlines the current styles and standards for the The End Credits Film Club website.
Colors
An overview of this site's brand colors.
-6
-5
-4
-3
-2
-1
Primary
+1
+2
+3
+4
+5
+6
-6
-5
-4
-3
-2
-1
Secondary
+1
+2
+3
+4
+5
+6
-6
-5
-4
-3
-2
-1
Accent
+1
+2
+3
+4
+5
+6
-6
-5
-4
-3
-2
-1
Base
+1
+2
+3
+4
+5
+6
Buttons
Solid and outline buttons are available across all color sets including black and white.
Button Scale
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)
This is just placeholder text. We will change this out later. It’s just meant to fill space until your content is ready. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
Heading 2 (H2)
This is just placeholder text. We will change this out later. It’s just meant to fill space until your content is ready. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
Heading 3 (H3)
This is just placeholder text. We will change this out later. It’s just meant to fill space until your content is ready. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
Heading 4 (H4)
This is just placeholder text. We will change this out later. It’s just meant to fill space until your content is ready. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
Heading 5 (H5)
This is just placeholder text. We will change this out later. It’s just meant to fill space until your content is ready. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
Heading 6 (H6)
This is just placeholder text. We will change this out later. It’s just meant to fill space until your content is ready. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
Text
xs
This is just placeholder text. We will change this out later. It’s just meant to fill space until your content is ready.
s
This is just placeholder text. We will change this out later. It’s just meant to fill space until your content is ready.
m
This is just placeholder text. We will change this out later. It’s just meant to fill space until your content is ready.
l
This is just placeholder text. We will change this out later. It’s just meant to fill space until your content is ready.
xl
This is just placeholder text. We will change this out later. It’s just meant to fill space until your content is ready.
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
Form Styling
A base class "form--defaults" sets sizing then "form--light" or "form--dark" is used depending on the background to set colors