Qoder

Overview

Qoder is an agentic AI coding platform that democratizes advanced development capabilities through intelligent automation. The design system embodies 'Technical Minimalism'—a philosophy that strips away visual noise to reveal function and clarity. The interface prioritizes developer productivity by using a restrained, nature-inspired palette anchored by a deep forest green (#255a41) that conveys trust and stability, paired with warm grays (#f2f4f2, #484743) that reduce cognitive load during long coding sessions. The brand personality is direct, confident, and human-centered: the tone avoids hype and jargon, instead speaking in clear, actionable language. Example voice: 'Qoder handles the boilerplate. You focus on what matters.'

Colors

The color system is built on a foundation of accessibility and developer comfort. Primary (#255a41) is the signature action color—used exclusively on CTAs like 'Download' and 'Sign in', as well as interactive focus states and brand-critical UI elements. It conveys growth and reliability without aggression. Secondary (#8b5cf6, a violet accent) supports premium features and highlights, creating visual hierarchy without competing for attention. Tertiary (#faad14, a warm amber) marks warnings, notifications, and secondary actions. The surface stack (surface #f2f4f2 through surface-container-highest #c9cdc9) creates subtle depth through incremental lightness shifts of 5–8% per step, enabling layered card designs without harsh contrast. On-surface text (#0f0d0c) is near-black but not pure black,

Typography

Instrument Sans is the sole typeface, chosen for its geometric clarity and technical neutrality—it reads equally well at 12px in code contexts and 40px in hero headlines. The type scale follows a 1.25x multiplier: display (60px, 700 weight) anchors hero sections with -0.04em letter-spacing to tighten the visual mass; headline-lg (40px, 600 weight) and headline-md (32px, 500 weight) structure content hierarchy; body-lg (18px, 400 weight) and body-md (16px, 400 weight) handle prose and UI copy; label-md (14px, 500 weight) and label-sm (12px, 500 weight) label buttons, badges, and form fields. All headlines use -0.02em to -0.04em letter-spacing to create visual weight; body text uses 0em to maintain readability. Line-height is set to 1.5x font-size for body text (28px for 18px type) and 1.2x

Layout

The layout system uses a 12-column grid with a max-width of 1440px, centered with auto margins. Padding scales with viewport: 64px on desktop (1280px+), 20px on tablet (768px–1279px), and 24px on mobile (<768px). Section separation uses lg spacing (40px) between major content blocks, md spacing (24px) between subsections, and sm spacing (12px) between related elements. Cards and containers use 48px–64px internal padding (top/bottom) and 64px horizontal padding on desktop, creating breathing room that reduces cognitive load. The container-max-width of 1440px ensures content never stretches beyond comfortable reading width. Gutters between grid items are 16px, maintaining visual rhythm without excessive whitespace. Hero sections use asymmetric layouts: headline on the left (max 600px width),

Elevation & Depth

Depth is conveyed through a three-level shadow system that avoids harsh contrast. Level 1 (Base/Surface): no shadow; elements sit flush on the background (#f2f4f2). Level 2 (Cards/Modals): box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.05), a barely perceptible lift that separates content from the background without visual drama. Level 3 (Elevated/Hover): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a more pronounced shadow that signals interactivity or focus. Cards use a 1px border in outline-variant (#b8b8b8) to define edges crisply without relying on shadow alone. Interactive elements (buttons, i

Shapes

The shape system follows 'Soft-Technical' philosophy: rounded corners are present but restrained, signaling approachability without sacrificing precision. Buttons use full (9999px) border-radius for primary actions (Download, Sign in), creating a pill shape that feels inviting and modern. Secondary buttons and inputs use DEFAULT (6px) or lg (12px) radius, balancing softness with functional clarity. Cards use xl (16px) radius, creating visual distinction from the background while maintaining a professional appearance. Small UI elements (badges, tags) use full (9999px) radius. Modals and elevate

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use backgroundColor: {colors.primary} (#255a41), textColor: {colors.on-primary} (#fdfcfc), height: 44px, padding: 12px 20px, rounded: full (9999px), and typography: label-md (14px, 500 weight). On hover, the background shifts to #1a4a33 (a 20% darkening) with a 0.2s ease-in-out transition. Secondary buttons (button-secondary) use backgroundColor: {colors.surface-container-high} (#d4d8d4), a 1px border in outline-variant (#b8b8b8), and the same height/padding. Outline buttons (button-outline) are transparent with a 1px border and on-surface text, used for tertiary actions. All buttons disable with backgroundColor: {colors.surface-container-low} (#e9ecef), textColor: {colors.outline} (#6c757d)

Do's and Don'ts

**Do**

• Do use primary (#255a41) exclusively for high-priority CTAs and focus states—it's the brand's signature and must remain distinctive.
• Do apply lg spacing (40px) between major sections and md spacing (24px) between subsections to create visual rhythm and reduce cognitive load.
• Do use Instrument Sans at 14px+ for all UI text; never fall below 12px without explicit accessibility review.
• Do transition all interactive properties (background, shadow, color) over 0.2s ease-in-out to provide tactile feedback without feeling sluggish.
• Do maintain the 1440px container max-width on desktop to prevent content from stretching beyond comfortable reading width.
• Do layer cards with the three-level shadow system: no shadow (base), 0 1px 4px (standard), 0 3px 8px (elevated).

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—use #0f0d0c for text and #f2f4f2 for surfaces to reduce eye strain.
• Don't apply border-radius smaller than 4px (sm) to interactive elements; it creates visual fragmentation and reduces touch targets.
• Don't mix typefaces; Instrument Sans is the sole font family across all contexts, including code samples and monospace displays.
• Don't use secondary (#8b5cf6) or tertiary (#faad14) as primary action colors—they are supporting accents and will dilute the primary brand signal.
• Don't exceed 3 levels of visual hierarchy in a single view; use the surface-container stack (lowest through highest) to create depth, not arbitrary color changes.
• Don't animate transitions faster than 0.2s or slower than 0.4s for standard interactions; faster feels jarring, slower feels sluggish.