# 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
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-3lines
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.

### 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