Good Karma Effect
Style Kit
Introduction
Welcome to the Good Karma Effect Style Guide. This style guide has been established to share the minimum components that are ready to use across the site. This document is to help align branding and bring consistency from page to page. The intended use is for the website only.
Direction
User Experience (UX) is paramount, this guide is to guide decision makers on solving user problems without the overhead of component design however further items can be developed to support new directions.
Colour Palette
Primary Palette
Fill Colours
Secondary Palette
Pastel Colours
Typograhy Palette
Typography Styles
Headings - Catamaran
Typography - Inter Bold
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Aa Bb Cc Dd Ee
Body Copy
Typography - Inter
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Quotes
Typography - Inter
The ultimate Interface component kit built to create harmony across your products.
The ultimate Interface component kit built to create harmony across your products.
Additional Copy Elements
Typography - San Francisco
- Example Item 1
- Example Item 2
- Example Item 3
- Example Item 1
- Example Item 2
- Example Item 3
- Example Item 1
- Example Item 2
- Example Item 3
Additional Copy Elements
Typography - San Francisco
This line rendered as bold text.
This line rendered as italicized text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as deleted text.
You can use the mark tag to highlight text.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
Bold
Link
- List
Elevation & Shadows
Elevation and Shadows
Outter Shadow, Inner Shadow
Avatars
Primary Buttons
Corner Radius
TB
TB
T
T
T
Buttons
Primary Buttons
Corner Radius
Primary Buttons
Rounded
Secondary Buttons
Line Button
Field Elements
Form Fields
Input Fields
Alert Bars
Notification
Input Fields
