Edison Style Guide

Visual Guide for Interface Components

Last Updated

Sat Nov 1, 2025

Typographic scale system is used to create a balanced and friendly font sizing, which uses a range of type sizes related to each other since they grow by the same ratio.

H1

H2

H3

H4

H5

H6

The Body Copy system encompasses various paragraph styles to ensure clear and readable text throughout the design.

Each style is designed to maintain visual harmony and readability while adapting to different content needs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

p-styling__d

p-styling__caps

This is some text inside of a div block.

text__nav

This is some text inside of a div block.

text__btn

This section guides developers in adding the project's approved colors to the global swatches.

It ensures consistent color usage across the application without setting specific classes.

Surface: Primary Dark

bg-dark__primary

Hex: #1b1d26

Primary Light

bg-light__primary

Hex: #D7D7D7

Grey Dark

bg-light__grey

Hex: #C7C7C7

Grey Light

bg-dark__grey

Hex: #8C8C8C

Global Class: Style Guide Color Block Size

sg__color-block

N/A

accent__yellow

Hex: #fbfdb2

accent__orange

Hex: #e4b851

accent__red

Hex: #dc5946

accent__blue

Hex: #9ab6c2

Global Class: Style Guide Color Block Size

sg__color-block

N/A

AaBbCc

Text Color: Primary Dark

tc-primary__dark

Hex: #1B1D26

AaBbCc

Text Color: Primary Light

tc-primary__light

Hex: #C7C7C7

AaBbCc

Text Color: Primary Dark, Opacity: 30%

tc-dark__opacity-30

Hex: #1B1D26 Opacity: 30%

AaBbCc

Text Color: Primary Dark, Opacity: 40%

tc-dark__opacity-40

Hex: #1B1D26 Opacity: 40%

AaBbCc

Text Color: Primary Dark, Opacity: 50%

tc-dark__opacity-50

Hex: #1B1D26 Opacity: 50%

AaBbCc

Text Color: Primary Dark, Opacity: 60%

tc-dark__opacity-60

Hex: #1B1D26 Opacity: 60%

AaBbCc

Text Color: Primary Dark, Opacity: 70%

tc-dark__opacity-70

Hex: #1B1D26 Opacity: 70%

AaBbCc

Text Color: Primary Light, Opacity: 70%

tc-light__opacity-70

Hex: #C7C7C7 Opacity: 70%

Global Class: Style Guide Card for Text

sg__card-text

N/A

Hello Button

Primary Button

Hello Button

Component: Secondary Button

Secondary Button

Global Class: Style Guide Card for Text

sg__card-text

N/A

The Spacing System is designed to maintain consistent and balanced spacing between elements throughout the design.

0px

Bottom Margin

margin__0px

0 Rem

8px

Bottom Margin

margin__8px

.50 Rem

12px

Bottom Margin

margin__12px

.75 Rem

16px

Bottom Margin

margin__16px

1 Rem

20px

Bottom Margin

margin__20px

1.25 Rem

24px

Bottom Margin

margin__24px

1.5 Rem

32px

Bottom Margin

margin__32px

2 Rem

40px

Bottom Margin

margin__40px

2.5 Rem

48px

Bottom Margin

margin__48px

3 Rem

56px

Bottom Margin

margin__56px

3.5 Rem

64px

Bottom Margin

margin__64px

4 Rem

72px

Bottom Margin

margin__72px

4.5 Rem

80px

Bottom Margin

margin__80px

5 Rem

88px

Bottom Margin

margin__88px

5.5 Rem

96px

Bottom Margin

margin__96px

6 Rem

104px

Bottom Margin

margin__104px

6.5 Rem

112px

Bottom Margin

margin__112px

7 Rem

120px

Bottom Margin

margin__120px

7.5 Rem

128px

Bottom Margin

margin__128px

8 Rem

136px

Bottom Margin

margin__136px

8.5 Rem

144px

Bottom Margin

margin__144px

9 Rem

152px

Bottom Margin

margin__152px

9.5 Rem

160px

Bottom Margin

margin__160px

10 Rem

168px

Bottom Margin

margin__168px

10.5 Rem

176px

Bottom Margin

margin__176px

11 Rem

184px

Bottom Margin

margin__184px

11.5 Rem

192px

Bottom Margin

margin__192px

12 Rem

200px

Bottom Margin

margin__200px

12.5 Rem

208px

Bottom Margin

margin__208px

13 Rem

216px

Bottom Margin

margin__216px

13.5 Rem

224px

Bottom Margin

margin__224px

14 Rem

232px

Bottom Margin

margin__232px

14.5 Rem

240px

Bottom Margin

margin__240px

15 Rem

248px

Bottom Margin

margin__248px

15.5 Rem

256px

Bottom Margin

margin__256px

16 Rem

264px

Bottom Margin

margin__264px

16.5 Rem

272px

Bottom Margin

margin__272px

17 Rem

280px

Bottom Margin

margin__280px

17.5 Rem

288px

Bottom Margin

margin__288px

18 Rem

296px

Bottom Margin

margin__296px

18.5 Rem

304px

Bottom Margin

margin__304px

19 Rem

312px

Bottom Margin

margin__312px

19.5 Rem

320px

Bottom Margin

margin__320px

20 Rem

Global Class: Style Guide Card Text Outline

sg__c-t-o

N/A

The Flex Horizontal Spacing System utilizes an 8px grid to ensure consistent and balanced spacing between elements within a flexible layout.

Using the Flex Horizontal (flex-h) class, this system provides a uniform column spacing, enhancing the visual structure and alignment of horizontally arranged content.

N/A

Div Flex > name: flex-h

flex-h

N/A

8px

Flex Horizontal, Cols 8px

cols__8px

grid-col-gap: var(--size--8px)

Flex Horizontal, Cols 16px

cols__16px

grid-col-gap: var(--size--16px)

Flex Horizontal, Cols 20px

cols__20px

grid-col-gap: var(--size--20px)

Flex Horizontal, Cols 24px

cols__24px

grid-col-gap: var(--size--24px)

The Flex Horizontal Spacing System utilizes an 8px grid to ensure consistent and balanced spacing between elements within a flexible layout.

Using the Flex Horizontal (flex-h) class, this system provides a uniform column spacing, enhancing the visual structure and alignment of horizontally arranged content.

N/A

Div > Flex Vertical

flex-v

N/A

Flex Vertical, Rows 8px

rows__8px

grid-row-gap: var(--size--8px)

Flex Vertical, Rows 16px

rows__16px

grid-row-gap: var(--size--16px)

Flex Vertical, Rows 20px

rows__20px

grid-row-gap: var(--size--20px)

Flex Vertical, Rows 24px

rows__24px

grid-row-gap: var(--size--24px)

Rich Text Element

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Link w/ hover animation

List item 1
List item 2
List item 3

List item 1 - numbered
List item 2 - numbered
List item 3 - numbered

Standardized button components for consistent interaction across the site. Includes primary, secondary, and tertiary variations with predefined styles for different states (default, hover, active, disabled).

Use these classes to maintain uniform button appearance and behavior.

N/A

Div > Flex Vertical

flex-v

N/A

Flex Vertical, Rows 8px

rows__8px

grid-row-gap: var(--size--8px)

Flex Vertical, Rows 16px

rows__16px

grid-row-gap: var(--size--16px)

The Layout Container defines the main content area of the website, controlling width and horizontal padding across different screen sizes.

It ensures consistent content alignment and responsive behavior throughout the site.

Container

container