Style Guide

Typography

Typeface

Satoshi

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Heading Tag

h1 tag

Heading 1

h2 tag

Heading 2

h3 tag

Heading 3

h4 tag

Heading 4

h5 tag

Heading 5

Heading Style Class

heading-style-h1: Heading 1
heading-style-h2: Heading 2
heading-style-h3: Heading 3
heading-style-h4: Heading 4
heading-style-h5: Heading 5

Body Text

text-size-regular: body 1
text-size-medium: body 2
text-size-small: body 3
text-size-tiny: body 4
small-text: body 5

Font Weight

500: font-weight-medium
700: font-weight-bold
900: font-weight-black

Tag Text

tag: Big Tag

tag_small: Small Tag

Line Style

text-style-1lines

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. 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.

text-style-2lines

text-style-3lines

Colors Style

Background Colors

background-color-black
background-color-orange
background-color-yellow
background-color-darkgreen
background-color-blue
background-color-purple
background-color-pink
background-color-red
background-color-light-orange
background-color-light-yellow
background-color-light-green
background-color-light-blue
background-color-light-purple
background-color-light-pink
background-color-light-red
background-color-pink
background-color-purple-gradiant
background-color-blue-gradiant
background-color-green-gradiant
background-color-neon-green-gradiant
background-color-yellow-gradiant
background-color-orange-gradiant
background-color-red-gradiant
background-color-dark-red-gradiant
background-color-sky-gradiant
background-color-ocean-gradiant
background-color-rainbow-gradiant

Text colors

text-color-primary: Black
text-color-white: white

Spacing Style

Global Spacing

container-small
padding-bottom
padding-top
margin-top
margin-bottom
padding-global
padding-section-xxlarge
padding-section-xlarge-140
padding-section-large-120

Padding Style

padding-verticle
padding-horizontal
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2

Margin Style

margin-verticle
margin-horizontal
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2

Components

Logo

CTA

Interested? Schedule your demo today.

Find out what Brainfish can do for you with just a 30-minute demo.

Book a Demo](/content/style-guide#/index.html)

Cards

AI Support Agents

Five AI Agents to Complement Your CX team

Introducing Brainfish’s Five AI Agents that work as one team, for you.](/content/style-guide#/index.html)

How Supermove Scaled Excellent CX Without Growing Headcount

Traditional AI chatbots just served links. Brainfish actually guides customers through solutions. The difference was night and day.

Read On](/content/style-guide#/index.html)

April 27, 2025

Five Specialized Agents, One Connected Experience \

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\

New Releases