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
Icon
Icon / Small
Icon / Medium
Icon / Large
Icon / Custom