Style Guide

A living reference of the design tokens configured in Theme Options.

Typography

Body Text

The quick brown fox jumps over the lazy dog. This paragraph demonstrates the default body typography settings including font family, size, weight, line height, and letter spacing as configured in Theme Options.

Font: "MonaSans", sans-serif · Size: 18px · Weight: 400 · Line Height: 1.5

Heading 1 — The quick brown fox jumps over the lazy dog

Font: "MonaSansExtraBold", sans-serif · Size: 40px · Weight: 400 · Line Height: 1.2 · Spacing: -0.025em · Color: #2b486f

Heading 2 — The quick brown fox jumps over the lazy dog

Font: "MonaSansBold", sans-serif · Size: 36px · Weight: 400 · Line Height: 1.2 · Spacing: -0.02em · Color: #2b486f

Heading 3 — The quick brown fox jumps over the lazy dog

Font: "MonaSansBold", sans-serif · Size: 30px · Weight: 400 · Line Height: 1.2 · Spacing: -0.015em · Color: #2b486f

Heading 4 — The quick brown fox jumps over the lazy dog

Font: "MonaSansBold", sans-serif · Size: 28px · Weight: 600 · Line Height: 1.2 · Spacing: -0.01em · Color: #2b486f

Heading 5 — The quick brown fox jumps over the lazy dog

Font: "MonaSansBold", sans-serif · Size: 24px · Weight: 400 · Line Height: 1.2 · Spacing: 0em · Color: #2b486f

Heading 6 — The quick brown fox jumps over the lazy dog

Font: "MonaSansBold", sans-serif · Size: 20px · Weight: 400 · Line Height: 1.2 · Spacing: 0em · Color: #2b486f

Inline Elements

This is bold / strong text within a paragraph.

This is small text within a paragraph.

This is a hyperlink within a paragraph.

This is span text within a paragraph.

Hero Typography

Hero Heading — The quick brown fox

Font: "MonaSans", sans-serif · Size: 16px · Weight: 700

Color Palette

Primary

Light
#4e79b1
Base
#2b486f
Dark
#142439

Secondary

Light
#616465
Base
#2e3235
Dark
#161a1d

Tertiary

Light
#eadeb3
Base
#d9bf5d
Dark
#c4a227

Accent

Light
#f8f1d3
Base
#f2e39f
Dark
#eed259

Neutral

Light
#dde7ee
Base
#edf3f7
Dark
#b6d0e2

Links

Default
#2b486f
Hover
#429cc9

Background

Page
#ffffff

Buttons

Global — Padding: 6px / 20px · Radius: 10px · Font Size: 17px · Weight: 400

Button 1

BG: #ffffff · Text: #2b486f · Hover BG: #edf3f7 · Hover Text: #2b486f

Button 2

BG: #2b486f · Text: #ffffff · Hover BG: #2e5a70 · Hover Text: #ffffff

Button 3

BG: #d9bf5d · Text: #2e3235 · Hover BG: #f2e39f · Hover Text: #2e3235

Button 4

BG: #ffffff · Text: #2e3235 · Hover BG: #ffffff · Hover Text: #2b486f

Lists

Unordered List

  • First item in the list
  • Second item with more text to show wrapping behavior
  • Third item in the list
  • Fourth item for good measure

Style: disc · Position: outside · Padding Left: 1.5rem

Ordered List

  1. First item in the list
  2. Second item with more text to show wrapping behavior
  3. Third item in the list
  4. Fourth item for good measure

Style: decimal · Position: outside · Padding Left: 1.5rem

Form Elements

Padding: 0.5rem / 0.75rem · Radius: 0.375rem · Border: 1px #d1d5db · Focus: #1e40af

Layout

Container Max Width 1200px
Content Width 768px
Container Padding 1.5rem

Contact

Address
1200 W Dimond Blvd
Anchorage, AK 99515 Get Directions
Diamond Estates is a professionally managed manufactured home community offering affordable manufactured homes, mobile homes for sale, and long-term residential living in Anchorage, Alaska.