Skip to content

DESIGN.md

Latest commit

 

History

History
169 lines (141 loc) · 5.55 KB

DESIGN.md

File metadata and controls

169 lines (141 loc) · 5.55 KB
version alpha
name elizaOS
description Agent-first product UI for elizaOS apps, dynamic views, voice setup, trace surfaces, and runtime gates.
colors
primary secondary tertiary neutral background surface surface-muted border accent accent-hover accent-soft gold gold-muted success warning danger text text-muted text-subtle
#050507
#9EA0AA
#FF5800
#F6F6F8
#0A0B0F
#111318
#181B22
#2A2D36
#FF5800
#FF6D1F
#2A170D
#FFE600
#F0B90B
#22C55E
#F59E0B
#EF4444
#F6F6F8
#A6A6B0
#6F7280
typography
display heading body body-sm label mono-label
fontFamily fontSize fontWeight lineHeight letterSpacing
Poppins
2rem
700
1.1
0
fontFamily fontSize fontWeight lineHeight letterSpacing
Poppins
1.25rem
600
1.2
0
fontFamily fontSize fontWeight lineHeight letterSpacing
Open Sans
1rem
400
1.5
0
fontFamily fontSize fontWeight lineHeight letterSpacing
Open Sans
0.875rem
400
1.45
0
fontFamily fontSize fontWeight lineHeight letterSpacing
Poppins
0.75rem
600
1.2
0
fontFamily fontSize fontWeight lineHeight letterSpacing
ui-monospace
0.75rem
500
1.35
0.16em
rounded
none sm md lg
0px
4px
8px
12px
spacing
xs sm md lg xl xxl
4px
8px
16px
24px
32px
48px
components
app-background panel panel-muted button-primary button-secondary runtime-primary status-success status-warning
backgroundColor textColor
{colors.background}
{colors.text}
backgroundColor textColor rounded padding
{colors.surface}
{colors.text}
{rounded.sm}
{spacing.lg}
backgroundColor textColor rounded padding
{colors.surface-muted}
{colors.text}
{rounded.sm}
{spacing.md}
backgroundColor textColor rounded padding
{colors.accent}
{colors.neutral}
{rounded.sm}
{spacing.md}
backgroundColor textColor rounded padding
{colors.surface-muted}
{colors.text}
{rounded.sm}
{spacing.md}
backgroundColor textColor rounded padding
{colors.gold}
{colors.primary}
{rounded.none}
{spacing.md}
backgroundColor textColor rounded padding
#0E2A18
{colors.success}
{rounded.sm}
{spacing.sm}
backgroundColor textColor rounded padding
#2A1B08
{colors.warning}
{rounded.sm}
{spacing.sm}

Overview

elizaOS UI is agent-first operational software. The product should feel like a capable local agent is already present, not like a dashboard the user has to learn before anything works.

The main design job is to remove decisions, not decorate them. First-run should get the user to a talking/running agent quickly, then let the agent reveal setup choices through contextual generative UI.

Colors

Use dark surfaces, high-contrast text, and one clear action accent. The default app accent is orange. The first-run runtime gate may use yellow/gold for the immersive launch moment, but it should not leak into every settings or operational surface.

Success, warning, and danger colors are only for status. Do not use them as decorative palette drivers.

Typography

Use Poppins for headings and labels. Use Open Sans for readable body copy. Use mono labels only for runtime/terminal/diagnostic affordances where the technical tone is intentional.

Do not scale type with viewport width. Keep letter spacing at 0 by default; only use wide tracking for short uppercase runtime labels.

Layout

Mobile first-run screens must respect safe areas and keep the primary action reachable without scrolling. Avoid vertically centering compact cards low on tall phone screens. Place onboarding/runtime cards in the upper-middle of the viewport unless the content genuinely needs centered composition.

Product surfaces should be dense, calm, and useful. Avoid landing-page hero layouts inside the app. Avoid nested cards. Use full-width bands or direct layouts for page structure, and reserve cards for repeated items, modals, and framed tools.

Elevation & Depth

Use borders and subtle shadows instead of heavy glass effects. Runtime gate zine panels may use hard-edged shadows, clipped corners, and high contrast. Main app surfaces should stay quieter.

Shapes

Use 4px to 8px radius for most interface elements. Icon buttons and tool controls may be square or circular when that matches the control metaphor. Do not use pill styling by default.

Components

Primary buttons are for the next concrete action. Secondary buttons are for alternate paths. Advanced paths belong behind disclosure when they are not needed for the common case.

Generated UI, dynamic views, trace views, terminal output, file trees, Git diffs, and voice timelines should render through reusable packages/ui components. They should not execute capabilities directly.

Do's and Don'ts

Do boot into the smallest useful experience.

Do use the agent to explain and perform setup when possible.

Do keep voice and runtime setup short, direct, and recoverable.

Do keep bottom actions inside the safe area and visibly tappable on phone screens.

Do not show old wizard screens, provisioning dashboards, or static setup detours when a direct runtime action can proceed.

Do not ask the user to understand deployment mechanics before the agent works.

Do not hide failed capability or backend states behind onboarding copy.

Do not let visual components call filesystem, terminal, Git, model, sandbox, or Remote APIs directly.