Orbuculum Design Workspace

Робочі файли, прототипи, дизайн-система
Production
Live Main preview
Main
Справжня responsive HTML/CSS · 11 секцій · реальні тексти/кольори/токени з Figma
Редизайн / Концепти
WIP
Orbuculum Redesign — High-end
Преміальний редизайн головної
WIP
Orbuculum Redesign — Light
Світла версія преміального редизайну
WIP
Orbuculum Redesign — Dark
Темна версія преміального редизайну
Skill experiments
Experiment
Homepage — 5 styles
Головна в 5 візуальних мовах: Brutalist, Minimalist, Overdrive, Emil, Stitch
Experiment
high-end-visual-design
12 blocks · Soft Structuralism + Asymmetrical Bento · Double-Bezel · tokens Orbuculum
Experiment
overdrive
12 blocks · Aurora wash · scroll-driven progress · spring physics · neon CTAs
Experiment
emil-design-eng
12 blocks · Restrained motion engineering · Inter · custom easings · no overshoot
Experiment
stitch-design-taste
12 blocks · Inline image typography · Cabinet Grotesk + Satoshi · perpetual cascade
Sandbox
Experiment
Main_experiments
Пісочниця-копія Main для експериментів
Прототипи
WIP
Account Limitations Modal
9 стейтів · інтерактивний flow · autosave · per-project rules
WIP
Resizable Panels
Резинові панелі — тягни смужку між колонками
WIP
Onboarding Flow
Інтерактивний прототип онбордінгу
WIP
Onboarding Flow v3
Unified flow — переробка під текстовий прототип
WIP
Onboarding Flow v4
Unified flow — нова ітерація (копія v3)
WIP
Onboarding Flow v5
Unified flow — панель категорій над чат-інпутом
WIP
Onboarding Flow v5.2
A/B: панель категорій зверху (копія v5)
WIP
Onboarding v5 — Українська
Повний переклад unified flow українською
Редизайн / Концепти
WIP
Accounts & Transactions v2
Редизайн сторінки акаунтів і транзакцій
Документація
Docs
Onboarding Animations
Каталог всіх анімацій з живими демо та кодом

Colors

30 Primitives + 20 Onboarding. Натисни на свотч — справа відкриється повна версія з токеном, призначенням і alias.

Brand
White / Gray scale
Additional
Onboarding · Light
Onboarding · Dark
Neutral

Typography

Montserrat · 9 font sizes (10–32) · 5 weights · 24 text styles з Figma UI Kit. Натисни на стиль — справа повна версія + use-case + CSS.

Title — заголовки контенту
Subtitle — підзаголовки
Button — текст у кнопках
Body — основний контент
Small — вторинний текст
Caption — підпис
Micro — найменший

Spacing

Канонічна шкала Spacing/0..10 (0–44px) + semantic tokens. Натисни на токен — справа повна інфа.

Base scale
Popup / Modal
Semantic tokens

Radius

Базова шкала radius_xs / s / m / l / full + semantic tokens.

Base scale
Semantic tokens

Effects

Тіні з UI Kit — popup_shadow, modal (багатошарова), btn. Натисни — побачиш реальний CSS.

Shadow effects

Buttons

Primary · Secondary · Back · Text · Menu · Register · Google · Accept/Decline · Infobox · Filter. Натисни на кнопку — справа побачиш усі токени що в неї входять.

Primary — 3 розміри × 5 стейтів

Наведи мишею — побачиш hover. Утримуй ліву кнопку — active. Tab з клавіатури — focused (тінь з’являється тільки при keyboard, не на клік мишею — :focus-visible). В правій панелі можеш форснути будь-який стейт для огляду.

Secondary — 3 розміри, бордерна
Back — 2 варіанти (no stroke / stroke for dark)
Text — inline action
Menu — 2 розміри
Register — link між sign-up і login
Google OAuth
Accept / Decline — на запит
Infobox — inline-підказка
Filter — sort/filter тригер

Controls

Switch · Tabs · Radio · Checkbox · Selector · Quantity · Close · Dropdown · Chevron · Swap. Клік — токени справа.

Switch — 6 варіантів (Big / Small × Off / On / Active)
Tabs — 4 варіанти (Desktop / Mobile × Selected / Unselected)
Radio — 3 стейти
Checkbox — 4 стейти
Selector + / − — 4 варіанти
Quantity Selector — 3 стейти
Close — 3 розміри
Dropdown Arrow — 4 варіанти
Chevron — 2 розміри
Swap — 2 стейти

Inputs

Input · Search · Day Input · Access Input · Transaction Input. Натисни на будь-який стейт — справа токени.

Input — Big (50) Light Gray × 6 стейтів
Input — Medium (40) Light Gray × 6 стейтів
Input — Medium (40) White × 6 стейтів
Search — Light × 6 стейтів
Search — Dark × 6 стейтів (на темному BG)
Day Input — 6 стейтів
Access Input — 6 стейтів
Transaction Input — 6 стейтів (Commission Left)

Tooltips & Toasts

Toast Notification (5 типів) · Tooltip (9 arrow positions × 2 colors). Натисни — справа побачиш токени.

Toast Notification — 5 типів

Кожен toast має кольорову лінію зверху, заголовок + опис, і close-іконку. Тип визначає колір лінії — більше нічого не змінюється.

Tooltip Dark — 9 позицій стрілки
Tooltip Light — 9 позицій стрілки (для темних BG)

Menu / Navigation

Logo · Menu Tab · Mobile Tab Bar · Workspace · Plan Tag · Instrument Tab · Header. Темне тло — реальний контекст Sidebar/Header.

Logo — 2 варіанти
Menu Tab — 4 варіанти (Full / Icon × Default / Hover)
Mobile Tab Bar — 4 варіанти (різний активний пункт)
Workspace card — 2 варіанти
Plan Tag — 5 варіантів
Instrument Tab — 2 варіанти
Header — preview

Calendar

Cell · Week · Calendar (full + Small) · Selector періоду.

📆

Coming soon

Інтерактивний календар з period selector.

Onboarding & AI

Avatar · Chat Button · Drop · Apps Connection · Category Chip · Card Badge · Tip · Progress · Account Name. Темне тло — реальний onboarding-контекст.

Avatar Uploading — 5 стейтів
Chat Button — 4 типи
Drop or Upload — 3 стейти
Apps Connection — 4 стейти
Category Chip — 4 стейти
Card Badge — 3 стейти
Tip — 2 типи
Progress bar — 3 fill-стейти
Account Name — 3 стейти
App Option — 5 стейтів × 2 типи (App / Connect)

Icons

107 standalone (Solid 46 + Outlined 42 + Other 19) + 11 component sets.

🖼

Coming soon

Бібліотека іконок з фільтрами і клікабельним copy для SVG.

Layouts & Breakpoints

1920 / 1300 / 1170 / 932 / 900 / 768 / 540 / 375.

🔶

Coming soon

Visual breakpoint scale з готовими layout-templates.

Patterns

Block · Drawer · Empty state · Inline component · Modal · Page · Popup · Toast · Wizard.

▦

Coming soon

Композиційні патерни — як збирати екрани з компонентів.

Orbuculum Design · design.corp.orbuculum.app