Mark
The signed-off KC monogram inside a glass disc, ringed by a bilingual orbit.
Brand guide · 2026
System
One tone. One typeface. One icon family. This page is the only source of truth for the КРЕАСТРА brand: logo, icons, colour, type, motion, and voice.
01 · Logo
Logo
Five variants of the mark. Mark is canonical; the rest are contextual.
Real
Legacy brand SVG — kept as a documents-friendly fallback.
at nav scale
Constellation
K as a star cluster. Lines pulse on hover; reads as 'cosmos'.
at nav scale
Orbit
K inside a glass disc; KREASTRA · CREASTRA orbits the rim.
at nav scale
Liquid
One continuous stroke — K and C in a single figure.
at nav scale
Clear-space
One glyph-radius of breathing room
Nothing lives closer than one glyph radius — no text, buttons, or graphics. On photography, paint a 15 %-alpha plate at the same radius.
Minimum size
24 px in UI · 11 mm in print
Below 24 px the monogram loses legibility. In those slots, swap to the knockout-K without its ring.
02 · Icons
Icons
55 icons · 24×24 grid · 1.6 stroke · currentColor. Two modes — Line or Animated — plus two accent copies in every group.
Services8 +2
- web
- mobile
- design
- ai
- cube
- branding
- code
- analytics
- design
- ai
Status6 +2
- check
- checkCircle
- warning
- info
- close
- spinner
- checkCircle
- warning
Navigation7 +2
- arrowRight
- arrowUpRight
- chevronDown
- chevronUp
- external
- plus
- minus
- arrowUpRight
- external
UI10 +2
- menu
- search
- phone
- pin
- clock
- calendar
- user
- play
- pause
- search
- play
Business14 +2
- businessSolutions
- complexServices
- marketing
- production
- legal
- audit
- strategy
- implementation
- launch
- automation
- franchise
- personalBrand
- smallBusiness
- concept
- launch
- automation
Payments3 +2
- mir
- yandexPay
- dolyami
- mir
- yandexPay
Social7 +2
- telegram
- github
- behance
- youtube
- dribbble
- telegram
- behance
Motion lexicon · 6 modes
Six modes, every icon gets one by default. Under two kilobytes of CSS — no Lottie. Trigger: always, on hover, or when scrolled into view.
- draw
- pulse
- float
- spin
- pop
- shake
03 · Colour
Colour
Two modes: night (mint #b4f8c8) and day (sky-cyan #00b4d8). Theme switches via View Transitions — no flash.
bg
var(--bg)
Page background
bg-elevated
var(--bg-elevated)
Elevated surfaces
fg
var(--fg)
Primary text
fg-muted
var(--fg-muted)
Secondary text
fg-subtle
var(--fg-subtle)
Captions & meta
accent
var(--accent)
Brand accent (mint / sky)
accent-fg
var(--accent-fg)
Text on accent fills
border
var(--border)
Subtle border
border-strong
var(--border-strong)
Strong border
04 · Type
Type
Unbounded for display, Manrope for body and UI labels, Pacifico for the one cursive grapheme — Ё in RU, U in EN.
Display 2XL · Unbounded
КРЕАСТРАDisplay LG
Создаём будущееBody LG · Manrope
Полный цикл: стратегия, разработка, маркетинг, поддержка.Body · Manrope
Каждый проект — это договор, NDA и предсказуемые сроки.Mono · UI labels
01 — МАНИФЕСТ · EST. 2019Cursive · Pacifico
ё
05 · Motion
Motion
Four signature easing curves. Duration: 220ms — click, 480ms — transition, 720ms — theme curtain, 1700ms — easter egg.
out-expo
var(--ease-out-expo)
cubic-bezier(0.16, 1, 0.3, 1)
out-quint
var(--ease-out-quint)
cubic-bezier(0.22, 1, 0.36, 1)
bounce-soft
var(--ease-bounce-soft)
cubic-bezier(0.175, 0.885, 0.32, 1.275)
glass
var(--ease-glass)
cubic-bezier(0.175, 0.885, 0.32, 2.2)
06 · Voice
Voice
Confident, never gushy. Concrete numbers. RU and EN run in parallel — one thought, two languages.
Do say
- · From concept to MVP — 30 days.
- · Deadline guarantee, NDA, contract.
- · Full cycle: strategy → production → growth.
Don't say
- · “The best team on the market.”
- · “We craft world-class masterpieces.”
- · “Call us right now!”
Source: src/components/BrandIcons.tsx · src/app/globals.css
07 · Sound
Sound
Four scene beds and five short UI cues. Scenes are music tracks; UI sounds are synthesised on WebAudio with no asset payload.
Engine waiting on a gesture
Scene beds · 4 modes
UI palette · 5 cues
08 · 3D emoji
3D emoji
A single open-source pack (Microsoft Fluent Emoji 3D, MIT) powers every character and object across the product — the manifesto, the calculator, the request flow. Nothing custom: free licence, true-3D renders, ~20-45 KB per piece.
01 · Idea
Idea
Light bulb
Sparkles
Brain02 · Strategy
Strategy
Bullseye
Chess pawn
World map03 · System
System
Puzzle piece
DNA
Gear04 · Craft
Craft
Hammer & wrench
Artist palette
Hammer05 · Impact
Impact
Rocket
Water wave
High voltage09 · Loaders
Loaders
Four waiting states — from a hairline bar and a triple rhythm to a full-screen mascot tuned per theme. One dialect, four densities.
Hairline
Progress bar
For nav transitions and lazy list loads.
Triple wave
Three dots
Inside forms and buttons. Echoes the signature triple rhythm.
Splash · Dark
Mascot + ring · mint
Full-screen splash on dark. Orbit ring mirrors the logo's type weight and tracking.
Splash · Light
Mascot + ring · cyan
Same composition for the light theme — cyan ghost in place of mint.
10 · Shaders
Shaders
Three live GPU surfaces: the phosphor field under the footer, plus the ocean and cosmos scenes that sit behind the hero in light and dark themes. Pulled together here so the full visual language reads at a glance.
Signal
0°
Mint
110°
Violet
210°
Ember
320°
Ocean
R3F
Hero backdrop in light theme. GPU wave sim, 512² tessellation.
Cosmos
R3F
Hero backdrop in dark theme. Earth + star field, no Milky Way.