The Syalia design language

One brand,
every surface.

The visual system behind the whole AInBox stack — hero to dense work UI, one deep, glassy, coherent language. This page is the living catalog, built entirely from the classes every app vendors.

1
unified brand
6
apps in the stack
3
vendored typefaces
0
CDN dependencies
Foundations · primitives

The material

Colour, space, and type — the raw tokens every surface is built from, defined bottom-up.

Neutral ramp — one cool slate-navy family (50→950)
50
100
200
300
400
500
600
700
800
900
950

950 = page background · 900 = panels & cards · 800 = inputs & raised surfaces · click any swatch to copy

Accents & brand
accent / #2563eb
accent-hi / #3b82f6
amber / #fbbf24
ok / #34d399
err / #f87171
brand gradient
Product accents — per-app identity
superbot
magpie
peacock
voxpopuli
beaver
clipper
Type — Space Grotesk display · Inter body · Material Icons
display / 5xlGrotesk
display / 3xlA distinct voice
xl · Inter 600The quiet workhorse
base · Inter 400Inter carries the interface. It is legible at a glance and calm across long sessions — the counterweight to the display face.
monogit commit -m "feat: ship it";
Spacing scale — non-linear, ~25% apart

4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 px  ·  motion: cubic-bezier(.2,.8,.2,1) — micro 120ms · base 350ms · reveal 800ms

Foundations · iconography

Semantic icons

One icon system across the whole stack — Material Icons, vendored locally. Named by meaning, not decoration. Click any to copy its ligature.

Navigation & chrome
menumenu
homehome
arrow_backarrow_back
chevron_leftchevron_left
chevron_rightchevron_right
searchsearch
settingssettings
space_dashboardspace_dashboard
hubhub
view_agendaview_agenda
Notes & content
descriptiondescription
note_addnote_add
folderfolder
create_new_foldercreate_new_folder
drive_folder_uploaddrive_folder_upload
menu_bookmenu_book
editedit
linklink
attach_fileattach_file
upload_fileupload_file
Actions
addadd
sendsend
downloaddownload
uploadupload
shareshare
ios_shareios_share
deletedelete
syncsync
refreshrefresh
logoutlogout
People & communication
mailmail
forumforum
groupgroup
callcall
calendar_monthcalendar_month
eventevent
cakecake
starstar
Agent, voice & status
auto_awesomeauto_awesome
boltbolt
micmic
stopstop
audio_fileaudio_file
check_circlecheck_circle
warningwarning
autorenewautorenew
public_offpublic_off
constructionconstruction
Catalog · widgets

Components

The shared widget vocabulary every app inherits.

Buttons
Inputs
search
Badges & tags
badgeokerr #tagesc
Tabs & nav
Feedback
check_circle Saved to vault
Table
AppPort
magpie8002
superbot8003
Toggles
Sync on save
Offline mode
Show done tasks
Empty state
inbox
No notes yet
Create your first note or drop a file to ingest.
Catalog · magpie data

Data widgets

Tasks, calendar, and people — the type-aware widgets magpie renders from vault notes. Check a task to complete it.

Tasks
Draft the design-system spec #syalia-ui Jul 03
Review peacock three-pane layout Today
Vendor syalia-ui into magpie Jul 09
check Reconcile the neutral ramp Jul 05
Calendar
M
T
W
T
F
S
S
30
1
2
3Spec
4Journal
5
6
7Peacock
8
9Vendor
10
11Weekly
12
13
Contact
SS
Steve Schoger
Designer · Refactoring UI
Meeting
Mon, Jul 7 · 15:00
Design-system review
hub Syalia HQ · Zoom
AlexSteveAdam
Pattern · magpie, generalized

The app shell

The structural skeleton every work app shares — hamburger, sidebar tree, account menu, a markdown view, and a status bar. Hover a [[wikilink]]; try the ☰ and the avatar menu.

SYALIA· magpie
folder Atlas / Design System

Design System

The Syalia visual language is a single, unified brand that runs from the marketing hero down to the densest work UI. It builds on the functional ergonomics of Magpie and the flashier atmosphere of the Syalia Homepage.

Principles

  • One deep, glassy surface everywhere — no separate “app” and “marketing” looks.
  • Blue for action, amber for brand highlight, gradient for identity.
  • Vendored fonts, zero CDN — see Offline First.
Spend your boldness in one place; keep everything around it quiet.
--bg: #060a17;   /* deep page */
--surface: #0f172a;  /* panels  */
saved 42 notes indexed 2m ago ⌘K commands
Pattern · peacock, generalized

The three-pane builder

Conversations, chat, and a live preview — with drag-to-resize dividers. Drag the seams between panes. The artifact renders on white, in contrast to the dark chrome.

Make the hero headline bigger and add a gradient
assistant
Done — bumped the display size and applied the brand gradient to the second line.
checkrender_artifact hero.html
Ship faster
with Syalia

The live preview renders here.

Pattern · superbot / magpie / peacock

The conversation surface

Message turns, agent thinking, tool calls, and the composer — the shared chat vocabulary.

Summarize the Q3 board notes and flag anything about hiring.
assistant
searchsearch_vault "Q3 board" · 4 hits
assistant
Three themes stand out across the notes: runway, the hiring freeze, and the design-system investment.
Reading the hiring section…
Tool-call states
write_file plan.md
checkread_file tokens.css · done
error_outlinerun_tests 2 failed
Command autocomplete
/summarizeSummarize the current noteshared
/translateTranslate to another languageshared
/clearClear the conversationbuilt-in
Voice note
0:14
Floating surfaces

Overlays & glass

Anything that floats over content — dialogs, answer cards, popovers — is frosted glass that blurs whatever sits behind it.

Pops with a blurred backdrop · click outside or press Esc to close
Glass answer card (ainbox-help)
answer
Frosted, blurred, elevated.

The glass token blurs whatever sits behind it — for answer cards, popovers, and dialogs floating over content.

Pattern · ainbox-mobile

Mobile

A voice-first phone shell — bottom tab bar, safe-area insets, and the signature big mic button. Tap the mic to record.

Offline — changes sync when reconnected
SYALIA· móvil online
asistente
Hola Alex — ¿en qué trabajamos hoy?
Recuérdame revisar el diseño esta tarde
Guardando recordatorio…
Tap to talk
The big mic button

The centerpiece of the voice-first surface. Tap to start; a pulsing ring signals it's listening, and it turns red with a stop glyph. Idle vs recording:

idle
recording
Bottom tab bar

Four destinations, active in accent, safe-area padding for the home indicator. Cards, pills, and the offline banner reuse the shared component vocabulary — nothing mobile-specific except the shell.

Tab views
SYALIA· notas
SYALIA· agendajul 6
Hoy
Revisar el three-paneHoy
Escribir el READMEHoy
checkDesplegar design.syalia.dev
Próximo
Vendorizar en magpiejul 9
Síntesis semanaljul 11
SYALIA· ajustes
AP
Alex Piad
alepiad@gmail.com
Sincronizar al guardar
Modo sin conexión
Notas por voz
Tema oscuro
Atmosphere

Motion & depth

The ambient layer — drifting mesh, hover glow, scroll reveals. Used with restraint on heroes and landing surfaces.

Product cards — hover for lift + glow + peek
chat_bubble_outline

Superbot

Conversation engine

Multilingual, context-aware assistants grounded in your sources.

description

Magpie

Vault & notes

A Markdown vault with tasks, calendar, and contacts in one surface.

auto_awesome

Peacock

Artifact builder

Describe an artifact; watch it render live beside the conversation.