HomeWork
AboutSettings

Глобальные Цвета

Используются CSS-переменные из globals.css в формате OKLCH. Применяются к текущей странице.

background

Background

bg-background
foreground

Foreground

bg-foreground
primary

Primary

bg-primary
muted

Muted

bg-muted
accent

Accent

bg-accent
card

Card

bg-card

Типографика

Заголовки (h1 — h6)

h2
text-4xl md:text-5xlfont-bold (default)leading-[1.15]tracking-tightManrope (font-display)

Наши возможности

h3
text-3xl md:text-4xlfont-bold (default)leading-[1.2]tracking-tightManrope (font-display)

Веб-разработка и дизайн

h4
text-2xl md:text-3xlfont-semibold (default)leading-[1.3]tracking-tightManrope (font-display)

Комплексный подход к продукту

Текстовые стили

body
text-basefont-normal (default)leading-[1.6]tracking-normalInter (font-body)

Каждый проект начинается с исследования: мы изучаем рынок, анализируем конкурентов и формируем стратегию.

body-sm
text-smfont-normal (default)leading-[1.5]tracking-normalInter (font-body)

Доступные и простые решения для малого и среднего бизнеса позволяют быстро запустить продукт.

caption
text-xsfont-medium (default)leading-[1.4]tracking-widerInter (font-inter)

ДИЗАЙН СИСТЕМА · ВЕРСИЯ 2.0 · DIPLE AGENCY

Атомы & Базовые элементы (UI)

UI компоненты shadcn и наши атомы. Путь: @/components/ui/ и @/components/atoms/

Атомы (Atoms)
Logo, TextEmoji и другие базовые элементы
Logo
D
Diple
TextEmoji
( ⌐■_■ )
Кнопки (Buttons)
Различные варианты и размеры кнопок

Варианты

Размеры

Бейджи (Badges)
Статусы, теги и метки
DefaultSecondaryOutlineError
Поля ввода (Inputs)
Интерактивные элементы
Accordion, Breadcrumb, Dialog, DropdownMenu

🏠 Главная страница

Компоненты, используемые только на главной (/). Отличаются от внутренних страниц dashboard-сеткой и уникальными карточками.

organisms/HeroSectionmolecules/ServiceCardmolecules/AboutCardmolecules/CaseStudyCardmolecules/NewsletterCard

OHeroSection(organism)

Превращаем
сложную
цифрув измеримый рост

Мы сопровождаем компании на этапах их роста, чтобы формировать перспективы будущего.

Креативное агентство дизайна: брендинг, стратегия, сайты и веб-приложения.

MServiceCard(molecule · 3 варианта)

variant="transparent"
Ads, Performance

Контекстная реклама

Yandex, Google

Yandex Direct, Google Ads

variant="default"
Dev, Frontend

Разработка сайтов

Frontend + CMS

Next.js, Tailwind, WordPress

variant="wide"
Automation, Sales

CRM Bitrix 24

Integration & Setup

Bitrix24, API, Business Process

MAboutCard(molecule)

Est. 2018

About Company

Мы берём на себя все этапы разработки и развития продукта от идеи до релиза.

Читать подробнее

MCaseStudyCard(molecule)

Case Image
CASE STUDY

Rebranding NeoBank

Редизайн интерфейсов для улучшения пользовательского опыта и конверсии

Смотреть кейс

MNewsletterCard(molecule)

Weekly Insights

Get the latest digital marketing trends delivered to your inbox.