Colors
Core Colors (Immutable)
Neutral Palette
Product Accent Palettes
Feedback Colors
Text Colors
Primary #252B40
12.4:1 on white
Muted var(--neutral-500)
4.7:1
Inverse #FFF
Typography
Font Families
Fraunces — Display
Page titles, hero headings, greeting text
DM Sans — Body
Everything: body, buttons, labels, nav, badges
DM Mono — Data
Data values, dates, amounts, code blocks
Inter — UI Inputs
Form inputs and textareas only
Type Scale — Live Specimens
display-lg 32px
display-md 26px
heading-xl 20px
heading-lg 16px
heading-md 14px
body-lg 16px — The quick brown fox jumps over the lazy dog
body-md 14px — The quick brown fox jumps over the lazy dog
body-sm 13px — The quick brown fox jumps over the lazy dog
caption 12px — Secondary helper text
overline 11px
data-md — $12,450.00 · 2026-03-23
input 14px — Placeholder text in form fields
Spacing
Base unit: 2px. All values from scale. No intermediate values.
Shadows & Elevation
Focus Ring × 3 Products
Iconography
Icon set: Lucide (stroke-based, 24×24 viewBox,
stroke-width 2). Все иконки используют currentColor и
наследуют цвет родителя.
Использование:
<svg class="ico"><use
href="#i-name"/></svg>. Размеры: .ico-sm (14px), .ico-md (16px),
.ico-lg (18px), .ico-xl (20px).
Sizes
14px (.ico-sm)
16px (.ico-md)
18px (.ico-lg)
20px (.ico-xl)
24px (default)
Product Accent Coloring
Full Icon Library
Usage Rules
Decorative AI icons (avatar ring, step progress) =
product accent
Don't mix icon sets — stick to Lucide only
Text-linked AI elements (badges, links) = core-purple #5558E3
Don't use emoji as icons — always use SVG from the sprite
Use currentColor so icons inherit parent color
Don't hardcode icon colors — use CSS variables
Selection Controls
Hub
Checkboxes
Radio
Toggle
Connect
Checkboxes
Radio
Toggle
Insights
Checkboxes
Radio
Toggle
Show CSS
Copy
.checkbox-wrap { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; }
.checkbox-box {
width:18px; height:18px; border-radius:4px; border:2px solid var(--border-default);
display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 150ms;
}
.checkbox-box.checked { background:var(--accent-primary); border-color:var(--accent-primary); }
.checkbox-box.checked::after { content:''; width:10px; height:10px; display:block; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.radio-wrap { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; }
.radio-circle {
width:18px; height:18px; border-radius:50%; border:2px solid var(--border-default);
display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 150ms;
}
.radio-circle.checked { border-color:var(--accent-primary); }
.radio-circle.checked::after { content:''; width:8px; height:8px; border-radius:50%; background:var(--accent-primary); }
.toggle-track {
width:40px; height:22px; border-radius:var(--r-full); background:var(--neutral-300);
position:relative; cursor:pointer; transition:background 100ms ease;
}
.toggle-track.on { background:var(--accent-primary); }
.toggle-track.on .toggle-thumb { left:20px; }
.toggle-thumb {
width:18px; height:18px; border-radius:50%; background:#fff; position:absolute;
top:2px; left:2px; transition:left 100ms ease; box-shadow:0 1px 2px rgba(0,0,0,0.15);
}
.toggle-thumb { left:20px; }
Dropdowns
Show CSS
Copy
.dropdown-menu {
background:#fff; border-radius:var(--r-md); box-shadow:var(--shadow-md); padding:4px;
min-width:180px; border:1px solid var(--border-light);
}
.dropdown-item {
display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:13px;
border-radius:var(--r-sm); cursor:pointer; transition:background 100ms;
color:var(--text-primary);
}
.dropdown-item:hover { background:var(--neutral-50); }
.dropdown-item.selected { background:var(--accent-light); color:var(--accent-deep); font-weight:500; }
Badges & Status Pills
Product Accent Badge × 3
Connect
Connect badge
5 members
Insights
Insights badge
12 rows
Feedback Badges (Shared)
Neutral
Status Pills & Type Tags
Status pills (dot + label) and transaction type badges (debit red,
credit green).
Hub
● Connected
● Pending
● Offline
debit
credit
Connect
● Connected
● Pending
● Offline
debit
credit
Insights
● Connected
● Pending
● Offline
debit
credit
Show CSS
Copy
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--r-full); font-size:11px; font-weight:500; }
.badge-accent { background:var(--accent-light); color:var(--accent-deep); }
.badge-success { background:rgba(45,139,94,0.1); color:#2D8B5E; }
.badge-error { background:rgba(220,38,38,0.1); color:#DC2626; }
.badge-warning { background:rgba(217,119,6,0.1); color:#D97706; }
.badge-info { background:rgba(85,88,227,0.1); color:#5558E3; }
.badge-neutral { background:var(--neutral-100); color:var(--neutral-600); }
.badge{font-size:10px;padding:2px 8px;border-radius:10px;background:var(--accent-light);color:var(--accent-deep)}
.badge{background:var(--bg-primary);color:var(--accent-primary);padding:2px 8px;border-radius:var(--r-full);font-size:10px;font-weight:600;margin-left:6px}
.badge-accent { background:var(--accent-light); color:var(--accent-deep); }
.badge-success { background:rgba(45,139,94,0.1); color:#2D8B5E; }
.badge-error { background:rgba(220,38,38,0.1); color:#DC2626; }
.badge-warning { background:rgba(217,119,6,0.1); color:#D97706; }
.badge-info { background:rgba(85,88,227,0.1); color:#5558E3; }
.badge-neutral { background:var(--neutral-100); color:var(--neutral-600); }
.ds-status-pill{font-family:var(--font-mono);font-size:10px;font-weight:500;padding:3px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:4px}
.ds-status-pill.ok{background:rgba(45,139,94,0.08);color:#2D8B5E}
.ds-status-pill.warn{background:rgba(217,119,6,0.08);color:#D97706}
.ds-status-pill.error{background:rgba(220,38,38,0.06);color:#DC2626}
.ds-type{font-size:10px;font-weight:500;padding:2px 8px;border-radius:4px;font-family:var(--font-mono);text-transform:capitalize}
.ds-type-debit{background:rgba(220,38,38,0.06);color:#DC2626}
.ds-type-credit{background:rgba(45,139,94,0.06);color:#2D8B5E}
.ds-type-debit{background:rgba(220,38,38,0.06);color:#DC2626}
.ds-type-credit{background:rgba(45,139,94,0.06);color:#2D8B5E}
Tabs
Hub
Documents
Chat
Settings
Connect
Rooms
People
Activity
Insights
Analysis
Sources
History
Show CSS
Copy
.tabs { display:flex; gap:0; border-bottom:1px solid var(--border-default); }
.tab-item {
padding:10px 20px; font-size:13px; font-weight:500; color:var(--text-muted);
border-bottom:2px solid transparent; cursor:pointer; transition:all 150ms;
background:none; border-top:none; border-left:none; border-right:none;
}
.tab-item.active { color:var(--accent-primary); border-bottom-color:var(--accent-primary); }
.tab-item:hover:not(.active) { color:var(--text-primary); }
Cards
Hub
Q4 Financial Report.pdf
Uploaded 2 hours ago · 2.4 MB
PDF
Processed
Connect
Design Review Room
12 members · Last active 5 min ago
Active
3 new
Insights
Revenue Analysis
Auto-generated · 148 data points
Complete
AI
Show CSS
Copy
.card {
background:#fff; border:1px solid var(--border-default); border-radius:var(--r-lg);
padding:20px; box-shadow:var(--shadow-sm);
}
.card-title { font-size:14px; font-weight:600; margin-bottom:4px; }
.card-desc { font-size:13px; color:var(--text-secondary); }
.card-title { font-size:14px; font-weight:600; margin-bottom:4px; }
.card-desc { font-size:13px; color:var(--text-secondary); }
Toasts / Notifications
Transient notifications. Feedback toasts use semantic colors. Pill
toasts use core-dark.
Feedback Toasts (Shared)
Connect
Warning. Slow connection.
Pill Toast (Dark, Animated)
Bottom-center notification pill. Dark bg (core-dark), white text,
green check icon. Slides up on show, auto-dismisses.
Show CSS
Copy
.toast {
display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--r-md);
box-shadow:var(--shadow-md); background:#fff; font-size:13px; max-width:320px;
}
.toast-icon { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; flex-shrink:0; }
.toast-success .toast-icon { background:#2D8B5E; }
.toast-error .toast-icon { background:#DC2626; }
.toast-warning .toast-icon { background:#D97706; }
.toast-icon { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; flex-shrink:0; }
.toast-icon { background:#2D8B5E; }
.toast-icon { background:#DC2626; }
.toast-icon { background:#D97706; }
.toast-success .toast-icon { background:#2D8B5E; }
.toast-error .toast-icon { background:#DC2626; }
.toast-warning .toast-icon { background:#D97706; }
.ds-toast-animated{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:var(--neutral-900);color:#fff;border-radius:var(--r-md);font-size:12px;font-weight:500;box-shadow:var(--shadow-lg)}
.ds-toast-animated svg{width:14px;height:14px;color:var(--green-500)}
Modals
Hub
Drag and drop files here or click to browse. Supported: PDF,
DOCX, CSV.
Connect
Choose a name and invite members to start collaborating.
Insights
Select data sources and parameters for the analysis run.
Show CSS
Copy
.modal-preview {
background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-xl);
width:100%; max-width:280px; overflow:hidden;
}
.modal-header { padding:16px 20px; border-bottom:1px solid var(--border-light); display:flex; justify-content:space-between; align-items:center; }
.modal-header h3 { font-size:16px; font-weight:600; }
.modal-body { padding:20px; font-size:13px; color:var(--text-secondary); }
.modal-footer { padding:12px 20px; border-top:1px solid var(--border-light); display:flex; gap:8px; justify-content:flex-end; }
Drop Zone
Hub
Drop files here or
browse
Connect
Drop files here or
browse
Insights
Drop files here or
browse
Show CSS
Copy
.drop-zone {
border:2px dashed var(--border-default); border-radius:var(--r-xl); padding:32px;
text-align:center; transition:all 200ms;
}
.drop-zone:hover { border-color:var(--accent-primary); background:var(--accent-light); }
.drop-zone-icon { font-size:24px; color:var(--neutral-400); margin-bottom:8px; }
.drop-zone-text { font-size:13px; color:var(--text-secondary); }
.ds-drop-zone{border:2px dashed var(--border-default);border-radius:var(--r-md);padding:24px 16px;text-align:center;cursor:pointer;transition:all var(--dur-normal)}
.ds-drop-zone:hover{border-color:var(--accent-primary);background:var(--accent-light)}
.ds-drop-zone svg{width:28px;height:28px;color:var(--text-muted);margin-bottom:6px}
.ds-drop-zone h4{font-size:13px;font-weight:600;margin-bottom:2px}
.ds-drop-zone p{font-size:11px;color:var(--text-muted)}
.ds-drop-zone .browse{color:var(--accent-primary);font-weight:500}
Topbar
Standard Topbar (core-dark)
Insights
Alani Insights — Analysis
AO
AI Chat Topbar (core-purple)
Show CSS
Copy
.topbar {
height:52px; background:var(--core-dark); display:flex; align-items:center;
justify-content:space-between; padding:0 20px;
}
.topbar-title { font-size:14px; font-weight:600; color:#fff; }
.topbar-ai { background:var(--core-purple); }
.topbar-title { font-size:14px; font-weight:600; color:#fff; }
Breadcrumbs
Show CSS
Copy
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; }
.breadcrumb-link { color:var(--text-muted); text-decoration:none; }
.breadcrumb-link:hover { color:var(--accent-primary); }
.breadcrumb-sep { color:var(--neutral-300); }
.breadcrumb-current { color:var(--text-primary); font-weight:500; }
.ds-breadcrumb{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted)}
.ds-breadcrumb a{color:var(--text-muted);text-decoration:none;transition:color var(--dur-fast)}
.ds-breadcrumb a:hover{color:var(--core-purple)}
.ds-breadcrumb svg{width:10px;height:10px}
Bottom Nav (Mobile)
Show CSS
Copy
.bottom-nav {
display:flex; justify-content:space-around; padding:8px 0 6px; background:#fff;
border-top:1px solid var(--border-default);
}
.bottom-nav-item { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px; color:var(--neutral-400); cursor:pointer; }
.bottom-nav-item.active { color:var(--accent-primary); }
.bottom-nav-icon { width:22px; height:22px; border-radius:4px; background:currentColor; opacity:0.3; }
.bottom-nav-item.active .bottom-nav-icon { opacity:0.6; }
.bottom-nav-item { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px; color:var(--neutral-400); cursor:pointer; }
.bottom-nav-item.active { color:var(--accent-primary); }
.bottom-nav-item.active .bottom-nav-icon { opacity:0.6; }
Data Table
Hub
File
Size
Status
Report.pdf
2.4 MB
Done
Data.csv
156 KB
Processing
Notes.docx
89 KB
Queued
Connect
Room
Members
Status
Design
12
Active
Dev
8
Quiet
Archive
0
Closed
Insights
Metric
Value
Δ
Revenue
$12.4K
+12%
Users
1,248
+5%
Churn
3.2%
+0.4%
Show CSS
Copy
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th { background:var(--neutral-50); padding:10px 12px; text-align:left; font-size:11px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.3px; border-bottom:1px solid var(--border-default); }
.data-table td { padding:10px 12px; border-bottom:1px solid var(--border-light); }
.data-table tr:hover td { background:var(--neutral-50); }
.data-table .mono { font-family:var(--font-mono); font-size:12px; }
Skeleton Loading
Placeholder shimmers while content loads. Accent tint on shimmer
animation varies by product.
Show CSS
Copy
.skeleton { background:var(--neutral-100); border-radius:var(--r-sm); animation:pulse 1.5s ease infinite; }
@keyframes pulse { 0%,100%{opacity:0.4}
Empty States
Hub
No documents yet
Upload a file to get started
Upload File
Connect
No rooms found
Create a room to start collaborating
Create Room
Insights
No analyses yet
Run your first analysis to see results
Run Analysis
Show CSS
Copy
.empty-state { text-align:center; padding:40px 20px; }
.empty-icon { width:48px; height:48px; border-radius:var(--r-xl); background:var(--accent-light); margin:0 auto 16px; display:flex; align-items:center; justify-content:center; }
.empty-icon-inner { width:24px; height:24px; border-radius:50%; background:var(--accent-primary); opacity:0.5; }
Chat Bubbles
User bubble bg = product accent · AI bubble bg = #f5f6f8 (shared) · AI
avatar = accent-light bg + accent-primary icon
Hub
Hi! I can help you analyze your documents. What would you like
to know?
Summarize the Q4 report please
Sure! Here's a summary of the key findings...
Connect
Welcome to the Design Review room! Ask me anything.
Show me the latest discussions
Here are the 3 most recent discussion threads...
Insights
Ready to analyze your data. What metrics interest you?
Revenue by Quarter
Q1
$42.1K
Q2
$48.3K
Q3
$51.7K
Q4
$59.2K
Show CSS
Copy
.chat-row { display:flex; gap:10px; margin-bottom:12px; }
.chat-row.user { justify-content:flex-end; }
.bubble {
max-width:280px; padding:14px 16px; font-size:14px; line-height:1.6;
border-radius:12px;
}
.bubble-user { background:var(--accent-primary); color:#fff; border-radius:12px 12px 4px 12px; }
.bubble-ai { background:var(--bg-secondary); color:var(--text-primary); }
.bubble-user { background:var(--accent-primary); color:#fff; border-radius:12px 12px 4px 12px; }
.bubble-ai { background:var(--bg-secondary); color:var(--text-primary); }
.ai-avatar { width:28px; height:28px; border-radius:50%; background:var(--accent-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ai-avatar-icon { width:14px; height:14px; border-radius:50%; background:var(--accent-primary); }
Action Chips
Hub
Connect
Insights
Show CSS
Copy
.chip {
display:inline-flex; align-items:center; gap:6px; padding:8px 14px;
border-radius:var(--r-full); border:1px solid var(--border-default);
background:#fff; font-size:13px; color:var(--text-primary); cursor:pointer; transition:all 150ms;
}
.chip:hover { border-color:var(--accent-primary); background:var(--accent-light); color:var(--accent-deep); }
.chip .ico { width:14px; height:14px; vertical-align:-2px; }
Source Citations
Hub
1
Q4 Financial Report
report.pdf · page 12
2
Board Meeting Notes
notes.docx · section 3
Connect
1
Design Guidelines
shared in #design
2
Sprint Retrospective
shared in #dev
Insights
1
Revenue Dataset
revenue_2025.csv
2
User Analytics
analytics_q4.csv
Show CSS
Copy
.citation-card {
display:flex; align-items:center; gap:10px; padding:10px 14px;
background:#fff; border:1px solid var(--border-default); border-radius:var(--r-md);
font-size:12px; cursor:pointer; transition:all 150ms;
}
.citation-card:hover { border-color:var(--accent-primary); box-shadow:var(--shadow-sm); }
.citation-num { width:22px; height:22px; border-radius:50%; background:var(--accent-light); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; flex-shrink:0; }
.citation-title { font-weight:500; color:var(--text-primary); }
.citation-domain { color:var(--text-muted); font-size:11px; }
AI States
AI Thinking / Loading
AI Step Progress
Показаны 4 состояния: Collapsed (свёрнутый),
Expanded (развёрнутый со списком шагов),
Success (результат найден), Error (ошибка + подсказки).
Нажмите на заголовок для toggle.
State 1 — Collapsed (Loading)
Hub
Checking recent uploads...
Connect
Scanning room activity...
State 2 — Expanded (Step List)
Hub
Checking recent uploads...
State 3 — Success (File Found)
Hub
PDF
AI Safety Guidelines v2.pdf
2.4 MB · Updated 3 days ago
What's in this file?
Find another file
Connect
DOC
Brand Guidelines Q1.docx
1.1 MB · Shared by Alex
Summarize this
Search again
Insights
MD
metrics-dashboard-spec.md
48 KB · Updated today
Extract key metrics
Compare versions
State 4 — Error (Not Found + Suggestions)
Hub
Couldn't find the exact file. The room may not contain a
matching document.
Search again
Try different keywords
Did you mean?
PDF
AI Safety Overview.pdf
1.8 MB · 5 days ago
MD
safety-checklist.md
12 KB · 2 weeks ago
Connect
No matching threads found in this room.
Search again
Browse all rooms
Did you mean?
DOC
Design Review Notes.docx
890 KB · Shared yesterday
Insights
Query returned no results. Check your date range or filters.
Adjust filters
Try broader query
Did you mean?
PDF
Q4 Revenue Report.pdf
3.2 MB · Last month
MD
metrics-definitions.md
22 KB · 3 days ago
Chat Empty State
Hub
Good morning, Artem
How can I help you today?
Connect
Welcome to Connect
Start a conversation in any room
Insights
Ready to analyze
Ask a question about your data
Show CSS
Copy
.step-container { background:var(--bg-primary); border-radius:var(--r-lg); border:1px solid var(--border-default); overflow:hidden; }
.step-header { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; user-select:none; }
.step-header:hover { background:var(--neutral-50); }
.typing-dots { display:flex; gap:5px; align-items:center; }
.typing-dots { display:flex; gap:5px; align-items:center; }
.typing-dot {
width:8px; height:8px; border-radius:50%; background:var(--accent-primary);
animation:typing-bounce 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay:0.2s; }
.typing-dot:nth-child(3) { animation-delay:0.4s; }
Avatars
Show CSS
Copy
.avatar {
width:32px; height:32px; border-radius:var(--r-full); display:flex; align-items:center;
justify-content:center; font-size:13px; font-weight:600; color:#fff; flex-shrink:0;
}
.avatar-sm { width:24px; height:24px; font-size:10px; }
.avatar-lg { width:40px; height:40px; font-size:16px; }
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:11px}
.avatar-sm { width:24px; height:24px; font-size:10px; }
.avatar-lg { width:40px; height:40px; font-size:16px; }
Toggle Switch
Click toggles to interact. On state = product accent.
Show CSS
Copy
.ds-toggle{width:36px;height:20px;border-radius:10px;background:var(--border-default);position:relative;cursor:pointer;transition:background var(--dur-normal);flex-shrink:0}
.ds-toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--dur-normal)}
.ds-toggle.on{background:var(--accent-primary)}
.ds-toggle.on::after{transform:translateX(16px)}
Command Search
Topbar search widget with keyboard shortcut badge. Lives on core-dark
background.
Show CSS
Copy
.ds-cmd-search{display:flex;align-items:center;gap:6px;padding:5px 12px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.08);border-radius:var(--r-sm);color:rgba(255,255,255,0.35);font-size:12px;min-width:170px;font-family:var(--font-body)}
.ds-cmd-search svg{width:13px;height:13px;flex-shrink:0;stroke:currentColor}
.ds-cmd-search kbd{font-family:var(--font-mono);font-size:10px;padding:1px 5px;background:rgba(255,255,255,0.1);border-radius:3px;margin-left:auto}
Filter Panel & Tags
Expandable filter bar with removable filter tags. Tags use core-purple
tint.
Hub
Category
All categories
Meals
Type
All types
Debit
Date From
Filtered:
Meals & Entertainment
Jul 2021
3 records
Connect
Category
All categories
Meals
Type
All types
Debit
Date From
Filtered:
Meals & Entertainment
Jul 2021
3 records
Insights
Category
All categories
Meals
Type
All types
Debit
Date From
Filtered:
Meals & Entertainment
Jul 2021
3 records
Show CSS
Copy
.ds-filter-panel{display:flex;padding:12px 16px;background:var(--bg-primary);border:1px solid var(--border-default);border-radius:var(--r-md);gap:12px;align-items:flex-end;flex-wrap:wrap}
.ds-filter-group{display:flex;flex-direction:column;gap:3px}
.ds-filter-group label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted)}
.ds-filter-group select,.ds-filter-group input{padding:5px 8px;border:1px solid var(--border-default);border-radius:var(--r-sm);font-size:12px;background:var(--bg-secondary);color:var(--text-primary);outline:none;font-family:var(--font-body);min-width:110px}
.ds-filter-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:rgba(85,88,227,0.07);color:var(--core-purple);border-radius:12px;font-size:11px;font-weight:500}
.ds-filter-tag svg{width:10px;height:10px;cursor:pointer}
Category Pills
Colored category labels for data rows. Each category has a unique
pastel bg + dark text pair.
Hub
Meals & Entertainment
Business Expenses
Travel & Transport
Software & SaaS
Income
Connect
Meals & Entertainment
Business Expenses
Travel & Transport
Software & SaaS
Income
Insights
Meals & Entertainment
Business Expenses
Travel & Transport
Software & SaaS
Income
Show CSS
Copy
.ds-cat{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;display:inline-block;white-space:nowrap}
.ds-cat-meals{background:#FEF3C7;color:#92400E}
.ds-cat-biz{background:#DBEAFE;color:#1E40AF}
.ds-cat-travel{background:#D1FAE5;color:#065F46}
.ds-cat-software{background:#EDE9FE;color:#5B21B6}
.ds-cat-income{background:#D1FAE5;color:#065F46}
Row Actions
Hover-reveal action buttons on table rows. 26px square buttons with
1px border.
Show CSS
Copy
.ds-row-actions{display:flex;gap:4px}
.ds-row-actions button{width:26px;height:26px;border-radius:var(--r-sm);border:1px solid var(--border-default);background:var(--bg-primary);display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;transition:all var(--dur-fast)}
.ds-row-actions button:hover{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--border-strong)}
Chat SQL Block
Syntax-highlighted code block inside AI chat. Dark bg (core-dark),
keywords purple, functions blue, strings green, numbers orange.
Generated SQL
SELECT category,
SUM (amount)
AS total
FROM bank_statements
WHERE type =
'debit'
ORDER BY total
DESC LIMIT
5 Copy
Show CSS
Copy
.ds-chat-sql{background:var(--neutral-900);border-radius:var(--r-md);padding:12px 14px;margin:8px 0;position:relative;overflow:hidden}
.ds-chat-sql-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:rgba(255,255,255,0.35);margin-bottom:8px}
.ds-chat-sql code{font-family:var(--font-mono);font-size:11px;line-height:1.6;display:block;color:rgba(255,255,255,0.75);white-space:pre}
.ds-chat-sql .kw{color:#C792EA}
.ds-chat-sql .fn{color:#82AAFF}
.ds-chat-sql .str{color:#C3E88D}
.ds-chat-sql .num{color:#F78C6C}
.ds-chat-sql-copy{position:absolute;top:8px;right:8px;font-size:10px;padding:2px 8px;border-radius:4px;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.5);border:none;cursor:pointer;font-family:var(--font-mono)}
.ds-chat-sql-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:rgba(255,255,255,0.35);margin-bottom:8px}
.ds-chat-sql code{font-family:var(--font-mono);font-size:11px;line-height:1.6;display:block;color:rgba(255,255,255,0.75);white-space:pre}
Chat Result Table
Inline data results inside AI chat. Bar fill = product accent. Mono
values right-aligned.
Show CSS
Copy
.ds-chat-result{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--r-md);padding:12px 14px;margin:8px 0}
.ds-chat-result h5{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted);margin-bottom:10px}
.ds-cr-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px}
.ds-cr-bar{flex:1;height:6px;background:var(--border-default);border-radius:3px;overflow:hidden}
.ds-cr-bar-fill{height:100%;border-radius:3px;background:var(--accent-primary);transition:width var(--dur-slow)}
.ds-cr-bar-fill{height:100%;border-radius:3px;background:var(--accent-primary);transition:width var(--dur-slow)}
Chat Bar Chart
Mini bar chart inside AI chat responses. Bars = product accent at 80%
opacity.
Show CSS
Copy
.ds-chart-bars{display:flex;align-items:flex-end;gap:6px;height:80px;padding:0 4px}
.ds-chart-bars{display:flex;align-items:flex-end;gap:6px;height:80px;padding:0 4px}
.ds-chart-bar-col{display:flex;flex-direction:column;align-items:center;flex:1;height:100%}
.ds-chart-bar{flex:1;width:100%;border-radius:3px 3px 0 0;background:var(--accent-primary);opacity:0.8;margin-top:auto}
.ds-chart-bar-label{font-size:9px;color:var(--text-muted);margin-top:4px;font-family:var(--font-mono)}
.ds-chart-bar-label{font-size:9px;color:var(--text-muted);margin-top:4px;font-family:var(--font-mono)}
Chat Follow-ups
Suggestion chips after AI responses. Pill-shaped, hover = product
accent border + light bg.
Hub
Break down by vendor
Show monthly trend
Export to CSV
Connect
Break down by vendor
Show monthly trend
Export to CSV
Insights
Break down by vendor
Show monthly trend
Export to CSV
Show CSS
Copy
.ds-chat-followup{display:inline-flex;align-items:center;padding:5px 10px;border:1px solid var(--border-default);border-radius:var(--r-full);font-size:11px;color:var(--text-secondary);background:var(--bg-primary);cursor:pointer;transition:all var(--dur-fast);font-family:var(--font-body);white-space:nowrap}
.ds-chat-followup:hover{border-color:var(--accent-primary);color:var(--accent-primary);background:var(--accent-light)}
Schema Editor / Field List
Draggable field rows with grip handle, name, description, type pill,
and required label.
Hub
transaction date
required
The date the transaction was executed
date
amount required
Monetary value, negative for debits
number
category
Spending category (select, 6 options)
select (6)
Connect
transaction date
required
The date the transaction was executed
date
amount required
Monetary value, negative for debits
number
category
Spending category (select, 6 options)
select (6)
Insights
transaction date
required
The date the transaction was executed
date
amount required
Monetary value, negative for debits
number
category
Spending category (select, 6 options)
select (6)
Show CSS
Copy
.ds-field-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border-default);border-radius:var(--r-sm);background:var(--bg-primary);margin-bottom:4px}
.ds-field-name{font-size:12px;font-weight:600;color:var(--text-primary)}
.ds-field-type-pill{font-size:10px;font-family:var(--font-mono);padding:2px 8px;border-radius:4px;background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-default);white-space:nowrap}
.ds-req-label{font-size:9px;font-weight:600;color:var(--red-500);text-transform:uppercase;margin-left:4px}
Stepper
Multi-step wizard. Done steps = green-500, active = product accent,
pending = border-default. Connected by lines.
Show CSS
Copy
.ds-stepper{display:flex;align-items:flex-start;gap:0;margin:12px 0}
.ds-stepper{display:flex;align-items:flex-start;gap:0;margin:12px 0}
.ds-step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}
.ds-step-num{width:24px;height:24px;border-radius:50%;background:var(--border-default);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;font-family:var(--font-mono);z-index:1}
.ds-step.active .ds-step-num{background:var(--accent-primary);color:#fff}
.ds-step.done .ds-step-num{background:var(--green-500);color:#fff}
.ds-step-label{font-size:10px;color:var(--text-muted);margin-top:4px;text-align:center}
.ds-step.active .ds-step-label{color:var(--text-primary);font-weight:600}
.ds-step-line{position:absolute;top:12px;left:calc(50% + 12px);right:calc(-50% + 12px);height:2px;background:var(--border-default)}
.ds-step.done .ds-step-line{background:var(--green-500)}
.ds-step:last-child .ds-step-line{display:none}
.ds-step-num{width:24px;height:24px;border-radius:50%;background:var(--border-default);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;font-family:var(--font-mono);z-index:1}
.ds-step-num{background:var(--accent-primary);color:#fff}
.ds-step-num{background:var(--green-500);color:#fff}
.ds-step-label{font-size:10px;color:var(--text-muted);margin-top:4px;text-align:center}
.ds-step-label{color:var(--text-primary);font-weight:600}
.ds-step-line{position:absolute;top:12px;left:calc(50% + 12px);right:calc(-50% + 12px);height:2px;background:var(--border-default)}
.ds-step-line{background:var(--green-500)}
.ds-step-line{display:none}
Document Job Cards
File processing queue. Status pills: completed (green), processing
(purple + progress bar), queued (amber), failed (red).
Hub
statement_july.pdf
127 records extracted
Completed
statement_aug.pdf
Page 8 of 12...
Processing
bofa_q3.pdf
Waiting for slot
Queued
amex_july.pdf
Parsing failed
Failed
Connect
statement_july.pdf
127 records extracted
Completed
statement_aug.pdf
Page 8 of 12...
Processing
bofa_q3.pdf
Waiting for slot
Queued
amex_july.pdf
Parsing failed
Failed
Insights
statement_july.pdf
127 records extracted
Completed
statement_aug.pdf
Page 8 of 12...
Processing
bofa_q3.pdf
Waiting for slot
Queued
amex_july.pdf
Parsing failed
Failed
Show CSS
Copy
.ds-job-card{border:1px solid var(--border-default);border-radius:var(--r-md);padding:10px 14px;background:var(--bg-primary);display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ds-job-icon{width:28px;height:28px;border-radius:var(--r-sm);background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ds-job-icon svg{width:14px;height:14px;color:var(--text-muted);stroke:currentColor}
.ds-job-pill{font-size:9px;font-weight:600;padding:2px 8px;border-radius:10px;white-space:nowrap}
.ds-job-pill.completed{background:rgba(45,139,94,0.08);color:#2D8B5E}
.ds-job-pill.processing{background:rgba(85,88,227,0.07);color:var(--core-purple)}
.ds-job-pill.queued{background:rgba(217,119,6,0.08);color:#D97706}
.ds-job-pill.failed{background:rgba(220,38,38,0.06);color:#DC2626}
Onboarding Flow
First-run steps. Step number = product accent. Inactive steps at 50%
opacity. Hover lifts border to accent.
Hub
Step 1
Create your first table
Name your table and describe what data it will hold.
Step 2
Define your fields
Set up columns for the data you want.
Step 3
Parse a document
Upload a PDF and extract data.
Connect
Step 1
Create your first table
Name your table and describe what data it will hold.
Step 2
Define your fields
Set up columns for the data you want.
Step 3
Parse a document
Upload a PDF and extract data.
Insights
Step 1
Create your first table
Name your table and describe what data it will hold.
Step 2
Define your fields
Set up columns for the data you want.
Step 3
Parse a document
Upload a PDF and extract data.
Show CSS
Copy
.ds-onboard-step{border:1px solid var(--border-default);border-radius:var(--r-md);padding:16px;cursor:pointer;transition:all var(--dur-normal);background:var(--bg-primary)}
.ds-onboard-step:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-sm)}
.ds-onboard-step-num{font-size:10px;font-weight:600;color:var(--accent-primary);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:4px}
.ds-onboard-step h3{font-size:14px;font-weight:600;margin-bottom:4px}
.ds-onboard-step p{font-size:12px;color:var(--text-secondary);line-height:1.5}
Activity / Threads
Thread list with type badges (Chat = gold, Agent = purple). Active
item has accent-light bg + left border.
Hub
Chat Top spending
analysis
You + Alani · 2h ago
Meals & Entertainment is your largest category at 48%...
Agent Email
Monitor added 12 records
Email Monitor · 3h ago
Parsed chase_statement.pdf. 12 new transactions added.
Chat Duplicate
audit
You + Alani · Yesterday
Found 3 potential duplicate sets across records...
Connect
Chat Top spending
analysis
You + Alani · 2h ago
Meals & Entertainment is your largest category at 48%...
Agent Email
Monitor added 12 records
Email Monitor · 3h ago
Parsed chase_statement.pdf. 12 new transactions added.
Chat Duplicate
audit
You + Alani · Yesterday
Found 3 potential duplicate sets across records...
Insights
Chat Top spending
analysis
You + Alani · 2h ago
Meals & Entertainment is your largest category at 48%...
Agent Email
Monitor added 12 records
Email Monitor · 3h ago
Parsed chase_statement.pdf. 12 new transactions added.
Chat Duplicate
audit
You + Alani · Yesterday
Found 3 potential duplicate sets across records...
Show CSS
Copy
.ds-thread-item{padding:10px 12px;border-bottom:1px solid var(--border-light);cursor:pointer;transition:background var(--dur-fast)}
.ds-thread-item:hover{background:var(--bg-secondary)}
.ds-thread-item.active{background:var(--accent-light);border-left:3px solid var(--accent-primary)}
.ds-thread-item-title{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:2px;display:flex;align-items:center;gap:4px}
.ds-thread-item-meta{font-size:10px;color:var(--text-muted)}
.ds-thread-item-preview{font-size:11px;color:var(--text-secondary);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ds-thread-badge{font-size:9px;font-weight:600;padding:1px 5px;border-radius:6px}
.ds-thread-badge.chat{background:rgba(201,154,45,0.08);color:#8B6914}
.ds-thread-badge.agent{background:rgba(85,88,227,0.07);color:var(--core-purple)}
Settings Layout
Settings sections with label/value rows. Uses toggle switches for
boolean settings.
Hub
Account
Email
nicholas@bundleiq.com
Notifications
Email alertsGet notified when agents run
Connect
Account
Email
nicholas@bundleiq.com
Notifications
Email alertsGet notified when agents run
Insights
Account
Email
nicholas@bundleiq.com
Notifications
Email alertsGet notified when agents run
Show CSS
Copy
.ds-settings-section{background:var(--bg-primary);border:1px solid var(--border-default);border-radius:var(--r-md);padding:14px 18px;margin-bottom:8px}
.ds-settings-section h3{font-size:13px;font-weight:600;margin-bottom:10px}
.ds-settings-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border-light);font-size:12px}
.ds-settings-row:last-child{border-bottom:none}
.ds-settings-row-label{color:var(--text-primary)}
.ds-settings-row-label span{display:block;font-size:10px;color:var(--text-muted);font-weight:400;margin-top:1px}
.ds-settings-row-value{font-size:12px;color:var(--text-secondary);font-family:var(--font-mono)}
Organization Card
Organization display with avatar. Active org gets accent border +
accent-light bg.
Hub
bIQ
bundleIQ
3 members · Pro plan
AC
Acme Corp
12 members · Enterprise
Connect
bIQ
bundleIQ
3 members · Pro plan
AC
Acme Corp
12 members · Enterprise
Insights
bIQ
bundleIQ
3 members · Pro plan
AC
Acme Corp
12 members · Enterprise
Show CSS
Copy
.ds-org-card{display:flex;align-items:center;gap:10px;padding:10px;background:var(--bg-secondary);border-radius:var(--r-sm);border:1px solid var(--border-default)}
.ds-org-card.active{border-color:var(--accent-primary);background:var(--accent-light)}
.ds-org-avatar{width:32px;height:32px;border-radius:var(--r-sm);background:var(--neutral-900);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:11px;flex-shrink:0}
Slide Panel / Drawer
Slide-out panel from right. Used for Chat, Add Record, Parse Document.
Header with title + badge + close.
Hub
Chat
847 records
Query your data
Ask questions in natural language.
Connect
Chat
847 records
Query your data
Ask questions in natural language.
Insights
Chat
847 records
Query your data
Ask questions in natural language.
Show CSS
Copy
.ds-slide-panel{width:100%;max-width:260px;background:var(--bg-primary);border:1px solid var(--border-default);border-radius:var(--r-md);box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column}
.ds-slide-panel-head{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border-default);gap:8px}
.ds-slide-panel-head h3{font-size:13px;font-weight:600;flex:1}
.ds-slide-panel-head .badge{font-size:10px;padding:2px 8px;border-radius:10px;background:var(--accent-light);color:var(--accent-deep)}
.ds-slide-panel-head{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border-default);gap:8px}
.ds-slide-panel-head h3{font-size:13px;font-weight:600;flex:1}
.ds-slide-panel-head .badge{font-size:10px;padding:2px 8px;border-radius:10px;background:var(--accent-light);color:var(--accent-deep)}
Progress Bar
Linear progress with percentage. Fill gradient = product accent.
Completed state = green-500.
Show CSS
Copy
.ds-progress{height:6px;background:var(--border-default);border-radius:3px;overflow:hidden}
.ds-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent-primary),var(--accent-deep));transition:width var(--dur-slow)}
.ds-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent-primary),var(--accent-deep));transition:width var(--dur-slow)}
Alani & bundleIQ Logo
Wave mark + wordmark. Three backgrounds: white, core-purple,
core-dark. Plus app icon variants and usage rules.
Alani Wordmark
Official "Alani" wordmark with ® trademark. Text uses brand
typography, core-dark on light backgrounds.
Product Wordmarks
"Alani" in core-dark + product name in accent color. Each product has
its own official wordmark SVG.
Hub SVG
Hub PNG
Connect SVG
Connect PNG
Insights SVG
Insights PNG
bundleIQ Wordmark
Wave icon + "bundleIQ" in DM Sans Bold. Lowercase "bundle", uppercase
"IQ". With ® trademark circle.
App Icon
Rounded square with Teal→Purple gradient. White wave mark
centered. Light variant = white bg + gradient wave.
Wave Mark (Standalone)
Used alone when the brand is already established (favicons, loading
states, compact UIs).
SVG Purple
PNG Purple
SVG White
PNG White
Logo Selection Guide (Per Product)
Which logo variant to use depending on context, background, and
product. The key rule: if the background is product-colored, drop the
product name from the wordmark.
Context
Background
Hub
Connect
Insights
App header / Navbar
White / Light
Wave + "Alani Hub"
Wave + "Alani Connect"
Wave + "Alani Insights"
Banner / Hero
Product accent color
Wave + "Alani"
(no "Hub")
Wave + "Alani"
(no "Connect")
Wave + "Alani"
(no "Insights")
Event / Print / QR
Any
Wave + "Alani" + URL
Wave + "Alani" + URL
Wave + "Alani" + URL
Dark background
core-dark / core-purple
White wordmark + white wave mark. Product name OK if contrast
is sufficient.
Favicon / Loading
Any
Wave mark only (no text)
Email header
White
Wave + "Alani Hub"
Wave + "Alani Connect"
Wave + "Alani Insights"
Company-level
Any
bundleIQ full logo (wave + "bundleIQ®")
Accent Background Rule
When the background uses the product accent color, the product name in
the wordmark becomes invisible. Use the parent "Alani" wordmark
instead.
✓ Hub — use "Alani" on teal bg
✓ Connect — use "Alani" on coral bg
✓ Insights — use "Alani" on gold bg
✗ "Hub" invisible on teal
✗ "Connect" invisible on coral
✗ "Insights" invisible on gold
General Rules
DO
Use "Alani" for the product brand, "bundleIQ" for the company
brand
Wordmark font: DM Sans Bold (var(--font-body), weight 700)
Maintain min 12px clearspace around the logo mark
On product-colored backgrounds, use Wave + "Alani" (no product
name)
On white/light backgrounds, use full product wordmark (e.g.
"Alani Connect")
App icon gradient direction: 135deg (teal top-left → purple
bottom-right)
Use the URL (e.g. alaniconnect.com) to reinforce product context
when name is omitted
DON'T
Don't use Fraunces for the wordmark — it's DM Sans Bold
only
Don't place product-colored text on matching product-colored
background
Don't place logo on busy/patterned backgrounds
Don't rotate or skew the wave mark
Don't change the gradient direction or colors
Don't omit the ® symbol from the Alani wordmark
Don't mix product wordmarks (e.g. "Alani Hub" on a Connect page)
Alert / Inline Message
Persistent inline feedback. Four semantic variants: info, success,
warning, error. Icon + text. Not dismissible by default.
Hub
Info: Your workspace syncs every 5 minutes.
Done: All files uploaded successfully.
Warning: Approaching storage limit (90%).
Error: Failed to connect to API.
Connect
Info: Room is read-only for guests.
Done: Invitation sent to 3 members.
Warning: Moderation queue has 12 items.
Error: Could not load thread.
Insights
Info: Schema auto-detected from CSV.
Done: Extraction completed — 847 records.
Warning: 3 fields have low confidence.
Error: Job timed out after 30s.
Show CSS
Copy
.ds-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-lg);font-size:12px;line-height:1.5}
.ds-alert svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.ds-alert-info{background:var(--blue-50,#EFF6FF);color:#1E40AF;border:1px solid rgba(59,130,246,0.2)}
.ds-alert-info svg{color:#3B82F6}
.ds-alert-success{background:var(--green-50,#F0FDF4);color:#166534;border:1px solid rgba(45,139,94,0.2)}
.ds-alert-success svg{color:var(--green-500)}
.ds-alert-warning{background:var(--amber-50,#FFFBEB);color:#92400E;border:1px solid rgba(217,119,6,0.2)}
.ds-alert-warning svg{color:var(--amber-500)}
.ds-alert-error{background:var(--red-50,#FEF2F2);color:#991B1B;border:1px solid rgba(220,38,38,0.2)}
.ds-alert-error svg{color:var(--red-500)}
.ds-alert-info{background:var(--blue-50,#EFF6FF);color:#1E40AF;border:1px solid rgba(59,130,246,0.2)}
.ds-alert-info svg{color:#3B82F6}
.ds-alert-success{background:var(--green-50,#F0FDF4);color:#166534;border:1px solid rgba(45,139,94,0.2)}
.ds-alert-success svg{color:var(--green-500)}
.ds-alert-warning{background:var(--amber-50,#FFFBEB);color:#92400E;border:1px solid rgba(217,119,6,0.2)}
.ds-alert-warning svg{color:var(--amber-500)}
.ds-alert-error{background:var(--red-50,#FEF2F2);color:#991B1B;border:1px solid rgba(220,38,38,0.2)}
.ds-alert-error svg{color:var(--red-500)}
Links
Inline text links. Product-accented by default, muted variant for
secondary actions. Underline on hover.
Show CSS
Copy
.ds-link{color:var(--accent-primary);text-decoration:none;font-weight:500;font-size:13px;cursor:pointer;transition:color var(--dur-fast)}
.ds-link:hover{text-decoration:underline;color:var(--accent-deep)}
.ds-link-muted{color:var(--text-muted)}
.ds-link-muted:hover{color:var(--text-primary)}
.ds-link-muted{color:var(--text-muted)}
.ds-link-muted:hover{color:var(--text-primary)}
Divider / Separator
Horizontal separators for content grouping. Plain line or labeled
variant.
Hub
Section A content
Section B content
OR
Section C content
Connect
Messages
Pinned items
Today
New messages
Insights
Input fields
Output schema
Advanced
Custom rules
Show CSS
Copy
.ds-divider{height:1px;background:var(--border-default);margin:16px 0}
.ds-divider-label{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--text-muted);margin:16px 0}
.ds-divider-label::before,.ds-divider-label::after{content:'';flex:1;height:1px;background:var(--border-default)}
.ds-divider-label{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--text-muted);margin:16px 0}
.ds-divider-label::before,.ds-divider-label::after{content:'';flex:1;height:1px;background:var(--border-default)}
Accordion / Collapsible
Expandable content sections. Used in FAQ, settings, filters. Chevron
rotates on open.
Hub
Drag and drop files into the workspace or click the upload
button in the toolbar.
Connect
Configure room visibility, invite permissions, and
notification preferences.
Insights
Set confidence threshold, output format, and retry policy for
extraction jobs.
Show CSS
Copy
.ds-accordion{border:1px solid var(--border-default);border-radius:var(--r-lg);overflow:hidden}
.ds-accordion-item{border-bottom:1px solid var(--border-default)}
.ds-accordion-item:last-child{border-bottom:none}
.ds-accordion-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-size:13px;font-weight:600;cursor:pointer;background:var(--bg-primary);transition:background var(--dur-fast)}
.ds-accordion-header:hover{background:var(--bg-secondary)}
.ds-accordion-header svg{width:16px;height:16px;color:var(--text-muted);transition:transform var(--dur-normal)}
.ds-accordion-header.open svg{transform:rotate(180deg)}
.ds-accordion-body{padding:0 14px 12px;font-size:12px;color:var(--text-secondary);line-height:1.6}
.ds-accordion-item{border-bottom:1px solid var(--border-default)}
.ds-accordion-item:last-child{border-bottom:none}
.ds-accordion-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-size:13px;font-weight:600;cursor:pointer;background:var(--bg-primary);transition:background var(--dur-fast)}
.ds-accordion-header:hover{background:var(--bg-secondary)}
.ds-accordion-header svg{width:16px;height:16px;color:var(--text-muted);transition:transform var(--dur-normal)}
.ds-accordion-header.open svg{transform:rotate(180deg)}
.ds-accordion-body{padding:0 14px 12px;font-size:12px;color:var(--text-secondary);line-height:1.6}
Email Templates
Transactional email templates — mention notifications, activity
digests. Product-branded header, card-based body, accent CTA, subtle
footer. Inline-safe — all styles map to design tokens.
Mention Notification
Triggered when a user is @mentioned in a room/thread. Shows sender,
room context, message excerpt, and a CTA to view the conversation.
Hub
Hi Alex,
Guess who's thinking about you?
Room · Q1 Planning
View the Conversation
Join the conversation in just one click
Connect
Hi Jordan,
Guess who's thinking about you?
MR
Maria Ruiz Mentioned you
Room · Design Critiques
View the Conversation
Join the conversation in just one click
Insights
Hi Sam,
Guess who's thinking about you?
Room · Data Pipeline
View the Conversation
Join the conversation in just one click
Template Variables
Handlebars-style placeholders used across all email templates:
Variable
Description
Example
{{user_name}}
Recipient first name
Alex
{{agent_name}}
User who mentioned
Dana Kim
{{room_name}}
Room / channel name
Q1 Planning
{{post_title}}
Post or thread title
Budget review
{{conversation_summary}}
Message excerpt
"Can you pull the latest..."
{{thread_url}}
Deep link to conversation
https://app.alani.so/...
{{unsubscribe_url}}
Unsubscribe link
https://app.alani.so/unsub/...
Guidelines
✓ DO
Use product accent color for header bg, CTA, badge, links
Keep body text in core-dark (#252B40)
Round card corners at 20px, mention block at 16px
Include unsubscribe link in footer — legally required
Use system font stack for email clients
Inline all styles for maximum compatibility
✗ DON'T
Use core-purple as accent — always
product-specific
Set font-size below 13px for body content
Rely on CSS custom properties in production emails
Use external web fonts (no Google Fonts in email)
Exceed 640px container width
Skip alt text on images
Show CSS
Copy
.ds-email-wrap{max-width:100%;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);font-family:var(--font-body);font-size:13px;line-height:1.55;color:var(--text-primary)}
.ds-email-topbar{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;background:var(--accent-light)}
.ds-email-card{background:#fff;border-radius:var(--r-xl);padding:22px;margin:0 12px 16px}
.ds-email-card h2{font-size:20px;margin:0 0 4px;font-family:var(--font-display);font-weight:600}
.ds-email-card .sub{color:var(--text-muted);font-size:13px;margin-bottom:14px}
.ds-email-mention{background:var(--accent-light);border-radius:var(--r-lg);padding:14px}
.ds-email-mention .row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ds-email-mention .avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:11px}
.ds-email-mention .name{font-weight:700;font-size:13px}
.ds-email-mention .badge{background:var(--bg-primary);color:var(--accent-primary);padding:2px 8px;border-radius:var(--r-full);font-size:10px;font-weight:600;margin-left:6px}
.ds-email-mention .meta{color:var(--text-muted);font-size:12px;margin-bottom:8px}
.ds-email-mention .comment{border:1px solid var(--accent-primary);border-radius:var(--r-lg);padding:12px;font-size:12px;line-height:1.5;background:#fff}
.ds-email-mention .comment a{color:var(--accent-primary);font-weight:600;text-decoration:none}
.ds-email-cta{display:block;text-align:center;margin:20px auto 6px;background:var(--accent-primary);color:#fff;padding:10px 16px;border-radius:var(--r-lg);font-weight:700;font-size:13px;width:fit-content;text-decoration:none;cursor:pointer}
.ds-email-cta-sub{text-align:center;color:var(--text-muted);font-size:11px}
.ds-email-footer{text-align:center;padding:16px;color:var(--text-muted);font-size:11px}
.ds-email-footer a{color:var(--text-muted)}
.ds-email-footer strong{display:block;margin:4px 0}
View full message to read more