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.8
Color
Color system is built around a set of core swatches and a tokenized set of unique color values.
Swatch
Light
Use to define light end of neutral palette
Dark
Use to define dark end of neutral palette
Beige
Use to define branded light end of neutral palette
Navy
Use to define dark end of neutral palette
Green
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.
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
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
Solid
Used to define 100% opacity core stroke color
Accent
Used to define accent stroke color
Negative
Used to define negative stroke color
Light theme
The light theme is the secondary theme and represents a light non-branded version of the primary theme. Set using the utility class .theme-light.
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
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
Solid
Used to define 100% opacity core stroke color
Accent
Used to define accent stroke color
Negative
Used to define negative stroke color
Dark theme
The dark theme is the tertiary theme and represents a dark version of the branded theme. Set using the utility class .theme-dark.
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
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
Solid
Used to define 100% opacity core stroke color
Accent
Used to define accent stroke color
Negative
Used to define negative stroke color
Typography
Type system is built around a default set of 6 type levels, that can be further enriched.
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.
Typography
Heading
Heading
Single heading component enriched with a versatile set of structure and style options.
Latest update: 2026-02-13
Paragraph
Base paragraph component enriched with a versatile set of structure and style options.
amsight is committed to protecting and respecting your privacy. We use your personal information only to administer your account and to provide you with the products and services you have requested. From time to time, we may want to contact you about our products and services and other content that may be of interest to you.
You may unsubscribe from these notifications at any time. For more information about unsubscribing, our privacy practices, and how we protect and respect your privacy, please see our Privacy Policy.
By clicking “Download Whitepaper”, you consent to amsight storing and processing your personal data in order to provide the requested content.
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.