Style Guide

The visual foundation of Calmora — colour tokens, the typography scale and the interactive elements the site is built from.

Color Palette

Brand Color

Brand 50

#FFF6F6

Brand 100

#F7F0F0

Brand 400

#EF8B8B

Brand 500

#CA5555

Brand 600

#9C2F2F

Brand 700

#560000

Brand 800

#422121

Brand 900

#1A0000

Ink Color

Ink 600

#495057

Ink 900

#260000

Neutral Color

Neutral 0

#FFFFFF

Neutral 300

#DEE2E6

Neutral 400

#CED4DA

Neutral 600

#868E96

Surface Color

Surface Page

#F7F4F0

Surface Page Alt

#F8F6F3

Text Color

Heading Text Color

Ink 900

Body Text Color

Ink 600

Text Color White

Neutral 0

Text Color Brand

Brand 600

Text Color Soft

Brand 400

Background Color

BG Color Page

Surface Page

BG Color Page Alt

Surface Page Alt

BG Color White

Neutral 0

BG Color Dark

Brand 900

BG Color Deep

Brand 800

BG Color Badge

Brand 100

BG Color Glass

rgba(255,255,255,0.19)

Border Color

Border Color Brand

Brand 600

Border Color Neutral

Neutral 600

Border Color Soft

Brand 400

Border Color Hairline

Neutral 300

Button Color

Primary Button BG

Brand 600

Primary Button Text

Neutral 0

Secondary Button BG

Neutral 0

Secondary Button Text

Ink 900

Typography

Heading 1

Instrument Serif • Regular • 3.5rem • Typography/H1

Heading 2

Instrument Serif • Regular • 2.5rem • Typography/H2

Heading 3

Instrument Serif • Regular • 2.25rem • Typography/H3

Heading 4

Instrument Serif • Regular • 2rem • Typography/H4

Heading 5

Instrument Serif • Regular • 1.875rem • Typography/H5

Heading 6

Instrument Serif • Regular • 1.5rem • Typography/H6

Paragraph 1: The quick brown fox jumps over the lazy dog. Designers use this text as a placeholder.

Inter Tight • Regular • 1.1875rem • Typography/Paragraph 1

Paragraph 2: The quick brown fox jumps over the lazy dog. Designers use this text as a placeholder.

Inter Tight • Regular • 1.0625rem • Typography/Paragraph 2

Paragraph 3: The quick brown fox jumps over the lazy dog. Designers use this text as a placeholder.

Inter Tight • Regular • 1rem • Typography/Paragraph 3

Paragraph 4: The quick brown fox jumps over the lazy dog. Designers use this text as a placeholder.

Inter Tight • Regular • 0.875rem • Typography/Paragraph 4

Paragraph 5: The quick brown fox jumps over the lazy dog. Designers use this text as a placeholder.

Inter Tight • Regular • 0.75rem • Typography/Paragraph 5

Interactive Elements

Button Variants

Button Text Button Text

Button Text