Buttons

Primary Buttons

Secondary Buttons

Outline Buttons (on dark background)

<button class="btn-primary">Primary Action</button>
<button class="btn-secondary">Secondary Action</button>
<button class="btn-outline">Tertiary Action</button>

<!-- Sizes -->
<button class="btn-primary btn-small">Small</button>
<button class="btn-primary">Default</button>
<button class="btn-primary btn-large">Large</button>
      

Cards

Simple Card

This is a basic card with title and text content.

Learn more

Card with Footer

This card includes a footer section with metadata.

Published: Jan 1, 2025

Card with Button

This card has a primary action button.

<div class="card">
  <div class="card-content">
    <h3 class="card-title">Card Title</h3>
    <p class="card-text">Card description.</p>
    <a href="#" class="link-standalone">Learn more</a>
  </div>
  <div class="card-footer">
    <span class="card-meta">Metadata</span>
  </div>
</div>
      

Typography

Heading 1 - Raleway Bold 48px

Heading 2 - Raleway Bold 36px

Heading 3 - Raleway SemiBold 28px

Heading 4 - Raleway SemiBold 22px

Lead paragraph - Open Sans Regular 20px with comfortable line height for improved readability.

Body text - Open Sans Regular 16px. This is the standard paragraph text used throughout the website. It maintains excellent readability with a line-height of 1.6.

Small text - Open Sans Regular 14px for captions and metadata.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p class="lead">Lead paragraph</p>
<p>Body text</p>
<small>Small text</small>
      

Links

This is a paragraph with an inline link within the text.

Standalone link with arrow

Download link with icon

External link with icon

<!-- Inline link -->
<a href="#">Link text</a>

<!-- Standalone link with arrow -->
<a href="#" class="link-standalone">Learn more</a>

<!-- Download link -->
<a href="file.pdf" download>Download PDF</a>

<!-- External link -->
<a href="https://example.com" target="_blank">External</a>
      

Forms

<form>
  <div class="form-group">
    <label for="name" class="form-label">Name*</label>
    <input type="text" id="name" class="form-input"
           placeholder="Your name" required>
  </div>

  <div class="form-group">
    <label for="message" class="form-label">Message*</label>
    <textarea id="message" class="form-textarea"
              placeholder="Your message" required></textarea>
  </div>

  <button type="submit" class="btn-primary">Submit</button>
</form>
      

Color Palette

Turquoise Primary
#2F99A4

Orange Accent
#FF4D00

Anthracite Text
#585961

Light Grey
#CCCDCC

White
#FFFFFF

/* CSS Custom Properties */
:root {
  --color-primary: #2F99A4;
  --color-accent: #FF4D00;
  --color-text-primary: #585961;
  --color-border: #CCCDCC;
  --color-background: #FFFFFF;
}
      

Grid Layouts

Two-Column Layout

Column 1

Column 2

Three-Column Layout