iMe Solid Circle UI Style Guide

v1.0 · Single source of truth for all iAgent interfaces

🎨 Colors

The iMe palette is a dark-first system with gold accents. All interfaces use these exact hex values.

Primary Surfaces

Black
#000000
--black / Black
DarkSurface
#0D0D0D
--dark-surface / DarkSurface
DarkElevated
#1A1A1A
--dark-elevated / DarkElevated
DarkHover
#161616
--dark-hover / DarkHover

Gold System

Gold
#D4AF37
--gold / Gold
GoldLight
#F5D054
--gold-light / GoldLight
GoldDark
#8B6E2F
--gold-dark / GoldDark
GoldGlow
rgba(212,175,55,0.18)
--gold-glow / GoldGlow

Text

Text Primary
#FFFFFF
--text-primary / White
Text Secondary
#A0A0A4
--text-secondary / TextSecondary
Text Muted
#6B6B70
--text-muted / TextMuted

Status

Success
#22C55E
--success / Success
Warning
#F59E0B
--warning / Warning
Error
#EF4444
--error / ErrorRed

Border

Border
#2A2A2A
--border / Border
BorderStrong
#3A3A3A
--border-strong / BorderStrong

🔤 Typography

Font stack: system-ui, -apple-system, 'Segoe UI', sans-serif. Monospace for code, transactions, and addresses.

Scale

Heading 1 · 28sp · 700 · -0.3px
The quick brown fox
Heading 2 · 22sp · 700 · -0.3px
Agent Dashboard
Heading 3 / Agent Name · 18sp · 700 · -0.3px
iTrade Pro
Body · 14sp · 400 · 1.5 line-height
Market analysis, charts, on-chain data, and trade strategy execution. The agent monitors positions and alerts on key support/resistance levels.
Label / Caption · 11sp · 400 · text-secondary
Agent status · Last updated 2m ago
Monospace · 13sp · code, transactions, addresses
0x7aBc...3f9D · deepseek-pro · 1,000,000 tokens

Agent Card Text Spec

Agent Name: 15sp, 700, #FFFFFF Role/Subtitle: 12sp, 400, #A0A0A4 Model Badge: 10sp, 400, #A0A0A4, font-family: monospace Tier Badge: 10sp, 600, #D4AF37 Status Label: 11sp, 400, #6B6B70 Section Header: 11sp, 600, #6B6B70, uppercase

📐 Spacing

4dp grid system. All padding, margin, and gaps follow this scale.

4
4dp
8
8dp
12
12dp
16
16dp
20
20dp
24
24dp
32
32dp
48
48dp

Prescribed Usage

Card padding: 14dp (--sp-14) Screen padding: 16dp (--sp-16) Section gap: 12dp (--sp-12) Icon gap: 12dp (--sp-12) Badge gap: 8dp (--sp-8) Element gap: 8dp (--sp-8)

🔲 Border Radius

Consistent rounding across all components.

8dp
sm · chips, badges
12dp
md · cards, panels
18dp
lg · modals, sheets
999dp
full · pills, tags

🃏 Cards

The primary container component. Dark surface background, 1px border, 12dp radius, subtle shadow.

Card Title
This is a standard surface card with 16dp padding, a 12dp corner radius, and a subtle drop shadow.
Footer text · 11sp · muted
Active Card
Gold border on hover/active state. Used for the currently expanded agent card.
Tap to expand ▼

Card Spec

Background: DarkSurface (#0D0D0D) Border: 1px solid Border (#2A2A2A) Border radius: var(--radius-md) = 12dp Padding: var(--sp-14) = 14dp Shadow: 0 2px 8px rgba(0,0,0,0.3) Hover border: var(--gold) (#D4AF37)

🔘 Buttons

Three button variants: primary (gold gradient), outline, and danger.

Button Spec

Primary: background: linear-gradient(135deg, #F5D054, #D4AF37, #8B6E2F) color: #000000 border: none radius: 8dp Outline: background: transparent color: #D4AF37 border: 1px solid #8B6E2F radius: 8dp Danger: background: rgba(239,68,68,0.15) color: #EF4444 border: 1px solid rgba(239,68,68,0.3) radius: 8dp

⌨️ Inputs

Dark elevated background, gold focus ring, muted placeholder text.


Input Spec

Background: DarkElevated (#1A1A1A) Border: 1px solid Border (#2A2A2A) Caret color: Gold (#D4AF37) Placeholder: TextMuted (#6B6B70) Focus border: Gold (#D4AF37) Focus glow: 0 0 0 3px rgba(212,175,55,0.18) Padding: 10px 14px Radius: 8dp

🏷️ Chips & Badges

Model badges, tier labels, and status indicators.

Model Badges

deepseek-pro qwen-3-6-27b sonnet-4

Tier Badges

Starter Pro Unlocked Developer

Status Chips

ready active idle offline

Status Dots

ready
active
idle
offline

Badge Spec

Model Badge: bg: DarkElevated (#1A1A1A) text: TextSecondary (#A0A0A4) font: monospace, 10sp padding: 3px 10px radius: 8dp Tier Badge: bg: DarkElevated (#1A1A1A) text: Gold (#D4AF37) font: system, 10sp, 600 weight padding: 3px 10px radius: 8dp Status Chip: bg: rgba(color, 0.12) text: match color font: system, 10sp, 600 weight, uppercase padding: 3px 10px radius: 8dp

🪟 Modals

Dark elevated surface, gold close button, slide-up animation.

Modal Title
Modal content goes here. The close button uses a circular border with gold text. The entire sheet slides up with a gentle ease-out animation.

Modal Spec

Background: DarkElevated (#1A1A1A) Border: 1px solid BorderStrong (#3A3A3A) Border radius: var(--radius-lg) = 18dp Padding: 20dp Shadow: 0 8px 32px rgba(0,0,0,0.5) Animation: slide-up 200ms ease-out from: translateY(12px), opacity: 0 to: translateY(0), opacity: 1 Close button: circular, border, gold text, 28dp × 28dp

📊 Charts

Color schemes for line, bar, area, and donut visualizations.

Line Chart

Primary: Gold, Grid: Border, Axis: TextMuted

Bar Chart

Bars: Gold with GoldDark border, Hover: GoldLight

Area Chart

Fill: rgba(212,175,55,0.18), Stroke: Gold

Donut / Pie

Slices: Gold, GoldLight, Success, Warning, TextMuted

iTrade 44% iCode 17% iKnow 17% Idle 22%

Chart Colors

Line stroke: Gold (#D4AF37) Area fill: rgba(212,175,55,0.18) Bar fill: Gold (#D4AF37) Bar hover: GoldLight (#F5D054) Grid lines: Border (#2A2A2A) Axis labels: TextSecondary (#A0A0A4) Pie slices: [Gold, GoldLight, Success, Warning, TextMuted] Crosshair: Gold with glow

🤖 iAgent Card Spec

CRITICAL — This is the single source of truth for all iAgent cards across Mini App, Android, and Command Center. Every implementation must be pixel-identical to this specification.

Master Spec Card

📈
iTrade
Market & Trading Agent
deepseek-flash Pro
Status: ready ▼ Tap for details

Agent Gallery — All States

📈
iTrade
Market & Trading Agent
deepseek-flash Pro
Status: ready ▼ Tap for details
💻
iCode Pro
Code & Architecture Agent
qwen-3-6-27b Unlocked
Status: active ▼ Tap for details
🔬
iKnow
Research & Knowledge Agent
deepseek-pro Pro
Status: idle ▼ Tap for details
⚙️
iBuild
Infrastructure & DevOps Agent
gemma-4-31b Starter
Status: offline ▼ Tap for details

📐 Pixel-Perfect Agent Card Spec

  • Card bg: DarkSurface (#0D0D0D)
  • Card border: 1px solid Border (#2A2A2A)
  • Card radius: var(--radius-md) = 12dp
  • Card padding: var(--sp-14) = 14dp
  • Card shadow: 0 2px 8px rgba(0,0,0,0.3)
  • Icon size: 44dp × 44dp
  • Icon bg: DarkElevated (#1A1A1A)
  • Icon radius: 10dp
  • Icon font size: 22sp (emoji)
  • Icon gap: 12dp (--sp-12)
  • Agent name: 15sp, 700, White (#FFFFFF), letter-spacing: -0.3px
  • Role subtitle: 12sp, 400, TextSecondary (#A0A0A4)
  • Status dot: 8dp × 8dp, circular
  • Status dot gap: auto (pushed to right)
  • Badge gap: 8dp (--sp-8)
  • Model badge: DarkElevated bg, monospace, 10sp, TextSecondary
  • Tier badge: DarkElevated bg, system font, 10sp, 600, Gold
  • Badge padding: 3px 10px
  • Badge radius: 8dp (--radius-sm)
  • Status line: 11sp, 400, TextMuted (#6B6B70)
  • Chevron: 12sp, TextMuted, aligned right
  • Header↔Badges gap: 10dp
  • Badges↔Status gap: 8dp

Cross-Platform Implementation Guide

┌─ Mini App (React / CSS) ─────────────────────────────┐ │ Use CSS custom properties matching :root tokens. │ │ Agent card class: .agent-card │ │ Layout: CSS flexbox (flex-direction: column) │ │ Icons: Emoji in span, 22sp │ │ │ ├─ Android (Jetpack Compose) ─────────────────────────┤ │ Use com.ime.app.ui.theme.* color constants. │ │ Agent card: Card(shape=RoundedCornerShape(12.dp)) │ │ Layout: Column + Row composables │ │ Icons: Text(emoji, fontSize=22.sp) │ │ │ ├─ Command Center (HTML/CSS) ─────────────────────────┤ │ Same as Mini App — share CSS tokens. │ │ │ └─────────────────────────────────────────────────────┘

✅ Implementation Checklist

Verify that each platform matches the master spec.

☐ Mini App AgentsPage.tsx — must use .agent-card, .agent-icon, .agent-badges ☐ Android AgentsScreen.kt — must use Card(12.dp), model/tier Surface badges ☐ Android Theme.kt — already aligned ✓ ☐ Mini App index.css — CSS tokens match :root vars above ✓ ☐ Agent card spec verified — same spacing, same colors, same layout ☐ Status dots — 8dp, glow on active state ☐ Model badge — monospace, 10sp, DarkElevated bg ☐ Tier badge — Gold text, DarkElevated bg, 10sp, 600 weight ☐ Chevron — 12sp, TextMuted, "▼ Tap for details"