The Styleguide of
stanvision logo black
Typography
Buttons
Badges
Fa-icons
Colors
Classes
How to
Elements

Typography

HTML tags

H1 - Visual Scale

H2 - Visual Scale

H3 - Visual Scale

H4 - Visual Scale

H5 - Visual Scale
H6 - Visual Scale
Classes
H1 - Visual Scale
H2 - Visual Scale
H3 - Visual Scale
H4 - Visual Scale
H5 - Visual Scale
H6 - Visual Scale

Text Sizes

p-leading

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

p-body

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

p-small

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

p-tiny

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

subtitle

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

overline

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Text Weights

text-weight-thin

Sample text

text-weight-extra-light

Sample text

text-weight-light

Sample text

text-weight-normal

Sample text

text-weight-medium

Sample text

text-weight-semibold

Sample text

text-weight-bold

Sample text

text-weight-extra-bold

Sample text

text-weight-black

Sample text

Text Styles

text-strikethrough

Sample text

text-italic

Sample text

text-allcaps

Sample text

text-nowrap

Sample text

text-underline

Sample text

text-quote

Sample text

text-2lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-4lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-balanced

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Text Alignments

text-left

Sample text

text-center

Sample text

text-right

Sample text

Other HTML Tags

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links
All Links
All quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
rich-text

This is an H1 heading inside rich text

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 an H2 heading inside rich text

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is an H3 heading inside rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

This is an H4 heading inside rich text

This is an H5 heading inside rich text
This is an H6 heading inside rich text

Buttons

Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button

Badges

Integrations
Integrations

Font Awesome icon

Note: Only the regular weight is upploaded. Add more if needed, preferably not more than 2 weights and only in woff2 format.
Note: The brand icons are in a Fontawesome kit called Brand icons. Add more if necessary, download and upload the font again.

Colors

Mode Colors

bg-background
text-primary
Sample text
bg-background
text-primary
Sample text
text-secondary
Sample text
text-secondary
Sample text

Neutral Colors

bg-black
text-black
Sample text
bg-grey-900
text-grey-900
Sample text
bg-grey-800
text-grey-800
Sample text
bg-grey-700
text-grey-700
Sample text
bg-grey-600
text-grey-600
Sample text
bg-grey-500
text-grey-500
Sample text
bg-grey-400
text-grey-400
Sample text
bg-grey-300
text-grey-300
Sample text
bg-grey-200
text-grey-200
Sample text
bg-grey-100
text-grey-100
Sample text
bg-grey-50
text-grey-50
Sample text
bg-white
text-white
Sample text

Elevation

elevation
elevation.two
elevation.three
elevation.four

Useful utility classes

Containers

container-small
container-medium
container-large
container-none

Global padding

global-padding

Spacings

spacing-0
spacing-2
spacing-4
spacing-8
spacing-12
spacing-16
spacing-24
spacing-32
spacing-40
spacing-48
spacing-56
spacing-64
spacing-72
spacing-80
spacing-96
spacing-120
spacing-160
spacing-240
spacing-320

Border radiuses

br-0
br-2
br-4
br-6
br-8
br-10
br-12
br-16
br-20
br-24
br-32
br-40
br-pill

Other utility classes

img-full
img-full.absolute
img-full.cover
img-full.contain
icon-embed
hidden
This element is hidden
hidden-desktop
This element is hidden only on desktop
hidden-tablet
This element is hidden only on tablet
hidden-mobile
This element is hidden only on mobile
overflow-visible
overflow-hidden
overflow-scroll
overflow-auto
pointer-events-on
pointer-events-off
box-padding
box-padding.smaller

How to Structure your page content?

main-wrapper - Use a <main> tag

section__name - Use a <section> tag + add a global-padding class to it for global left and right margins

container-small / medium / large - It's ONLY use is for giving max width of the container

hero__parent

hero__child

*For top bottom spacings, use the spacing blocks.

BEM naming convention

Block Element Modifier

button - Block - parent element class

button__arrow - Element - child element class

button text-blue-600 - Modifier - changes the style of the block

Elements

Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Accordion - One open at a time - start with first open

Question 1

Woof...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Question 2

Woof...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

NOTE: If dynamic, the cms item must be the accordion__item.
NOTE: If multiple open at a time, delete the unnecessary lines marked in the script.
NOTE: If all closed initially, delete the unnecessary lines marked in the script.

Modal

Open modal

Marquee

Share to social media

Swiper JS

Button
Button
Button
Button
NOTE: If dynamic, the cms wrapper must be the swiper-container, then follow the hierarchy.
NOTE: Don't change the classes and the hierarchy: swiper-container / swiper-wrapper / swiper-slide . Add a combo class for different styling.
NOTE: Don't change the classes and the structure: slider-main_button.swiper-prev / slider-main_button.swiper-next

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

Text link

Bold text

Emphasis

Superscript

Subscript

People talk. We just deliver.

Real feedback from real teams we’ve partnered with — founders, marketers, and product leaders who expect high standards and long-term impact.

“StanVision quickly became an extension of our team — fast, flexible, and always bringing smart ideas to the table. They migrated our CMS, redesigned our platform, and delivered a website our team can now build on independently. What I value most is that they don’t just follow requests; they challenge us in a healthy way to get to a better result. Great culture fit, clear communication, and consistently on time.”

Jade Thomas
VP of Marketing, Primer
Jade Thomas
VP of Marketing, Primer

“The quality of the work was amazing — you made it feel like an easy project, even though we had delays on our side. You added points we didn’t even account for, brought your own recommendations, and the outcome is a complete shift in our brand and identity. Everyone who sees the website says ‘wow’. I’ll definitely recommend you to anyone who wants to work with true professionals.”

Ahmed El Naggar
CEO @ GoAudience
Ahmed El Naggar
CEO @ GoAudience

"Working with StanVision was a seamless experience from start to finish. The team delivered top-notch design work, were highly accommodating with our requests, and ensured every detail was executed to perfection. We’re thrilled with the final result and couldn’t recommend them more."

Ali Little
Creative director
Ali Little
Creative director

“StanVision delivered a full brand and website experience that resonated with our audience immediately. Their mix of creativity, strategy, and responsiveness made them a standout partner. They handled everything end-to-end — wireframes, design, animations, Webflow — and kept us on track the whole way. The new brand has already strengthened our presence in key markets.”

Emily Northway
Senior Marketing Manager, Flowcase
Emily Northway
Senior Marketing Manager, Flowcase

“Couldn’t be happier with StanVision. We wanted our new website redesigned and delivered and they got started in a week. The whole process was very well organised and catered for. We were assigned an AM who was on top of things all the time. I would definitely recommend them for anyone considering a professional design studio. As a matter of fact we still collaborate with them on a daily basis and delegate a huge part of our design work.”

Mihail Stoychev
Founder & CEO, SMSBump (acquired by Yotpo)
Mihail Stoychev
Founder & CEO, SMSBump (acquired by Yotpo)

“StanVision completely transformed our brand and website. They took the time to understand our vision, guided us when we weren’t sure, and delivered design and development work that impressed both our team and our customers. The communication was flawless, the collaboration was smooth, and the final result exceeded everything we expected. A truly exceptional partner.”

Luca Borreani
CMO, Zipchat AI
Luca Borreani
CMO, Zipchat AI

“StanVision brought structure, speed, and real ownership to our projects. They communicate clearly, adapt fast, and aren’t afraid to push back when it leads to a better outcome. Their design quality is exceptional, and they make complex processes feel simple. We trusted them with all our Webflow websites and our full redesign for a reason — they just get things done.”

Thibaut Taittinger
Founder, Puzl CowOrKing
Thibaut Taittinger
Founder, Puzl CowOrKing

“StanVision redesigned and rebuilt our entire website, and the quality of their design work was on a completely different level. Their team was fast, responsive, and easy to work with, and the final product improved our load speed by around 25%. They delivered every part of the project with precision — zero friction, zero delays, just great work.”

Curran Dye
Director of Growth, Supy
Curran Dye
Director of Growth, Supy

“StanVision redesigned our website and continues to support us with ongoing design work. The team is hyper-responsive, transparent, and always on time. The new website looks fantastic, and the assets they created have been used across all our campaigns. Working with them feels effortless — they communicate clearly, deliver consistently, and always let us know exactly where things stand.”

Stephen Hedlund
Head of Marketing, Rillet
Stephen Hedlund
Head of Marketing, Rillet

“StanVision delivered a website that exceeded our expectations. The team was proactive, highly responsive, and brought strong creative and technical versatility to the project. Our early users immediately noticed the quality of the UI and UX. Working with them was smooth from start to finish — always on time, always available, and genuinely invested in the outcome.”

Florent Breton
CEO & Co-Founder, Paren Inc
Florent Breton
CEO & Co-Founder, Paren Inc

"StanVision translated our brand into a stunning new website that immediately resonated with our users. Their creativity stands out, and they captured our vision perfectly. The team was proactive, friendly, and always full of good ideas — delivering clear strategy, strong design, and high-quality Webflow development. A fantastic partner to work with."

Kevin Steba
CEO & Founder, SEINô
Kevin Steba
CEO & Founder, SEINô