WAIO v1.0

Style Guide

The WAIO Framework Enhanced is a comprehensive, AI-optimized design system that accelerates modern web development while ensuring consistent, accessible, and semantically rich user interfaces.

This style guide provides developers and designers with a complete toolkit of utility classes, component patterns, and implementation guidelines designed for scalability, performance, and future-proof development practices.

1. Foundation Elements

page-wrapper

main-wrapper

container-sm

container-md

container-lg

container-xl

container-full

container-main

1.2.1 Text Colors

text-primary

text-primary

text-secondary

text-secondary

text-secondary-light

text-secondary

text-alternate

text-alternate

text-muted

text-muted

text-white

text-white

text-black

text-black

text-grey-50

text-grey-50

text-grey-100

text-grey-100

text-grey-200

text-grey-200

text-grey-300

text-grey-300

text-grey-400

text-grey-400

text-grey-500

text-grey-500

text-grey-600

text-grey-600

text-grey-700

text-grey-700

text-grey-800

text-grey-800

text-grey-900

text-grey-900

text-grey-950

text-grey-950

1.2.2 Background Colors

bg-white

bg-black

bg-tranparent

bg-primary

bg-secondary

bg-tertiary

2. Typography System

heading-1

Heading 1

text-6xl

Heading 1

heading-2

Heading 2

text-5xl

Heading 2

heading-3

Heading 3

text-4xl

Heading 3

heading-4

Heading 4

text-3xl

Heading 4

heading-5

Heading 5

text-2xl

Heading 5

heading-6

Heading 6

text-xl

Heading 6

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links

All quotes

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

All Ordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All Unordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

2.3.1 Text Sizes

text-8xl

Sample text is being used as a placeholder for real text that is normally present.

text-7xl

Sample text is being used as a placeholder for real text that is normally present.

text-6xl

Sample text is being used as a placeholder for real text that is normally present.

text-5xl

Sample text is being used as a placeholder for real text that is normally present on your website.

text-4xl

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-3xl

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-2xl

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-xl

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-lg

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-base

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-sm

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-xs

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

2.3.2 Text Styles

text-strikethrough

text-strikethrough

text-italic

text-italic

text-muted

text-muted

text-allcaps

text-allcaps

text-nowrap

text-nowrap

text-link

text-link

text-quote

Sample text is being used as a placeholder.

line-clamp-2

This CSS style is not supported for Rich Texts on iOS.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines

line-clamp-3

This CSS style is not supported for Rich Texts on iOS.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

2.3.3 Font Weights

font-xbold

font-xbold

font-bold

font-bold

font-semibold

font-semibold

font-medium

font-medium

font-normal

font-normal

font-light

font-light

2.3.4 Text Alignments

text-left

text-left

text-center

text-center

text-right

text-right

text-justify

text-justify

3. Layout System

3.1.1 Display classes

block

inline-block

inline

flex

inline-flex

grid

hidden

3.1.2 Flex classes

flex-row

flex-row-reverse

flex-col

flex-col-reverse

flex-wrap

flex-nowrap

3.1.3 Justify content classes

justify-start

justify-end

justify-center

justify-between

justify-around

3.1.4 Align items classes

align-center

align-start

align-end

align-stretch

align-baseline

3.1.5 Place content classes

place-content-center

3.1.6 Position classes

relative

absolute

fixed

sticky

static

3.1.7 Size classes

w-full

w-1/2

w-1/3

w-2/3

w-1/4

w-3/4

h-full

h-auto

h-screen

3.1.8 Overflow classes

overflow-visible

overflow-hidden

overflow-cut

overflow-scroll

overflow-auto

grid col-2

grid col-3

grid col-4

grid col-5

grid col-6

grid col-7

grid col-8

grid col-9

grid col-10

grid col-11

grid col-12

grid col-5 gap-xs

flex gap-sm

grid col-5 gap-md

flex-wrap gap-lg

grid col-5 gap-xl

flex-row-reverse gap-2xl

grid col-5 gap-3xl

col-span-1

col-span-2

col-span-3

col-span-4

col-span-5

col-span-6

col-span-7

col-span-8

col-span-9

col-span-10

col-span-11

col-span-12

3.5.1 All sizes paddings

p-0

p-xs

p-sm

p-md

p-lg

p-xl

p-2xl

p-3xl

p-4xl

p-5xl

p-6xl

3.5.2 Padding top

pt-0

pt-xs

pt-sm

pt-md

pt-lg

pt-xl

pt-2xl

pt-3xl

pt-4xl

pt-5xl

pt-6xl

3.5.3 Padding bottom

pb-0

pb-xs

pb-sm

pb-md

pb-lg

pb-xl

pb-2xl

pb-3xl

pb-4xl

pb-5xl

pb-6xl

3.5.4 Padding vertical

py-0

py-xs

py-sm

py-md

py-lg

py-xl

py-2xl

py-3xl

py-4xl

py-5xl

py-6xl

py-7xl

py-8xl

py-9xl

py-10xl

py-11xl

3.5.5 Padding horizontal

px-0

px-xs

px-sm

px-md

px-lg

px-xl

px-2xl

px-3xl

px-4xl

px-5xl

px-6xl

3.6.1 All sizes margins

m-0

m-xs

m-sm

m-md

m-lg

m-xl

m-2xl

m-3xl

m-4xl

m-5xl

m-6xl

3.6.2 Margin top

mt-0

mt-xs

mt-sm

mt-md

mt-lg

mt-xl

mt-2xl

mt-3xl

mt-4xl

mt-5xl

mt-6xl

3.6.3 Margin bottom

mb-0

mb-xs

mb-sm

mb-md

mb-lg

mb-xl

mb-2xl

mb-3xl

mb-4xl

mb-5xl

mb-6xl

3.6.4 Margin vertical

my-0

my-xs

my-sm

my-md

my-lg

my-xl

my-2xl

my-3xl

my-4xl

my-5xl

my-6xl

z-0

z-10

z-20

z-30

z-40

z-50

z-dropdown

z-sticky

z-fixed

z-modal-backdrop

z-modal

z-popover

z-tooltip

z-skip-links

aspect-auto

aspect-anamorphic

aspect-netflix

aspect-widescreen

aspect-landscape

aspect-portrait

aspect-square

aspect-custom

4. Interactive Elements

button

button is-sm

button is-lg

button is-secondary

button is-text

button is-icon

button_main

button_secondary

navlink

card

Clean card.

card

Option with image.

Button Text Button Text

card

Option with horizontal card.

Button Text Button Text

card

Option with mixed card sizes.

5. Advanced Features

data-ai-role="navigation"

data-ai-role="hero-section"

WAIO v1.0

Style Guide

data-ai-role="call-to-action"

data-ai-role="feature-list"

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

data-ai-role="testimonial-block"

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

data-ai-role="content-section"

Some important heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

data-ai-role="footer"

data-ai-role="form"

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

data-ai-role="pricing"

data-ai-role="faq"

How does <details> work?

If you're unfamiliar with <details>, it's an element that creates a 'disclosure widget' in which information is visible only when the widget is toggled to an "open" state.

Using <details name> to create exclusive accordions

A common use case for accordions is that only one of them should be open at any one time. The addition of the name attribute lets you connect multiple <details> elements and make an accordion exclusive, so only one <details> element with the same name can be open at any time.

data-ai-role="blog-post"

2025-01-01Author8 min

Heading

Heading 2

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 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 3

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 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

data-ai-role="product-listing"

Featured Products

WAIO Starter Pack

All-in-one Webflow toolkit for rapid prototyping and AI‑optimized layouts.

data-ai-role="service-description"

Custom Webflow Solutions

We build tailored Webflow websites enhanced with AI-friendly structure and performance-first design.

Layout optimized for Core Web Vitals
Built-in `data-ai-*` markup system for AI indexing
Full SEO-ready and structured JSON‑LD support

Learn More about Veza Webflow Solutions