Site styleguide

Nube flow is a unified webflow system built on three intuitive pillars: 12 column system for layout, Flex system for structure, and Spacing system for rhythm. By encoding responsive behavior into smart defaults paired with semantic tokens throughout, it bridges the gap between visual design tools and production code. Write less, build more, maintain effortlessly.

Color

All the website colors are tokenized and have their unique styles defined based on their functionality

Surface

.surface-primary
.surface-secondary
.surface-tertiary

Ink

.ink-primary
.ink-secondary
.ink-tertiary
.ink-accent

Stroke

.stroke-primary

Color themes

The Nube Flow system recommends having a minimum of two color themes on every website build

Default

Invert

Typography

Typography styles hold tokenized classes based on font size and number of typography style utilities.

Type system

Aa

.f0

Aa

.f1

Aa

.f2

Aa

.f3

Aa

.f4

Aa

.f5

Layout

Layout styles are defined based on 12 column grid system

Layout core

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Eyebrow

Layout core

Div
Grid
Grid

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Global components

Global components are reusable elements designed for a wide range of use cases

Link / Icon only

Primary / Small
Primary / Base
Primary / Large
Secondary / Small
Secondary / Base
Secondary / Large
Clear / Small
Clear / Base
Clear / Large

Button

Primary / Small
Primary / Base
Primary / Large
Secondary / Small
Secondary / Base
Secondary / Large
Clear / Small
Clear / Base
Clear / Large

Button / Icon only

Primary / Small
Primary / Base
Primary / Large
Secondary / Small
Secondary / Base
Secondary / Large
Clear / Small
Clear / Base
Clear / Large

Icon

Icon / Small
Icon / Medium
Icon / Large
Icon / Custom