Brandbook

Single source of truth for designers, developers, and AI contributors. This document describes the existing design system.

1. Brand

Positioning

Estismail is infrastructure for business communications. The brand positions itself as a reliable, long-standing technology partner — not a flashy startup.

Brand Philosophy

Professional and trustworthy
Technical but approachable
Focused on business outcomes (connecting businesses with customers)
Established (since 2013)

Mission

Build and operate infrastructure that helps companies connect, communicate, and grow.

Tone of Voice

Confident — speaks with authority, not uncertainty
Concise — no filler words, no marketing fluff
Professional — business-appropriate, not casual
Direct — states facts and value clearly

Key Messaging

Infrastructure and reliability
Business communications expertise
Long-term partnership (since 2013)
Connecting businesses with customers

2. Logo

Usage

Logo file: /assets/images/logo/39х39.png
Displayed in the header navbar as the brand mark
Three variants loaded: default-logo, alt-logo, mobile-logo (same file currently)

Clear Space

Navbar brand padding: 14px top/bottom
Logo max-height: 39px

Minimum Size

Logo renders at 39×39px
Should not be displayed smaller than 27px

3. Colors

CSS Variables (Estismail)

:root {
    --alt-font: 'Plus Jakarta Sans', sans-serif;
    --primary-font: 'Golos Text', sans-serif;
    --dark-gray: #15161d;
    --dark-slate-blue: #1e1e28;
    --medium-gray: #7a7a83;
    --light-medium-gray: #f0f2f8;
    --very-light-gray: #f4f5fa;
    --red: #e75050;
    --light-red: #ffeded;
    --green: #1b855d;
    --crusoe-green: #dbf2e7;
}

Primary Colors

Token	HEX	Usage
`--dark-gray`	`#15161d`	Primary text, headings, hero title
`--medium-gray`	`#7a7a83`	Body text, secondary content

Background Colors

Token	HEX	Usage
`--very-light-gray`	`#f4f5fa`	Page backgrounds
`--light-medium-gray`	`#f0f2f8`	Section backgrounds
`--white`	`#ffffff`	Card backgrounds, header

Accent Colors

Token	HEX	Usage
`--green`	`#1b855d`	Success states
`--crusoe-green`	`#dbf2e7`	Success backgrounds
`--red`	`#e75050`	Error states, alerts
`--light-red`	`#ffeded`	Error backgrounds

Hero Background

.estismail-hero {
    background:
        radial-gradient(circle at 50% 45%, rgba(255,255,255,.70) 0%, rgba(255,255,255,.24) 35%, transparent 65%),
        linear-gradient(135deg, #dde0e3 0%, #d3d6da 50%, #c9ced4 100%);
}

Signal / Accent Glow

Element	Color
Signal dot	`#ffffff` with glow `rgba(255,255,255,.9)`
Status dot (hero)	`--dark-gray` (`#15161d`)
Accent green glow	`#58DDBA`

4. Typography

Font Families

Token	Family	Usage
`--primary-font`	`'Golos Text', sans-serif`	Body text (default)
`--alt-font`	`'Plus Jakarta Sans', sans-serif`	Headings, buttons, labels
`--font-latin`	`'Archivo', sans-serif`	Latin-script body (en, es, pt)
`--font-cyrillic`	`'Golos Text', sans-serif`	Cyrillic body (ru, ua, kz)

Font Weights

Weight	Value	Usage
Light	`100`	Nav links, button labels
Regular	`400`	Body text
Medium	`500`	Button text, labels
Semibold	`600`	Emphasis, status text
Bold	`700`	Strong emphasis

Heading Sizes

Level	Size	Line Height
h1	`4.375rem` (70px)	`4.375rem`
h2	`3.438rem` (55px)	`3.438rem`
h3	`2.813rem` (45px)	`3.125rem`
h4	`2.375rem` (38px)	`2.7rem`
h5	`2rem` (32px)	`2.2rem`
h6	`1.75rem` (28px)	`1.95rem`

Body Text

body {
    font-size: 16px;
    line-height: 25px;
    font-weight: 400;
    color: var(--medium-gray);
}

5. Layout

Container

.container { max-width: 1220px; } /* at ≥1400px */
.container-fluid { width: 100%; padding: 0 15px; }

Grid

Bootstrap 5 grid with 12 columns. Custom gutter classes:

Class	Gutter
`.g-0`	0px
`.gutter-very-small`	5px
`.gutter-small`	10px
Default	15px

Section Spacing

Breakpoint	Default	.half-section	.big-section
≥1601px	110px	70px	130px
≤1600px	90px	70px	120px
≤991px	75px	50px	95px
≤767px	50px	40px	50px

Breakpoints

Name	Width	Prefix
xs	<576px	`sm-`
sm	≥576px	`sm-`
md	≥768px	`md-`
lg	≥992px	`lg-`
xl	≥1200px	`xl-`
xxl	≥1400px	`xxl-`

6. Components

Header

Fixed/floating navbar with rounded corners (border-radius-50px)
Semi-transparent white background: rgba(255,255,255,.5) with backdrop-filter: blur(10px)
Box shadow bottom: 0 10px 20px rgba(0, 0, 0, 0.08)
Logo: 39×39px
Nav links: font-weight: 100, font-size: 16px
Dropdown menus: background #eff0f2, border-radius-15px

Buttons

.btn {
    display: inline-block;
    border: 2px solid transparent;
    font-family: var(--alt-font);
    font-weight: 500;
    transition: all 300ms ease-in-out;
}

Sizes

Size	Font Size	Padding
`.btn-very-small`	11px	10px 20px
`.btn-small`	12px	13px 26px
`.btn-medium`	13px	16px 30px
`.btn-large`	14px	18px 34px
`.btn-extra-large`	16px	24px 46px

Color Variants

Class	Background	Hover
`.btn-dark-gray`	`var(--dark-gray)`	Transparent + border
`.btn-black`	`var(--black)`	Transparent + border
`.btn-white`	`var(--white)`	Transparent + border
`.btn-transparent-white`	Transparent	White fill

Status Dot

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dark-gray);
    margin-right: 18px;
}

Forms

input, select, textarea, .form-control {
    padding: 12px 25px;
    font-size: 16px;
    border: 1px solid var(--extra-medium-gray);
    color: var(--medium-gray);
    transition: 0.3s;
}
input:focus { border: 1px solid #c2c2c2; box-shadow: none; }

Box Shadows

Class	Value
`.box-shadow`	`0 0 10px rgba(0,0,0,.08)`
`.box-shadow-small`	`0 0 15px rgba(0,0,0,.08)`
`.box-shadow-medium`	`0 0 20px rgba(0,0,0,.08)`
`.box-shadow-medium-bottom`	`0 10px 20px rgba(0,0,0,.08)`
`.box-shadow-large`	`0 0 25px rgba(0,0,0,.08)`
`.box-shadow-extra-large`	`0 0 30px rgba(0,0,0,.08)`

Border Radius

Utility classes: .border-radius-0px through .border-radius-100px

7. Visual Style

Backgrounds

Hero: Radial + linear gradient (light gray tones)
Dropdown menus: #eff0f2
Header: Semi-transparent white with blur
Sections: White or --very-light-gray

Shadows

Header: box-shadow-medium-bottom
Cards: box-shadow to box-shadow-quadruple-large
Hover lift: translate3d(0, -3px, 0)

Blur Effects

Header background: backdrop-filter: blur(10px)
Hero glow elements: filter: blur(70px)

Animations

Signal dot: requestAnimationFrame loop, position + opacity + scale
Button transitions: 300ms ease-in-out
Box shadow transitions: 350ms cubic-bezier(0.37, 0, 0.63, 1)

8. Design Principles

Minimalism

Clean layouts with generous whitespace
No decorative elements without purpose
Subtle gradients and glows, never loud

Consistency

Unified color palette across all pages
Same typography scale everywhere
Reusable utility classes

Spacious Layouts

Section padding: 110px default (responsive down to 50px)
Container max-width: 1220px
Generous vertical rhythm

Clean Typography

Two font families: one for Latin, one for Cyrillic
Clear hierarchy: large headings, readable body text
Negative letter-spacing on display headings

9. Writing Guidelines

Heading Style

Sentence case for headings
No trailing periods on headings
Bold or semibold weight

Button Text

No text-transform (custom override disables uppercase)
Short, action-oriented ("Get started")
No trailing punctuation

Tone Rules

No exclamation marks in UI text
No emoji in content
No superlatives without evidence
Use "we" for company actions, "you" for user actions

10. CSS Architecture

File Structure

assets/css/
├── vendors.min.css      # Bootstrap 5 + vendor CSS
├── style.css            # Crafto template base styles
├── responsive.css       # Responsive overrides
├── icon.min.css         # Icon font styles
├── fonts.css            # @font-face declarations
├── custom.css           # Estismail-specific overrides
├── flag-icons/          # Country flag icons CSS
└── flags/               # Flag SVG files

Loading Order

vendors.min.css → icon.min.css → style.css → responsive.css → flag-icons.min.css → fonts.css → custom.css

custom.css loads last and overrides framework defaults.

Naming Conventions

Utility classes: Bootstrap-style (.fs-16, .mb-30px, .text-dark-gray)
Component classes: Kebab-case (.hero-title, .status-dot)
Responsive prefixes: sm-, md-, lg-, xl-, xxl-

11. Supported Languages

Code	Language	Font Family
`ru`	Русский	Golos Text
`en`	English	Archivo
`ua`	Українська	Golos Text
`kz`	Қазақша	Golos Text
`es`	Español	Archivo
`pt`	Português	Archivo

Default language: ru (no URL prefix). Other languages: /{lang}/ prefix.