Style Guide

Every component and form element, using the live theme styles. Toggle the theme in the header to check light and dark.

Colors

Background --bg

Background 2 --bg-2

Surface --surface

Text --text

Text soft --text-soft

Line --line

Accent --accent

Accent 2 --accent-2

Typography

Display / H1

Section title / H2

Card title / H3

Lede paragraph — larger intro text used at the top of sections to set context before the body copy begins.

Body copy. The quick brown fox jumps over the lazy dog. Regular paragraph text at the base reading size, with a comfortable line height for longer passages.

An inline text link sits inside a sentence, and strong text plus emphasised text round out the basics.

Monospace — JetBrains Mono 0123456789

Buttons

Primary Ghost Primary large Ghost large

Chips & tags

HTML5
SCSS
JavaScript
Core Web Vitals

Team · Telecom Solo · Agency

Cards

Solo · Demo

Example Project

A sample card showing the hover spotlight, border treatment, and link style used across the work grid.
Visit site →
Team · Demo

Team Project

The neutral variant, without the solo accent border. Same interactions, different emphasis.
Visit site →

Form elements

Success message — your form was submitted.

Error message — please check the fields below.

Text input A short helper line under the field.

Email

Select

Textarea

Disabled

Checkboxes Performance optimization Accessibility audit SEO basics

Radio buttons Starter Standard Premium

Switch Enable notifications

Range

File

Contact form (CF7-ready)

A live-styled contact form. The CF7 shortcode template is below — paste it into a Contact Form 7 form and the theme styles apply automatically.

Contact Form 7 template

<div class="form-field">
  <label class="label label--req">Name
    [text* your-name placeholder "Your name"]
  </label>
</div>
<div class="form-field">
  <label class="label label--req">Email
    [email* your-email placeholder "you@example.com"]
  </label>
</div>
<div class="form-field">
  <label class="label">Project type
    [select project-type "Landing page" "Full site" "Performance audit"]
  </label>
</div>
<div class="form-field">
  <label class="label label--req">Message
    [textarea* your-message placeholder "Tell me what you need…"]
  </label>
</div>
<label class="check">
  [acceptance consent] I agree to be contacted about my enquiry.
</label>
[submit class:btn class:btn--primary class:btn--lg "Send message"]

Gutenberg blocks

Static previews of the editor blocks. These render live via their own blocks on real pages — shown here for reference.

portfolio/hero

Eyebrow line

Headline with emphasis

The lede paragraph introducing the section.

Primary Ghost

portfolio/stack

Feature one

Short supporting description for the feature card.

Feature two