Design System

Complete design token reference for vladkutepov.com. Colors, typography, spacing, and interactive components with all states documented.

Color Palette

Cream Backgrounds

Cream / Light #FAF9F7
Cream / Base #F5F2EE
Cream / Dark #EBE7E1

Ink Typography

Ink / Black #141414
Ink / Dark #2A2A2A
Ink / Medium #4A4A4A
Ink / Light #6B6B6B

Greys

Grey / 200 #E0DEDA
Grey / 400 #A8A4A0
Grey / 600 #757170

Accents

Terracotta #C4622D
Terracotta Light #D4845A
Sage #6B7C5C
Sage Light #8A9B7B

Typography

Display — 4.5rem Figtree

Heading 1 — 4rem Figtree

Heading 2 — 3rem Syne

Heading 3 — 2rem Syne

Heading 4 — 1.5rem Figtree

Heading 5 — 1.25rem Figtree
Heading 6 — 1.125rem Syne

Body — Figtree 18px / 150% line-height / 400 weight. The quick brown fox jumps over the lazy dog. This is the primary body text style used for paragraphs and long-form content across the site.

Body Small — Figtree 14px / 150% / -0.01em tracking. Secondary text for supporting content, metadata, and supplementary information.

Caption — Figtree 14px / 20px line-height. Used for image captions, footnotes, and tertiary information.
OVERLINE — FIGTREE 14PX / 180% / 500 WEIGHT / 0.5PX TRACKING

Buttons

PRIMARY • SECONDARY • GHOST — HOVER TO TEST INTERACTIVE STATES

Utility Colors

White #FFFFFF
Error #C43030
Success #3A7D44

Spacing Scale

4px base grid. Scale: 4 • 8 • 12 • 16 • 24 • 32 • 48 • 64 • 96 • 128 • 160px. All spacing tokens are registered as Webflow variables in the DS — Spacing collection.

Border Radius

Small 4px
Medium 8px
Large 16px
Full 9999px

Existing Components Registry

60 components currently registered on the site. Key components for the redesign:

Global Components

Header • Footer • Navbar Logo • Cursor • Global Styles • Cart • Dropdown Menu • User Avatar • Social Icons • Booking Modal

Buttons & Labels

Button Primary • Button Default • Button and Social Icons • Label Default • Label Primary • Limited Offer Badge • Offer Badge FIXED • Book Call Btm Button

Sections & Layout

Section Newsletter • Section CTA Contact • Section Home Clients • Services Grid Right • Pre-footer Blog • Home Projects 2 Col Cards • View My Recent Projects 3 Cards • My Values 2 Col • 4 Cards 2 Col • Project Detail 2 Col • Related Blog Posts Grid • Video Section • Video Lightbox • Stock Slider

Service & Promo Components

Kajabi Hero Card • Kajabi 50OFF Card • Kajabi Pricing with Offer • Kajabi How We Work Together • Kajabi Pre-Footer CTA • How To Redeem • FREE Trial CTA 1 • FREE Trial CTA 2 • Website Express • Website Express Sticky • Website Express Option • What Problem Are You Solving • How I Design • Graphic Design Intro • Services Templates • Contra

Existing Styles Summary

2,461 total styles (1,821 base + 640 combo classes). Major naming conventions: A/ • B/ • F/ • T/ prefix systems, plus Section, Home, Button, Heading, Pricing, and Content families. New DS/ prefix styles will coexist alongside existing styles — no modifications to legacy styles.