Switch between the rendered Visual preview and the Raw DESIGN.md.
Athas embodies a clean, minimalist aesthetic designed for serious developers who value efficiency and focus. The visual language prioritizes clarity and reduced cognitive load, with a warm, earthy neutral palette accented by a sharp, vibrant blue that commands attention. The design feels modern yet timeless, drawing inspiration from contemporary code editors and productivity tools, with generous whitespace, crisp typography, and subtle interactions that feel responsive and intentional. The overall atmosphere is professional yet approachable—sophisticated without being cold, with a touch of warmth that makes extended working sessions feel comfortable.
Key Characteristics
#1C1917): Primary text, headings, and UI elements; the foundation color appearing throughout the interface#146DF7): Primary call-to-action buttons, links, and interactive highlights; signals importance and actionability#57534E): Secondary text, disabled states, and subtle UI elements; used 87 times for visual hierarchy#111315): Deep shadows and extreme contrast elements; rarely used for accessibility edge cases#14532D): Success and positive semantic states#DCFCE7): Success background and validation feedback#78350F): Warning and informational semantics#FEF3C7): Warning background and cautionary feedback#146DF7): Navigation links and interactive text; matches primary action color#EF4444): Error states, validation failures, and destructive actions#FFFFFF): Pure white for maximum contrast backgrounds#FAFAF9): Subtle background alternative to pure white#EAE7DF): Primary background color used across 302 instances; warm neutral foundation#F4F4F5): Subtle surface distinction and borders#F7F8F8): Alternative light surface#FDFDFC): Minimal warm background#F4F3EF): Warm neutral for secondary backgrounds#EAE7DF): Primary border and divider color; warm neutral stroke#1C1917): High-contrast borders for defined separation#14532D text on #DCFCE7 background): Positive confirmations and successful operations#78350F text on #FEF3C7 background): Alerts and informational states#EF4444): Destructive actions and validation errorsPrimary: General Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif Secondary: Menlo, Monaco, "Courier New", monospace (for code and technical content)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display (H1) | General Sans | 60px | 500 | 60px | 0px | Hero headlines, main page titles |
| Heading (H2) | General Sans | 36px | 500 | 40px | 0px | Section headings, major divisions |
| Subheading (H3) | General Sans | 30px | 500 | 36px | 0px | Feature headlines, secondary divisions |
| Label (H4) | General Sans | 14px | 600 | 20px | 0px | Form labels, UI labels, metadata |
| Body | General Sans | 16px | 400 | 28px | 0px | Body copy, description text |
| Body Small | General Sans | 14px | 400 | 20px | 0px | Secondary text, captions, UI text |
| Button | General Sans | 14px | 500 | 20px | 0px | Call-to-action text, button labels |
| Button Bold | General Sans | 14px | 600 | 20px | 0px | Icon buttons, compact UI controls |
| Code | Menlo | 13px | 400 | 20px | 0px | Code snippets and syntax highlighting |
| Caption | General Sans | 12px | 400 | 18px | 0px | Help text, minor annotations |
#146DF7#FFFFFF at 85% opacity0px 12px14px weight 50036px6px0px (none)none#0052CC (darkened blue), cursor pointer#003A9A, text slightly brightened#D4D4D8, text #A1A1A5, cursor not-allowed2px solid #146DF7 inset 2px#F4F3EF#1C19170px 12px14px weight 60028px6px0px (none)none#EAE7DF, border 1px solid #57534E#E0DDD5#FAFAF9, text #A1A1A52px solid #146DF7 inset 2pxtransparent#57534E0px 0px14px weight 40020px0px0px (none)none#1C1917, underline 1px solid #1C1917#146DF7#D4D4D8, cursor not-allowedtransparent#57534E0px14px weight 60028px28px6px0px (none)none#F4F3EF, color #1C1917#EAE7DF, color #146DF72px solid #146DF7#F4F3EF#1C19170px14px weight 60028px28px6px0px (none)none#EAE7DF#E0DDD5, color #146DF7#FFFFFF#1C191724px16px weight 4000px (sharp edges for modern aesthetic)1px solid #EAE7DF0px 1px 3px rgba(0, 0, 0, 0.05)#57534E, shadow 0px 4px 6px rgba(0, 0, 0, 0.08)#FAFAF9#1C191748px 64px0px0px (none)none#F4F4F5#78350F2px 6px4px0px (none)#FFFFFF#1C19178px 12px14px weight 40036px6px1px solid #EAE7DFnone2px solid #146DF7, outline none, box-shadow 0px 0px 0px 3px rgba(20, 109, 247, 0.1)1px solid #EF4444, background #FEF2F2#F4F4F5, text #A1A1A5, cursor not-allowed#A1A1A5#FFFFFF#1C191712px 12px14px weight 400120px6px1px solid #EAE7DFnone2px solid #146DF7, box-shadow 0px 0px 0px 3px rgba(20, 109, 247, 0.1)#FFFFFF#1C19178px 12px14px weight 40036px6px1px solid #EAE7DFnone2px solid #146DF7, box-shadow 0px 0px 0px 3px rgba(20, 109, 247, 0.1)#F4F3EF, text #1C1917#1C191714px weight 6008px18px18px1px solid #EAE7DF4px (checkbox), 50% (radio)#FFFFFF (unchecked), #146DF7 (checked)0px 0px 0px 3px rgba(20, 109, 247, 0.1)#FFFFFFtransparent64px0px 24px0px (none)#1C191716px weight 4008px 12px0px2px solid transparent#146DF7, text color #146DF72px solid #146DF7, text #146DF7 weight 500transparent36px36px6px#1C1917#F4F3EF#EAE7DFBase Unit: 4px
Scale:
4px: Tight spacing between inline elements8px: Compact spacing within components12px: Standard spacing inside containers (padding, gaps)16px: Regular spacing between elements20px: Comfortable spacing for related groups24px: Card and container internal padding28px: Generous spacing between sections32px: Major section separation40px: Large breathing room between features48px: Substantial section padding (top/bottom)56px: Extra-large separation for visual breaks64px: Maximum padding for hero sections and full-width containersUsage Context:
8px 12px (height 36px)24px48px vertical, 64px horizontal on desktop40px to 56px16px to 20px1200px for content containers on desktop24px between columns24px on tablet, 12px on mobileWhitespace is treated as an active design element, never as empty space. Generous margins and padding between sections create rhythm and reduce cognitive load for developers. Vertical whitespace (margins) should exceed horizontal spacing to guide eye movement down the page. Hero sections breathe at 64px padding; card sections at 24px. Never collapse whitespace below 12px except in tight button clusters.
0px: Sharp edges for modern, minimal aesthetic (cards, major containers, inputs when not focused)4px: Subtle rounding for images and inline code blocks6px: Standard component rounding (buttons, inputs, icon buttons, small containers)3355440px (math.pi × 10^6 px): Maximum rounding for circular elements (avatar buttons, badges)| Level | Treatment | Use |
|---|---|---|
| Flat (None) | box-shadow: none | Navigation, hero sections, minimal UI |
| Surface (sm) | 0px 1px 2px rgba(0, 0, 0, 0.05) | Cards, containers, subtle separation |
| Raised | 0px 4px 6px rgba(0, 0, 0, 0.08) | Hovered cards, floating buttons, modals |
| High | 0px 10px 15px rgba(0, 0, 0, 0.12) | Dropdowns, popups, overlays |
| Highest | 0px 20px 25px rgba(0, 0, 0, 0.15) | Deep modals, fullscreen overlays |
Shadow Philosophy: Shadows are minimal and used sparingly to maintain the clean aesthetic. Depth is primarily established through color, position, and contrast rather than heavy shadows. Hover states introduce subtle elevation through shadow addition, creating tactile feedback. Shadows increase slightly with z-depth but never become heavy or blurred. The palette uses dark grays with low opacity (rgba(0, 0, 0, 0.05) through 0.15)) to maintain warmth and avoid harsh black shadows. Avoid drop shadows on text; use background colors for separation instead.
16px base font size for body text; readability over compact design#146DF7 blue exclusively for primary actions and interactive elements; consistency builds recognition36px minimum height for all interactive elements; comfortable touch targets4px; maintains visual rhythm#EAE7DF as the primary border and divider color; warm, not harsh6px border radius to buttons and inputs; modern, friendly appearance:focus states with 2px solid #146DF7 outline for keyboard accessibility#57534E text meets WCAG contrast on #F4F3EF#EF4444) for destructive actions and validation failures only0px radius) for interactive elements; buttons and inputs need 6pxrgba(0, 0, 0, 0.3+)); maintain minimal, clean aesthetic60px heading size or 28px body text; maintain hierarchy and readability#000000) for text; use #1C1917 or #111315 for warmth#146DF7) for all primary interactions12px in cards or 8px in buttons; maintain breathing room#EF4444 and descriptive text300ms; maintain snappy, responsive feel| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 0px–639px | Single column, 12px padding, 28px section margin, stacked buttons full-width |
| Tablet | 640px–1023px | 2–4 columns, 24px padding, 40px section margin, 8px button gaps |
| Desktop | 1024px–1279px | 12-column grid, 48px padding, max-width 1200px, side-by-side layouts |
| Wide | 1280px+ | Same as desktop, centered with 64px margin |
44px × 44px on mobile for all interactive elements8px (16px preferred) on mobile to prevent accidental taps16px to prevent iOS zoom on input focus44px minimum; 36px acceptable on desktop< 1024px; top bar links collapse into drawer12px margin; constrained to max-width: 100% with aspect ratio1–2 columns on tablet; 2–3 columns on desktop12px mobile, 24px tablet, 48px desktop30px H3 → 20px on mobile)8px gap on tablet+48px–64px to 28px–32px on mobile#146DF7)#1C1917)#57534E)#EAE7DF) or Near White (#FFFFFF)#FAFAF9) or Stone Light (#F4F3EF)#EAE7DF)#14532D) on Pale Green (#DCFCE7)#78350F) on Amber Light (#FEF3C7)#EF4444)#F4F3EF) background with Deep Charcoal textTypography Foundation: All text uses General Sans font family with fallback to system sans-serif. Body text is 16px weight 400; headings scale from 30px (H3) to 60px (H1); buttons and labels are 14px weight 500–600.
Color Semantics: Use #146DF7 exclusively for primary actions and links. Secondary UI uses #57534E. All backgrounds default to #FFFFFF (cards) or #EAE7DF (sections). Borders are always #EAE7DF. Error states are always #EF4444.
Component Structure: All interactive elements (buttons, inputs) have 36px height minimum with 6px border radius. Padding inside containers is 24px; section padding is 48px–64px. Gap between elements is 12px–20px.
Spacing Consistency: Margins follow the 4px base scale (4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 56px, 64px). Card internal padding is always 24px. Never collapse spacing below 12px except in tight UI clusters.
Hover & Focus States: All interactive elements have clear hover states (darker background or text color). All interactive elements support keyboard focus with 2px solid #146DF7 outline. Disabled states are #D4D4D8 background with #A1A1A5 text.
Border Radius Application: Use 0px for major containers and sharp edges. Use 4px for images and inline code. Use 6px for all buttons, inputs, and small UI components. Use circular rounding (50%) only for avatar buttons.
Depth & Shadows: Shadows are minimal; use 0px 1px 2px rgba(0, 0, 0, 0.05) for surface cards and 0px 4px 6px rgba(0, 0, 0, 0.08) for hover states. Avoid shadows over 0.15 opacity. Prefer color and position for depth over heavy shadows.
Responsive Design: At mobile (< 640px), stack elements vertically, use 12px padding, and increase touch targets to 44px. At tablet (640px–1023px), use 2–4 columns with 24px padding. At desktop (1024px+), use 12-column grid with 48px padding and constrain max-width to 1200px.
Form & Input Treatment: All inputs have 36px height, 12px padding, and 6px border radius. Borders default to #EAE7DF. Focus states add 2px solid #146DF7 border and 0px 0px 0px 3px rgba(20, 109, 247, 0.1) box shadow. Error states use #EF4444 border and #FEF2F2 background. Labels are 14px weight 600 above inputs with 8px margin-bottom.
Navigation & Top Bar: Navigation has 64px height with 24px horizontal padding. Links are 16px weight 400 with 12px side padding. Active links have 2px solid #146DF7 bottom border and #146DF7 text color. On mobile, navigation collapses to hamburger menu button at top-left with 36px × 36px size.