Colors

Brand Colors

Brand--color-brand

Brand Foreground--color-brand-foreground

Accent--color-accent

Accent Foreground--color-accent-foreground

UI Colors

Background--background

Foreground--foreground

Card--card

Muted--muted

Primary--primary

Secondary--secondary

Destructive--destructive

Typography

Headings

H1 - text-h1

The quick brown fox

H2 - text-h2

The quick brown fox

H3 - text-h3

The quick brown fox

H4 - text-h4

The quick brown fox

H5 - text-h5

The quick brown fox

H6 - text-h6

The quick brown fox

Body Text

Body Large - text-body-lg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Body - text-body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Subheading - text-subheading

This is subheading text, perfect for introductions or supporting content.

Small - text-small

Small text for captions, metadata, or fine print. Use sparingly for secondary information.

Buttons

Variants

Sizes

With Icons

On Dark Background

Cards

Standard Card

A basic card with header and content

Card content goes here. This is the default card style used throughout the application.

Hoverable Card

Hover to see elevation effect

Use hover-elevate class to add subtle hover interactions to cards.

Accent Border

Card with brand accent border

Apply border-brand class for emphasized cards.

Image Card with Hover Reveal

Card Title

Description revealed on hover. Add more context or a call to action here.

Badges

Default

Secondary

Outline

Destructive

Links

Inline Links

This is a paragraph with an inline link styled with the brand color.

Navigation Links

Navigation Link Muted Link

Footer Links (on dark)

Section TitleFooter Link One Footer Link Two

Forms (AxeWP/Gravity Forms)

Form elements match the AxeWP Gravity Forms schema. All fields use gf-* CSS classes for consistent styling.

Supported AxeWP Field Types

TEXT

TEXTAREA

EMAIL

NUMBER

PHONE

WEBSITE

SELECT

RADIO

CHECKBOX

MULTISELECT

DATE

TIME

FILEUPLOAD

HTML

SECTION

HIDDEN

PAGE

POST_TITLE

POST_EXCERPT

Text Inputs

Text Input

Email Input *

Helper text appears below the input

Disabled Input

Textarea

Message

Select Dropdown

Choose an option

Radio Buttons

Select one option

Radio Option One

Radio Option Two

Radio Option Three

Checkboxes

Select multiple options

Checkbox Option One

Checkbox Option Two (checked)

Checkbox Option Three

Date Input (Calendar Picker)

Select a date

Click anywhere on the field to open the calendar picker

Time Input

Select a time

:

Number Input

Quantity

Phone Input

Phone Number

Website Input

Website URL

Section Field (SECTION type)

Section Title

Section description text that provides context for the fields below.

HTML Field (HTML type)

This is an HTML field. It displays custom HTML content and is read-only.

Form in Card (Gravity Forms style)

Contact Us

Fill out the form below and we will get back to you.

Name *

Email *

Message

Multi-Column Layout (12-column grid)

Gravity Forms 2.5+ uses a 12-column grid system. Fields use layoutGridColumnSpan to set their width. Columns stack vertically on mobile (below 640px).

Multi-Column Form

Demonstrating various column span configurations

First Name *span 6

Last Name *span 6

Email *span 12 (full width)

Cityspan 4

Statespan 4

ZIPspan 4

Phonespan 8

Extspan 4

Multi-Page Form Navigation

Step 2 of 3

Contact Information

Email

Phone

Submit Button States

File Upload

Upload DocumentChoose FileNo file chosen

Accepted formats: PDF, DOC, DOCX (max 10MB)

Drag and Drop Upload

Drag files here or click to browse

PDF, DOC up to 10MB

Field Validation States

Fields validate on blur (when you leave the field) and on form submission. Validation uses Gravity Forms schema rules for each field type.

Email (Invalid) *

Please enter a valid email address

Phone (Invalid) *

Phone number can only contain digits, spaces, dashes, parentheses, and +

Number (Out of Range)

Value must be no more than 100

Required Field (Empty) *

This field is required

Website URL (Invalid)

Please enter a valid URL (e.g., https://example.com)

File Upload (Invalid Type)

Choose Filedocument.exe

File type not allowed. Allowed types: pdf, doc, docx

Supported Validation Rules

Required fields

Email format

Phone format (US/International)

URL format

Number range (min/max)

File type restrictions

File size limits

Date validation

Time validation

CSS Variables

--form-field-spacing--form-label-weight--form-label-size--form-input-bg--form-input-border--form-input-focus-ring--form-placeholder--form-radio-checked--form-checkbox-checked

Spacing Reference

Use Tailwind spacing units consistently. Below are the recommended spacing values.

1

2

3

4

6

8

12

16

Alerts & Notifications

Information

This is an informational message.

Success

Operation completed successfully.

Warning

Please review before proceeding.

Error

Something went wrong. Please try again.