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

.theme-base

Invert

.theme-invert

Typography

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

Font styles

Aa

.f0

Aa

.f1

Aa

.f2

Aa

.f3

Aa

.f4

Aa

.f5

Aa

.f6

Font weight

Aa
.fw0
Aa
.fw1
Aa
.fw2
Aa
.fw3

Text decoration

Aa
.td0
Aa
.td1

Text transform

Aa
.tt0
Aa
.tt1
Aa
.tt2
Aa
.tt3

Text wrap

Aa
.tw0
Aa
.tw1
Aa
.tw2

Layout

Layout styles are defined based on 12 column grid system

Layout core

.page
Wrapper for all the page elements
.main
Page slot tagged as "main," used to hold all the content
.sct
Section, each named following systemized naming convention
.rw
Row, used to define behavior of the columns inside it
.clm
Column, used to easily position content in any needed layout

Core layout system classes

Sunt ut pariatur commodo excepteur commodo

Row system

.rw
.rw-sm
.rw-md
.rw-lg

Column system

.clm-1
.clm-2
.clm-3
.clm-4
.clm-5
.clm-6
.clm-7
.clm-8
.clm-9
.clm-10
.clm-11
.clm-12

Top level structure width

.mw-1
.mw-2
.mw-3
.mw-4
.mw-5
.mw-6
.mw-7
.mw-8
.mw-9
.mw-10
.mw-11
.mw-12

Flex

.fx
.fx-xs
.fx-sm
.fx-md
.fx-lg

Global components

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

Link

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

Icon

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