Style guide
This website is built using Nube Flow, a specialized Webflow framework developed by Nube Agency to help build better websites faster.
v3.0.0
Color
Color system is built around a set of core swatches and a tokenized set of unique color values. Read the docs for more info.
Swatch
Light
Use to define light end of neutral palette
Dark
Use to define dark end of neutral palette
Blue
Define primary brand color of one of many
Swatch / Semantic
Positive
Use to define the core positive color
Notice
Use to define the core notice color
Negative
Use to define the core negative color
Base theme
The base theme is the primary theme and can be set to either light or dark by default. Set by default or using the utility class .theme-base. Read the docs for more info.
Surface
Primary
Used to define core surface (e.g body)
Secondary
Used for the first level elevation
Tertiary
Used for the second level elevation
Brand
Used as accent surface
Ink
Primary
Used for titles and high-visibility text
Secondary
Used as primary body color across site
Tertiary
Used for captions and low-visibility text
Accent
Used for highlights and interactive text
Stroke
Primary
Used to define core stroke color
Secondary
Used to define secondary stroke color
Tertiary
Used to define tertiary stroke color
Accent
Used to define accent stroke color
Invert theme
The invert theme is the secondary theme and represents an inverted version of the primary theme. Set using the utility class .theme-invert. Read the docs for more info.
Surface
Primary
Used to define core surface (e.g body)
Secondary
Used for the first level elevation
Tertiary
Used for the second level elevation
Brand
Used as accent surface
Ink
Primary
Used for titles and high-visibility text
Secondary
Used as primary body color across site
Tertiary
Used for captions and low-visibility text
Accent
Used for highlights and interactive text
Stroke
Primary
Used to define core stroke color
Secondary
Used to define secondary stroke color
Tertiary
Used to define tertiary stroke color
Accent
Used to define accent stroke color
Typography
Type system is built around a default set of 6 type levels, that can be further enriched. Read the docs for more info on type system and guides on how to introduce new type levels.
Type value (f0)
.f0
Tiny type value ideal for captions, footnotes and similar low level type elements
Type value (f1)
.f1
Small type value ideal for descriptions, small body text and similar small level type elements
Type value (f2)
.f2
Base type value ideal for body text, callouts and overall base type level across the website
Type value (f3)
.f3
Medium type value ideal for titles and similar medium level type elements
Type value (f4)
.f4
Large type value ideal for subheadings and similar high level type elements
Type value (f5)
.f5
Extra large type value ideal for primary headings and similar top level type elements
Core elements
Nube Flow comes with a set of prebuilt HTML element components, displayed for easy updating. Read the docs for a complete overview of all the component functionality.
Typography
Heading
Heading
Single heading component enriched with a versatile set of structure and style options.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Paragraph
Base paragraph component enriched with a versatile set of structure and style options.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Paragraph rich
Rich text-based paragraph component, used for great text styling control, enriched with a versatile set of structure and style options.
Eyebrow
Single eyebrow component to streamline eyebrow style across the website.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Bold text
Emphasis
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Rich text
Single rich-text component to streamline rich-text inner styles across the website.
Media
Image
Single image component enriched with versatile set of functionality and style options
Video
Single video component enriched with versatile set of functionality and style options
Core components
Nube Flow comes with a set of prebuilt components, displayed for easy updating. Read the docs for a complete overview of all the component functionality.