Site styleguide
This website system has been built using Nube Flow a Webflow first CSS framework developed by Nube Agency’s core team.
On this page, you will find a list of global styles and classes used throughout the site. Which allows for easy editing at a global level and provides an overview of all key parts of the site.
Color
All the website colors are tokenized and have their unique styles defined based on their functionality
Surface
.surface-primary
.surface-secondary
.surface-accent
.surface-green
Ink
.ink-title
.ink-body
.ink-strong
.ink-dimmed
.ink-faded
.ink-accent
Stroke
.stroke-primary
.stroke-secondary
.stroke-accent
Spot
.spot-primary
.spot-primary-hover
.spot-secondary
.spot-secondary-hover
.spot-accent
.spot-accent-hover
Spot ink
.spot_ink-primary
.spot_ink-primary-hover
.spot_ink-secondary
.spot_ink-secondary-hover
.spot_ink-accent
.spot_ink-accent-hover
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.
General font
Aa
.f0
Aa
.f1
Aa
.f2
Aa
.f3
Aa
.f4
Aa
.f5
Font weight
Aa
.fw0
Aa
.fw1
Aa
.fw2
Aa
.fw3
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
.cnt
Global container, used to define contents max width
.rw
Row, used to define behavior of the columns inside it
.clm
Column, used to easily position content in any needed layout
Global components
Global components are reusable elements designed for a wide range of use cases
Button
Start Raising Funds
Button primary
Start Raising Funds
Button secondary
Start Raising Funds
Button tertiary
Icon library
#arrow-right
#arrow-left
#arrow-up
#arrow-down