Community Builder - Design Specification

Design Principles

1. VS Code's Semantic Color Usage

Colors are used functionally to convey meaning and status. Primary accent (Electric Cyan) indicates interactive elements and active states, while error states use a distinct red tone.

2. JetBrains' Information Density

Layout maximizes workspace efficiency without clutter. High contrast between background and content ensures readability during extended use.

Logo

Color Palette

Deep Navy

#0A0E27

Primary background, main canvas

Dark Slate

#1A1F3A

Secondary background, cards, panels

Slate Grey

#2A3150

Borders, dividers, subtle emphasis

Electric Cyan

#00D9FF

Primary actions, links, active states

Light Grey

#E4E6EB

Primary text, high emphasis content

Medium Grey

#8B92A8

Secondary text, metadata

Alert Red

#FF4757

Errors, warnings, destructive actions

Success Green

#2ECC71

Success states, confirmations

Typography

Heading Level 1

SF Mono, 700 weight, 2.5rem

Heading Level 2

SF Mono, 600 weight, 2rem

Body text uses system fonts for optimal readability across all platforms. It maintains clarity at various sizes and densities.

System UI, 400 weight, 1rem

Code and technical text

SF Mono, 400 weight, 0.95rem

UI Components

Buttons

Icon System

Network

Activity

Complete

Settings