Switch between the rendered Visual preview and the Raw DESIGN.md.
CodeSmith Tools embodies a bold, developer-focused aesthetic rooted in professional efficiency and technical precision. The design system champions a confident orange accent against a sophisticated dark-light contrast palette, creating an energetic yet trustworthy presence. The visual approach prioritizes clarity and functionality, with generous whitespace and clean typography that reflects the engineering mindset of its audience. This is a system built for developers who value speed, reliability, and no-nonsense communication—combining vibrant accent colors with neutral grounding elements to establish both visual interest and cognitive ease.
Key Characteristics
#F27F1E) commanding attention and action#FFEEAA) for secondary emphasis#F27F1E): Call-to-action buttons, branded elements, primary navigation highlights, and key interactive states; establishes brand identity#F4811E): Slightly darker orange for hover states and elevated primary actions#FFEEAA): Soft highlight layers, text emphasis within rich content, and hover states on neutral elements#F3AE72): Light orange for disabled states and secondary backgrounds#F27F1E): All hyperlinks default to primary orange for consistent CTA affordance#F4811E): Hover state deepens to darker orange variant#333333): Primary body text, headings, and content hierarchy foundation#666666): Secondary information, metadata, and supporting copy#555555): Tertiary text layers and de-emphasized information#808080): Disabled text and minimal-contrast supporting elements#000000): High-contrast text for critical information and code snippets#FFFFFF): Primary page and card backgrounds#E4E4E4): Subtle section dividers and light surface variations#333333): Primary borders matching text hierarchy#666666): Secondary borders and dividing linesPrimary: Open Sans (300, 300italic weights) with fallback stack: Open Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Secondary: Verdana (400, 700 weights) with fallback stack: Verdana, Tahoma, Geneva, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Open Sans | 35px | 300 | 45.5px | 0px | Hero headlines and main page titles |
| Heading / H2 | Open Sans | 35px | 300 | 45.5px | 0px | Section headlines and feature titles |
| Heading / H3 | Verdana | 25px | 300 | 35px | 0px | Subsection headers and emphasis |
| Heading / H4 | Verdana | 14px | 700 | 19.6px | 0px | Small headings and card titles |
| Heading / H5 | Verdana | 12px | 700 | 15.6px | 0px | Micro-headings and labels |
| Body / Paragraph | Verdana | 14px | 400 | 19.6px | 0px | Main content and descriptions |
| Body / Span | Verdana | 13.2px | 400 | 17.16px | 0px | Inline content and badge text |
| Link | Verdana | 10px | 400 | 13px | 0px | All hyperlinks |
| Caption / Fine Print | Verdana | 10px | 400 | 13px | 0px | Footnotes and metadata |
#F27F1E#FFFFFFVerdana14px70016px 40px4px0px none19.6px52px140px#F4811E, Text #FFFFFF#E67A1A, Text #FFFFFF#F3AE72, Text #FFFFFF, opacity 0.6#666666#FFFFFFVerdana14px70016px 40px4px0px none19.6px52px140px#555555, Text #FFFFFF#454545, Text #FFFFFFtransparent#333333Verdana14px40016px 40px4px2px solid #33333319.6px52px140px#F5F5F5, Border #333333, Text #333333#E4E4E4, Border #333333, Text #333333#FFFFFF1px solid #E4E4E44px24px0px 1px 3px rgba(0, 0, 0, 0.08)14px / #333333#FFFFFF2px solid #F27F1E4px24px0px 4px 12px rgba(242, 127, 30, 0.12)14px / #333333#3333330px none4px24px0px 2px 8px rgba(0, 0, 0, 0.25)14px / #FFFFFF#FFFFFF1px solid #CCCCCC4px12px 16pxVerdana14px400#33333319.6px44px#F27F1E, Box Shadow 0px 0px 0px 3px rgba(242, 127, 30, 0.1)#DC3545, Background #FFF5F5Verdana12px700#33333315.6px8px#FFFFFF1px solid #CCCCCC4px12px 16pxVerdana14px400#33333319.6px120px#F27F1E, Box Shadow 0px 0px 0px 3px rgba(242, 127, 30, 0.1)#333333#FFFFFFVerdana14px40020px 40px64px#FFFFFF, Text Decoration none#F27F1E, Text Decoration none#F27F1E, Border Bottom 3px solid #F27F1E#F5F5F5#333333Verdana12px40012px 16pxauto#333333, Text Decoration none#F27F1E, Background #FFFFFF#F27F1E, Background #FFFFFF, Border Left 4px solid #F27F1E#F27F1EVerdana10px400underline13px#F4811E, Text Decoration underline#D46A1A#C85915#F27F1EVerdana14px400underline19.6px#F4811E, Text Decoration none#D46A1A#F27F1E#FFFFFFVerdana10px7004px 12px12pxinline-block13px#E4E4E4#333333Verdana10px7004px 12px12pxinline-block13px135deg from #F27F1E to #F4811E80px 40px400px#FFFFFFOpen Sans 35px / 300 weightVerdana 14px / 400 weightleftBase Unit: 4px
Scale Progression:
4px - Micro spacing, icon padding, tight element grouping8px - Extra-small gaps, button icon spacing12px - Small padding, form input padding, list item spacing16px - Primary padding, section dividers, component internal spacing20px - Medium margin, card separation, navigation padding24px - Standard margin, content block separation, card padding32px - Large gap, section boundaries, major content division40px - Extra-large margin, feature section spacing, hero padding horizontal52px - Feature spacing, major section padding56px - Section margin boundaries80px - Hero section padding, full-width section spacingUsage Context:
4px - 12px12px - 16px padding, 20px - 24px margin24px internal padding, 24px - 40px external margin40px - 80px between major content blocks80px vertical, 40px horizontalMax Width: 1200px for primary content containers
Grid Strategy: 12-column flexible grid with 16px gutter spacing; adapts to 8-column at medium breakpoints and 4-column at small breakpoints
Container Padding:
40px left/right24px left/right16px left/rightSection Patterns:
Whitespace is treated as a first-class design element enabling cognitive clarity and reducing cognitive load. The system prioritizes breathing room around content blocks, generous vertical spacing between sections, and strategic use of negative space to guide user attention. Cards and containers maintain comfortable internal padding to prevent content density, while section margins create clear visual hierarchy. This approach reflects developer sensibilities—clean, organized, and easy to scan.
0px - Sharp edges for grid-aligned components and inputs4px - Subtle rounding for buttons, cards, and form elements12px - Medium rounding for badges and pill-shaped components36px - Full rounding for circular images, avatar containers, and circular icons50% - Perfect circles for avatar images and icon buttons| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow (box-shadow: none) | Default buttons, form inputs, flat navigation |
| Raised | 0px 1px 3px rgba(0, 0, 0, 0.08) | Standard cards, hover state elevation, subtle lift |
| Elevated | 0px 4px 12px rgba(242, 127, 30, 0.12) | Featured cards, featured callouts, secondary CTAs |
| High | 0px 8px 24px rgba(0, 0, 0, 0.15) | Modals, dropdowns, floating panels |
| Maximum | 0px 12px 32px rgba(0, 0, 0, 0.2) | Full-screen overlays, stacked modals |
Shadow Philosophy: The design system employs a restrained shadow approach favoring subtle depth cues over dramatic elevation. Shadows use soft, large blur radiuses with low opacity to create perceived depth without visual heaviness. Orange-tinted shadows (rgba(242, 127, 30, ...)) apply selectively to featured branded elements, while neutral dark shadows (rgba(0, 0, 0, ...)) ground standard components. This strategy maintains visual clarity—a key priority for developer tools—while preserving the modern, polished aesthetic.
#F27F1E) for all primary CTAs and action buttons — establish consistent affordance throughout the interface44px height for all interactive elements to ensure comfortable touch targets and desktop click accuracy16px padding to form inputs and text fields for comfortable text entry and visual breathing room24px padding and subtle borders to create clear information hierarchy20px - 40px spacing between major sections to establish clear visual boundaries16px gap between buttons#F4811E) exclusively for hover states to provide consistent interactive feedback4px border radius to all rectangular components for a modern, slightly softened aesthetic#333333, #666666, #555555) hierarchically to establish text dominance and de-emphasize supporting information12px between independent content blocks — maintaining minimum gaps preserves scanability80px padding in hero sections — respect mobile viewport constraints#000000 for general text — use #333333 instead for better readability and visual consistency44px in height — maintain accessibility and mobile usability#F27F1E — consistency aids user mental models across the platform| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | ≤ 480px | Single column layout, 16px container padding, font size reduced by 1-2px on body, buttons full width, 20px section spacing |
| Tablet | 481px - 1024px | Two-column grid, 24px container padding, 8-column grid system, 24px section spacing |
| Desktop | 1025px - 1200px | Three-column layout, 12-column grid system, 40px container padding, full feature layouts |
| Large Desktop | ≥ 1201px | Locked max-width 1200px with centered container, full 12-column grid, 40px padding |
44px × 44px (native iOS/Android standard)44px (already met by primary component spec)44px for icon buttons; 120px for text buttons8px horizontal, 4px vertical around link text8px gap to prevent mis-taps44px minimum to accommodate finger input80px (desktop) → 60px (tablet) → 40px (mobile); font sizes reduce 10-15%768px breakpoint; maintain 24px gap768px; convert to single-column at 480px768px breakpoint; secondary nav becomes vertical stack12px - 16px padding16px 40px → 16px 20px#F27F1E)#F4811E)#F3AE72)#666666)#333333 border#FFFFFF)#333333)#333333)#666666)#F27F1E)#D46A1A)#FFFFFF)#E4E4E4)#333333)#666666)#FFEEAA)#F27F1E for all main CTAs, links, and branded elements; enforce consistency by replacing any non-orange primary actions44px tall to meet accessibility and mobile usability standards16px as primary padding/margin unit; scale up to 24px, 40px, 80px for sections; never use arbitrary spacing values#F27F1E on #FFFFFF background24px padding internally, 4px border radius, optional subtle shadow 0px 1px 3px rgba(0, 0, 0, 0.08) for raised state#FFFFFF background with 12px padding; focus state adds #F27F1E border with orange shadow40px - 80px between major content blocks; 20px - 24px between cards; 12px - 16px between form groups768px; reduce padding from 40px → 24px → 16px as viewport shrinks; maintain 44px minimum for touch targets