Coder Studio — Aurora Mint Design System

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

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.

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

Navigation Panel
220px

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.