ui.grachev.pro

UI Library / Design System

Живой reference для интерфейсов grachev.pro / ai.grachev.pro: светлая тема, спокойная SaaS-подача, один основной accent, компактная сетка и переиспользуемые паттерны.

Design principles
  • Light theme by default
  • Radius 8–12px
  • Soft neutral palette
  • Subtle shadows
  • Readable compact spacing
Foundations

Базовые токены

Набор значений, от которых должны собираться страницы, формы, dashboard и продуктовые экраны.

Colors

Primary / 600#2563eb--primary-600
Primary / 50#eff6ff--primary-50
Neutral / 900#0f172a--neutral-900
Neutral / 700#334155--neutral-700
Neutral / 200#e2e8f0--neutral-200
Surface#ffffff--surface
Success#16a34a--success
Danger#dc2626--danger

Typography

Overline / 12
Body small / 14 — supporting text for forms and meta rows.
Body / 16 — default paragraph and product copy.
Title / 20 — card and module titles.
Title / 28 — major page sections.
Display / 44 — landing or top dashboard hero.

Spacing

4px
8px
12px
16px
20px
24px
32px
40px

Radius

8px
10px
12px

Shadows & icons

shadow-xs
shadow-sm
shadow-md
Components

UI primitives и reusable blocks

Компоненты сведены в один экран, чтобы ими было удобно пользоваться как reference при сборке интерфейсов.

Buttons

Inputs

Checkboxes & toggles

Public profile
Desktop notifications

Badges & alerts

DraftActiveHealthyBlocked
Success

Changes were published successfully.

Warning

Only admins can modify billing settings.

Cards

RevenueLast 30 days
+12%
$18,240

Stable trend with better conversion from organic traffic.

Table

PlanUsersStatusMRR
Starter3 usersActive$24
Growth12 usersTrial$96
Scale34 usersPaused$240
Patterns

Собранные продуктовые сценарии

Это уже не атомы, а готовые шаблоны экранов и блоков, пригодные для реального переиспользования.

Auth form

Sign in

Access the dashboard with your workspace credentials.

Forgot password?

Product card

Preview
Analytics Pro

Operational analytics for product, growth and support teams.

Featured
  • Unlimited dashboards
  • Segment filters
  • Role-based access

Dashboard widgets

Monthly revenue$82,400+8.2% vs previous month
Conversion4.8%Homepage → signup
System healthHealthy
99.98%

Filters, empty states, notifications

No saved filters yet

Create your first view to reuse it across customer and billing screens.

Payment synced

Stripe event processed and dashboard balance updated.

New teammate invited

Invitation email was sent and is awaiting acceptance.

Webhook failed

Retry scheduled in 2 minutes with exponential backoff.

Rules

Usage / do / don't

Короткие правила, чтобы библиотека оставалась цельной и не расползалась в случайные локальные решения.

Buttons

Do
  • Use one clear primary action per block
  • Keep labels action-first: Save, Invite, Publish
Don't
  • Do not place 3–4 primary buttons together
  • Do not use danger styles for neutral actions

Forms

Do
  • Keep labels visible above fields
  • Use helper text for format and side effects
Don't
  • Do not rely on placeholder as label
  • Do not stack too many controls without grouping

Data blocks

Do
  • Use cards for one semantic unit
  • Surface status with badge + short subtitle
Don't
  • Do not overload cards with dense chrome
  • Do not mix unrelated KPIs in one tile