Zabal Framework v4.0

Lessen Project System

The single source of truth for styles, components, and project standards.

Whenever a new style is added or an existing one is modified, document these changes promptly.

Colors

This is a checkpoint to add your project's colors to the global swatches.

Surface

Surface colors define the background hierarchy of the interface. Use them to separate sections, cards, and interactive areas.

bg-default

surface/default

basic-white

bg-secondary

surface/secondary

sand-200

bg-accent

surface/accent

blue-600

bg-dark

surface/dark

indigo-900

Foreground

Text colors are semantic and should be chosen by hierarchy, not by visual preference.

tc-primary

This is some text inside of a div block.

foreground/default

blue-900

tc-muted

This is some text inside of a div block.

foreground/muted

alpha-70

tc-subtle

This is some text inside of a div block.

foreground/subtle

alpha-50

tc-inverted

This is some text inside of a div block.

foreground/inverted

white

tc-inverted-muted

This is some text inside of a div block.

foreground/inverted-muted

alpha-white-70

tc-inverted-subtle

This is some text inside of a div block.

foreground/inverted-subtle

alpha-white-50

tc-blue

This is some text inside of a div block.

foreground/highlight-blue

blue-600

tc-cyan

This is some text inside of a div block.

foreground/highlight-cyan

cyan-500

tc-citron

This is some text inside of a div block.

foreground/highlight-citron

citron-300

Stroke

Border styles.

bs-default

border/default

alpha-10

bs-muted

border/muted

alpha-15

bs-inverted

border/inverted

alpha-white-15

bs-inverted-muted

border/inverted-muted

alpha-white-20

Typography

Default classes and HTML tags for text elements.

Headings

HTML tags define default Heading styles.
Heading classes when typography style doesn't match the default HTML tag.

H1

Sample text helps you understand how real text may look.

ts-h1

Sample text helps you understand how real text may look.

H2

Sample text helps you understand how real text may look.

ts-h2

Sample text helps you understand how real text may look.

H3

Sample text helps you understand how real text may look.

ts-h3

Sample text helps you understand how real text may look.

H4

Sample text helps you understand how real text may look.

ts-h4

Sample text helps you understand how real text may look.

H5

Sample text helps you understand how real text may look.

ts-h5

Sample text helps you understand how real text may look.

H6

Sample text helps you understand how real text may look.

ts-h6

Sample text helps you understand how real text may look.