Style Guide

Color

#A4EBAA – Aurora

#54C69D – Comet

#45897D – Nebula

#0E5369 – Stardust

#000000 – Black

#FFFFFF – White

#FFE4A8 – Banana

#FFC078 – Persimmon

#FF9361 – Cantaloupe

#E06665 – Grapefruit

Palette Usage

Sections

DESKTOP & TABLET
– Horizontal Padding: 32px
– Vertical Padding: 128px
– Column/Row Gap: 32px

MOBILE
– Horizontal Padding: 16px
– Vertical Padding: 80px
– Column Gap: 16px
– Row Gap: 16px or 32px

Column 1

Text: 50% or 70%
Visual: 50% or 30%

Column 2

Dividers

Heading Divider: 50% width solid 2px line in Cantaloupe_{^{(see above)}}
* Optional, use only for H1-H3

Straight Section Divider: Solid 2px border in Black_{^{(top of this section)}}
*For use between dark/light section transitions
*Apply to top border of following section

Section Divider: Wave pattern shape divider, 32px height, flip
– Wave Light: Aurora over dark/dark ^{_{(bottom of this section)}}
– Wave Dark: Nebula over light/light _{^{(top of previous section, bottom of next section)}}
*For use between dark/dark or light/light section transitions

– Wave White: White into white section ^{_{(title section)}}
*For use between color/white section transitions as an alternative to the straight divider
*Apply to the section bordering the white section

Typography

H1 – Shrikhand 6rem

Subtitle – Prompt Regular 2em

H2 – Shrikhand 4rem

H3 – Shrikhand 3rem

H4 – Shrikhand 2rem

H5 – Shrikhand 1.5rem

H6 – Shrikhand 1.25rem

P – Prompt Regular 1rem

Cards

Use to display images, text, or charts to support main text
May be overlapped and/or misaligned for desktop effect

Small Card
– Border: 2px Solid Black
– Border Radius: 4px
– Padding:
— 32px Desktop
— 32px Tablet
— 16px Mobile

Large Card

Lorem ipsum dolor sit amet consectetur

Window Cards

Text Window

Window Border
– Border: 2px Solid Black
– Border Radius: 4px
– Padding: 4px

Window Content
– Border: 2px Solid Black
– Border Radius: 2px
– Padding:
— 32px Desktop
— 32px Tablet
— 16px Mobile

Image Window

Chart Window

Jumbo Text Window

H1 or H2

Subtitle sized large text lorem ipsum dolor sit amet consectetur

Modals

Use to display tertiary/optional information which is not critical to the main content, but adds supplementary info, context, personality, or entertainment.

Nikita Wagenman