DESIGN SYSTEM & STYLEGUIDE

Datvi Soft Structuralism Design System

A living directory of typography, color swatches, standardized card shadows, button states, Georgian script rules, and stylized interface components.

Typography Colors & Tokens Standardized Card Shadows Buttons & Actions Form Controls & Pills
01 / TYPOGRAPHY & SCRIPT

Type Hierarchy & Georgian Alignment

Geist Display & Geist Mono
Heading 1 — 3rem (48px) / -0.04em tracking

Datvi Digital Experience

Heading 2 — 2.25rem (36px) / -0.04em tracking

Crafted with intent & outcome

Heading 3 — 1.5rem (24px)

Flexible retainers for startups

Body Text — 1rem (16px) / 1.5 line-height

From high-converting SaaS landing pages to full product design systems and cross-platform mobile apps.

Label Mono — 0.75rem (12px) / Uppercase 0.08em

SELECTED WORK REEL (14) — 2026

ქართული ნოტო სანსი & მთავრული
Georgian Heading 1 — Line Height 1.13

დათვი დიზაინ სტუდია

Georgian Heading 2

შექმნილი მიზნით და შედეგით

Georgian Body — Line Height 1.25

მაღალი კონვერსიის მქონე SaaS ვებ-საიტებიდან სრულ პროდუქტის დიზაინ სისტემებამდე და მობილურ აპლიკაციებამდე.

Mtavruli OpenType Uppercase
პროექტის დაწყება ყველა ნამუშევარი
02 / COLOR PALETTE

Color Tokens & Surfaces

#000000

Ink (Headings / Body)

--color-ink

#1a94f0

Datvi Brand Accent

--color-accent

#0f6fc0

Accent Ink (Hovers / Eyebrows)

--color-accent-ink

#5a5a5f

Muted Gray

--color-muted

#f3f9fe

Pale Blue Surface

--color-surface

#ffffff

Pure Paper Canvas

--color-paper

#e6ecf2

Cool Hairline Border

--color-line

On-Blue Mode

Blue Inverted Context

.on-blue container

03 / CARD SHADOW ELEVATION

Standardized Ambient Blue Shadows

Case study cards, flexible plan cards, and project reel cards share the exact same saved shadow token .card-shadow with ambient blue diffusion.

1. Case Study Card
T-Recs agency website
UI / UX and web design in Framer

T-Recs agency website

A high-impact digital experience built to capture attention and convert creative inquiries.
2. Flexible Plan Card
Solo Specialist 01
Web or Illustration specialist

Solo Specialist

Up to 20 hrs/week

Select Plan
3. Reel / Exploration Card
T-Recs agency website
UI / UX and web design in Framer

T-Recs agency website

01
04 / ACTION SYSTEM

Button System & Hover Animations

Standard Surface Buttons
Primary Action Ghost Border

Hover over the primary button to watch the diagonal ↗ arrow smoothly rotate 45° to horizontal →.

Inverted On-Blue Context
On-Blue Primary On-Blue Ghost

Automatically adjusts contrast when placed inside blue headers or primary callout sections.

05 / UI ELEMENTS & CONTROLS

Form Controls & Stylized Components

Form Inputs & Textarea
Badges, Pills & Status Indicators
Category Badges
Featured SaaS Design Framer Studio
Availability Indicator
Available for Q3/Q4 Projects
Pill Navigation Bar (Capsule)
Home Work Services Contact