Nidves Style Guide
Formula Condensed
Neue Hass
Roboto mono
headings classes
Heading classes when typography style doesn't match the default HTML tag.
Heading 1
Heading 2
heading 3
heading 4
heading h5
Body-1
Body-2
Body-3
Text styles
Text style classes when typography style doesn't match the default HTML tag.
Text alignment
Text alignment classes when typography alignment doesn't match the default HTML tag.
Rich Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a block quote
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
This is a link inside of a rich text
- List item
- List item
- List item
- List item
- List item
- List item
example
Exploring The Future Of Place
Some text
Some text
Im Sevdin and i do
UX Research
Product Design
Graphic Design
Web Development
USA, los angeles
Just next heading text
Our name, Serakai, is a fusion of sera, for "will be" and kai, meaning "world." This name reflects our belief in the importance of intersections, as well as optimism about our positive contributions to the world of tomorrow.
Just next heading text
Our name, Serakai, is a fusion of sera, for "will be" and kai, meaning "world." This name reflects our belief in the importance of intersections, as well as optimism about our positive contributions to the world of tomorrow.
Just next heading text
Our name, Serakai, is a fusion of sera, for "will be" and kai, meaning "world." This name reflects our belief in the importance of intersections, as well as optimism about our positive contributions to the world of tomorrow.
Just next heading text
Our name, Serakai, is a fusion of sera, for "will be" and kai, meaning "world." This name reflects our belief in the importance of intersections, as well as optimism about our positive contributions to the world of tomorrow.
Exploring The Future Of Place
Some text
Some text
Im Sevdin and i do
UX Research
Product Design
Graphic Design
Web Development
USA, los angeles
Just next heading text
Our name, Serakai, is a fusion of sera, for "will be" and kai, meaning "world." This name reflects our belief in the importance of intersections, as well as optimism about our positive contributions to the world of tomorrow.
Just next heading text
Our name, Serakai, is a fusion of sera, for "will be" and kai, meaning "world." This name reflects our belief in the importance of intersections, as well as optimism about our positive contributions to the world of tomorrow.
Just next heading text
Our name, Serakai, is a fusion of sera, for "will be" and kai, meaning "world." This name reflects our belief in the importance of intersections, as well as optimism about our positive contributions to the world of tomorrow.
Just next heading text
Our name, Serakai, is a fusion of sera, for "will be" and kai, meaning "world." This name reflects our belief in the importance of intersections, as well as optimism about our positive contributions to the world of tomorrow.
Base Color - Mono
Manage recurring mono colors.
Base Color - Brand
Manage recurring primary colors.
Base Color - Background
Manage recurring background colors.
Base Color - Text
Manage recurring text colors.
Base Color - Border
Manage recurring border colors.
border-left
border-right
border-top
border-bottom
box shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
systems
styleguide_item
form elements
icons (image)
icon-height-xsmall
icon-height-small
icon-height-medium
icon-height-large
icon-height-xlarge
icon-height-custom1
icon-1x1-xxsmall
icon-1x1-xsmall
icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-xlarge
icon-1x1-custom1
icons (html embed)
icon-embed-xxsmall
icon-embed-xsmall
icon-embed-small
icon-embed-medium
icon-embed-large
icon-embed-xlarge
icon-embed-custom1
structure
Defined and flexible core structure we can use on all or most pages.
max widths
Use the max-width CSS property to contain inner content to a maximum width.
paddings
Direction Classes
paddings
Size Classes
margins
Direction Classes
margins
Size Classes
Spacers
Unified spacer system for the project.
Utility Classes
Useful utility classes we like to use in most of our projects to build faster.