CS

# Aurora Mint

Coder Studio Design System — Dark Theme Visual Specification

v1.0.0 — April 2026

## Colors

The Aurora Mint palette uses a deep navy-charcoal foundation with carefully calibrated cool undertones. Accents are vivid but restrained for extended viewing sessions.

Backgrounds
Page Background
#0a1014
Background
Surface
#11181f
Surface
Sidebar
#0d141a
Surface
Terminal
#0b1218
Surface
Hover
#1a2632
Interaction
Active
#1e3040
Interaction
Disabled
#151f28
State
Borders
Border
#1e2a35
Border
Border Light
#263545
Border
Focus Border
#6cb6ff
Interaction
Text
Primary
#e5edf3
Text
Secondary
#9fb0bc
Text
Tertiary
#728492
Text
Inverse
#0a1014
Text on Accent
Accent Colors
Accent Blue
#6cb6ff
Primary Action
Accent Green
#78d7b2
Success / Active
Accent Amber
#f1b86a
Warning / Pending
Danger Pink
#ff9eb0
Error / Destroy

## Typography

IBM Plex Sans for UI text, JetBrains Mono for code. Both loaded with appropriate weights. System fallbacks ensure graceful degradation.

Sans-serif 14px The quick brown fox jumps over the lazy dog
Mono 13px const result = await build(project);
Weight 400 Regular Body text and descriptions use regular weight
Weight 500 Medium Buttons, labels, and interactive elements use medium
Weight 600 Semi-bold Headings and important text use semi-bold
Weight 700 Bold Page titles and logos use bold

### Letter Spacing

Captions and badges use slightly expanded letter spacing for readability at small sizes.

Uppercase CAPTION TEXT LABEL TEXT BADGE TEXT

## Spacing

All spacing follows a strict 4px grid system. Values are powers of 2 for predictability.

sp-1
4px
sp-2
8px
sp-3
12px
sp-4
16px
sp-5
20px
sp-6
24px
sp-8
32px
sp-10
40px
sp-12
48px
sp-16
64px

## Border Radii

Four radius values used consistently across all components.

sm
Small
4px
md
Medium
6px
lg
Large
7px
xl
Extra Large
8px

### Usage Guide

`radius-sm (4px)` — Badges, small elements, checkbox
`radius-md (6px)` — Buttons, inputs, tabs, chips
`radius-lg (7px)` — Large buttons, pill active
`radius-xl (8px)` — Cards, panels, modals, containers

## Buttons

Four button variants in three sizes. All buttons share the same height, padding, and transition timing.

### Variants

Primary
Default
Danger
Icon

### Sizes

Small
Default
Large

### With Icons

With icon

## Inputs

Form controls use the surface-dark background with a subtle border that highlights blue on focus.

### Text Input

Default
Placeholder
Disabled

### Textarea

This is a textarea component for multi-line text input. It supports resizing vertically.

### Select Dropdown

Select

## Badges & Chips

Badges are small status indicators. Chips are removable tags. Both use translucent backgrounds with colored text.

### Badges (Uppercase, 10px)

All states Building Online Pending Error Offline

### Chips (11px, with close button)

All colors TypeScript
Active
Warning
Urgent
Default

## Tabs

Three distinct tab styles for different contexts: view switcher, settings navigation, and workspace tabs.

### View Switcher (Underline)

Active tab content appears below the blue underline.

### Settings Navigation (Sidebar Pills)

### Workspace Tabs (Browser-style)

## Progress Bars

Thin, rounded progress indicators in all four accent colors plus an indeterminate loading state.

Blue
75%
Green
100%
Amber
45%
Pink
20%
Loading
...

## Session Status Dots

Small circular indicators showing session state. Green has a subtle glow effect.

All states
Online
Idle
Connecting
Offline

## Cards & Panels

Cards are used for content grouping. Panels are used for structured sections with headers.

Session Details Active
Framework React + Vite
Environment Production
Uptime 4h 23m
Build Pipeline
Install dependencies Done
Run build Running
Deploy Queued

## Modal Dialog

Centered overlay with backdrop blur. Click outside to dismiss. Use for confirmations and settings.

Delete Session
Are you sure you want to delete this session? This action cannot be undone and all unsaved changes will be lost.

## Pill Selector

Segmented control for mutually exclusive options. Used in toolbars and view switchers.

View mode
Frequency

## Toolbar

Compact horizontal button groups with dividers. Used in editors, preview panels, and command bars.

Editor toolbar

## Layout Specifications

The Coder Studio layout uses a three-panel structure with fixed-width sidebars and a flexible main content area.

### Desktop Layout

Header / Toolbar — 40px height
Main Content Area
flex: 1
Terminal
200px

### Fixed Dimensions

Sidebar Width 44px
Nav Panel Width 220px
Header Height 40px
Toolbar Height 48px
Terminal Height 200px (resizable)

## Type Scale

Complete typographic hierarchy. All sizes use IBM Plex Sans unless noted.

3XL 18px Page headings
LG 14px Body text, card titles
MD 13px Body default, buttons, inputs
SM 12px Labels, tabs, secondary text
XS 11px Captions, version badges, chips
Caption 10px Uppercase captions
Mono MD 13px Code blocks, terminal output
Mono SM 12px Inline code, file paths
Mono XS 11px Terminal prompt, hex codes

## Animations

All animations use CSS keyframes with consistent easing curves. Live demonstrations below.

Pulse
pulse 2s ease-in-out infinite
Opacity oscillation for status indicators
Shimmer
shimmer 1.5s linear infinite
Loading skeleton effect
Spin
spin 1s linear infinite
Loading spinner
A
Fade In
fadeIn 0.3s ease-out both
Content entrance animation
S
Slide In
slideIn 0.3s ease-out both
Sidebar item entrance

### Transition Tokens

`--ease-out`
cubic-bezier(0.16, 1, 0.3, 1)
`--duration-fast`
100ms
`--duration-normal`
150ms
`--duration-slow`
200ms

## States

Interactive elements respond to hover, active, focus, and disabled states. These simulated states show the visual difference.

### Button States

Default
Hover
Active
Focus
Disabled

### Input States

Default
Hover
Focus
Disabled

## Icons

Lucide icons at 16px (20px in grids) with 2px stroke weight. All icons use round linecaps and linejoins.

eye
code
terminal
settings
upload
download
refresh
plus
x
wrench
trash
message
info
alert
check
layout
monitor
folder
file
search

## Terminal Styling

The terminal uses a dedicated dark surface with JetBrains Mono. Syntax highlighting uses the accent palette.

Terminal — zsh
❯ npm run build
Building project...
✔ Compiled successfully in 2.4s
❯ npm run deploy
⚠ Warning: Large bundle size (1.2MB)
Deploying to production...
✘ Deploy failed: Connection timeout
❯
Success `#78d7b2`
Warning `#f1b86a`
Error `#ff9eb0`
Prompt `#6cb6ff`
Output `#d8e2ea`

## Empty States

Empty states provide clear guidance when there is no content to display. Each includes an icon, a title, descriptive text, and a call-to-action.

#### No Sessions

You don't have any active sessions. Create one to start building your project.

#### No Files

This directory is empty. Start by creating your first file or importing a project.

#### No Results

No matching results found. Try adjusting your search terms or filters.

#### All Caught Up

No pending tasks or notifications. Everything is running smoothly.

#### History Empty

No recent activity to display. Actions you take will appear here.

#### No Projects

You haven't created any projects yet. Start with a template or from scratch.