Switch between the rendered Visual preview and the Raw DESIGN.md.
The Mortgage Calculator design system embodies financial clarity and accessibility, combining approachable teal and emerald green accents with a deep navy foundation. The aesthetic balances professional credibility with user-friendly simplicity, designed to demystify complex mortgage calculations through clean interfaces and intuitive interactions. The color palette evokes trust and stability—essential for financial tools—while maintaining visual warmth that encourages exploration. Subtle shadows and generous whitespace create a sense of spaciousness, making dense form fields feel manageable and less intimidating.
Key Characteristics
#003140): Primary brand color for header backgrounds and key UI anchors; establishes brand identity and authority#2B5D6D): Secondary primary for section headers and prominent text; creates visual hierarchy within content blocks#94D3E6): Most frequently used accent for interactive hints, sidebar backgrounds, and secondary content containers#BCE5F1): Ultra-light teal for soft backgrounds and informational panels; maintains visual hierarchy without overwhelming#D6F1F9): Lightest teal for gentle background fills and surface accents#03934F): Primary call-to-action and positive action indicators; signals completion and encouragement#21596A): Hover and focus states for interactive elements; provides visual feedback without jarring changes#03934F): Default state for primary buttons, links, and actionable elements#94D3E6): Secondary interactive states, sidebar navigation, and form helper backgrounds#363636): Primary text color for body copy, labels, and interface text; ensures legibility#000000): High-contrast text for critical information; used sparingly for emphasis#FFFFFF): Text on dark backgrounds and primary form field backgrounds#818181): Subtle placeholder text and disabled state indicators#B9CED5): Tertiary neutral for subtle separators and muted background fills#F3F9FB): Primary page background and subtle surface fills; maintains visual continuity#DCEAEE): Subtle borders between sections and input field separators#D1E1E6): Form field borders and container outlines; low visual weight#D8E2E6): Alternative border color for secondary containers and dividersPrimary: Ubuntu (sans-serif) – headings and display text
Fallback: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif
Secondary: Roboto (sans-serif) – body copy, labels, and navigation
Fallback: Arial, Helvetica, sans-serif
Tertiary: Arial (sans-serif) – form inputs and buttons
Fallback: Helvetica, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display/H1 | Ubuntu | 28px | 700 | 28px | 0px | Page titles and primary headlines |
| Heading 2 | Ubuntu | 25px | 700 | 25px | 0px | Section headers and major divisions |
| Heading 3 | Ubuntu | 20px | 700 | 20px | 0px | Subsection titles and card headers |
| Body | Roboto | 13px | 400 | 18px | 0px | Paragraph text and descriptive copy |
| Label/Span | Roboto | 15px | 400 | 20px | 0px | Form labels and metadata text |
| Label Emphasis | Roboto | 13.5px | 700 | 20px | 0px | Bold form labels and field names |
| Button Text | Arial | 13px | 500 | normal | 0px | Standard button labels |
| Button Large | Arial | 22px | 500 | normal | 0px | Primary action buttons (Calculate Now) |
| Button Small | Arial | 20px | 300 | 40px | 0px | Icon buttons and compact actions |
| Input Text | Arial | 13.3333px | 400 | normal | 0px | Form field input text |
| Code/Placeholder | Arial | 12px | 400 | 26px | 0px | Input placeholders and small UI text |
rgb(3, 147, 79) – Emerald green signals positive actionrgb(255, 255, 255)8px 43px 8px 19px (asymmetric for icon alignment)30px / 50px (pill shape with fallback)0px nonergb(58, 95, 107) 0px 2px 0px 0px (subtle depth)46px337pxrgb(2, 135, 72) (darker emerald)rgb(2, 133, 70) 0px 0px 2px 1px insetrgba(0, 0, 0, 0) (transparent)rgb(54, 54, 54) (dark charcoal)0px 0px 0px 0px0px0px nonenone46px337px20pxrgb(0, 0, 0) (pure black)rgba(0, 0, 0, 0) (transparent)rgb(255, 255, 255)8px 33px30px / 50px0px nonergb(58, 95, 107) 0px 2px 0px 0pxautonormalrgb(200, 200, 200)rgb(3, 147, 79) (emerald green)rgb(54, 54, 54) (dark charcoal)0px 0px 0px 0px4px1px solid rgb(20, 202, 115) (bright green accent)rgb(2, 133, 70) 0px 0px 2px 1px inset40px40pxrgb(2, 135, 72) (darker emerald)rgb(255, 255, 255)1px solid rgb(212, 225, 230) (soft light border)4px32px 36px0px 1px 3px rgba(0, 0, 0, 0.08) (subtle elevation)20px 0pxrgb(188, 229, 241) (teal pale)none0px24px 20pxnonergb(212, 241, 249) (sky frost)1px solid rgb(220, 234, 238) (border light)0px24px 32pxnonergb(43, 93, 109) (navy slate)rgb(255, 255, 255)none0px40px 36pxnonergb(255, 255, 255)rgb(0, 0, 0)4px 4px (compact)2px inset rgb(118, 118, 118) (inset 3D effect)0pxauto (content-driven)90%normal2px solid rgb(3, 147, 79) (emerald accent)rgb(129, 129, 129) (stone grey)rgb(54, 54, 54) (dark charcoal)20px4pxrgb(255, 255, 255)rgb(54, 54, 54) (dark charcoal)8px 12px1px solid rgb(212, 225, 230) (border light)4px36pxrgb(3, 147, 79) (emerald)grid or flex with gap: 16px0px 0px 12px 0px (vertical spacing between rows)rgb(0, 49, 64) (deep ocean)81pxrgb(255, 255, 255) (text on dark background)0px 32pxrgb(255, 255, 255) (on header background)none20pxrgb(148, 211, 230) (teal light)rgb(188, 229, 241) (teal pale) – defaultrgb(54, 54, 54) (dark charcoal)12px 16px0px3px solid transparentrgb(148, 211, 230) (teal light); border-left: 3px solid rgb(3, 147, 79) (emerald)rgb(3, 147, 79) (emerald); color: rgb(255, 255, 255)rgb(148, 211, 230) (teal light)none20pxunderline; color shifts to rgb(3, 147, 79) (emerald)rgb(3, 147, 79) (emerald success)nonergb(2, 135, 72) (emerald dark); text-decoration: underlinergb(148, 211, 230) (teal light)rgb(0, 49, 64) (deep ocean)50%18px18px12px700flex (center content)help or pointerThe design system uses a base unit of 4px with a modular scale supporting compact to generous spacing:
4px (padding within labels, inline element spacing)12px (tight vertical rhythm, input padding)16px (standard gap between form fields and elements)20px (vertical margins between sections)24px (padding in cards, section spacing)32px (major section padding and outer margins)36px (form container padding)40px (footer and full-width section margins)168px (large content breaks between major sections)Usage Context:
12px vertical spacing between rows24px–36px depending on content density20px–40px vertical, 168px for page breaks16px standard, 20px for loose layouts1200px (design supports up to 1400px with margins)32px–40px on desktop, 20px on tablet, 16px on mobile337px–1000px width depending on context300–360px fixed16px–20px between columnsGenerous, intentional whitespace creates visual breathing room and reduces cognitive load. The layout uses:
40px–168px) separate major sections and allow visual rest20px–32px) organizes related content groups4px–12px) refines individual component density0px (inputs, form elements, section blocks)4px (icon buttons, small components)5px (form inputs, cards)30px (pill buttons)30px / 50px (button fallback, elliptical shapes)50% (avatars, icon backgrounds)| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; box-shadow: none | Background sections, disabled states |
| Subtle | box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08) | Cards, container boundaries |
| Button Depth | box-shadow: rgb(58, 95, 107) 0px 2px 0px 0px | Primary and ghost buttons (2px offset) |
| Inset Interaction | box-shadow: rgb(2, 133, 70) 0px 0px 2px 1px inset | Icon button active state, hover feedback |
| Moderate | box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12) | Dropdowns, floating panels (inferred) |
| Deep | box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15) | Modals, overlays (inferred) |
Shadow Philosophy: The design uses minimal, functional shadows that primarily serve to lift interactive elements (buttons) off the page or provide tactile feedback. Shadows are muted and use deep slate tones (rgb(58, 95, 107)) rather than pure black, maintaining the warm, approachable aesthetic. Inset shadows on icon buttons create a pressed/active visual metaphor. Most surfaces are flat to prioritize content and reduce visual noise.
#03934F) prominently for all primary call-to-action buttons; it signals encouragement and trust12px vertical spacing to create visual rhythm#94D3E6) to secondary containers and sidebar elements to create visual cohesion46px height on touchable buttons for mobile accessibility2px inset rgb(118, 118, 118)) to create a subtle 3D recessed appearance24px–32px padding to organize complexity#363636 on light backgrounds, #FFFFFF on dark) to meet WCAG AA standards#94D3E6, #BCE5F1, #D6F1F9) to create subtle visual distinctions in nested sections?) with teal backgrounds and hover tooltips to reduce user friction#000000) as a default text color; #363636 is preferred for reduced harshness24px in cards; users need breathing room around inputs337px width for input fields on desktop; full-width inputs reduce scanability| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 640px | Single-column layout; sidebar moves below form; buttons expand to full width; padding reduces to 16px; font sizes reduce 1–2px |
| Tablet | 640px–1024px | 2-column layout emerges; sidebar positions right; form fields stack; buttons 300px wide; padding 20px |
| Desktop | 1024px–1400px | Full 3-column with sidebar; form fields in 2-column grid; containers reach 337px width; padding 32px–40px |
| Large Desktop | > 1400px | Max width enforced at 1200px; centered with equal margins; no further expansion |
44px × 44px (buttons, icon buttons, interactive areas)48px × 48px for mobile primary actions8px minimum to prevent accidental taps36px height for touch input; larger on mobile (46px)40px height when used as standalone interactive elements640px900px; becomes vertical tabs on tablet (640px–900px)768px600px when they're primary actions; reduce padding from 33px to 16px2–4px on mobile1–2px on mobile13.5px minimum for legibility40px (desktop) → 20px (tablet) → 16px (mobile)36px (desktop) → 24px (tablet) → 16px (mobile)2 × margin on mobile; never force horizontal scroll#03934F) – use for "Calculate Now" buttons and positive affirmations#F3F9FB) – page background, maintains light aesthetic#363636) – primary text color for all headings and labels#363636) – consistent with headings for unified typography#94D3E6) – most-used accent; apply to sidebars, hint boxes, secondary containers#003140) – fixed background for navigation and brand anchors#94D3E6) on dark backgrounds; Emerald Success (#03934F) on light backgrounds#DCEAEE) or Border Subtle (#D1E1E6) – subtle form and section dividers#21596A) – all interactive hover states#FFFFFF) – form field backgrounds2px inset rgb(118, 118, 118) – 3D recessed effectAlways start with a 46px minimum height for buttons and touchable form elements; this ensures mobile accessibility and consistency.
Use the pill-shaped button style (border-radius: 30px / 50px) for all primary action buttons; apply rgb(3, 147, 79) background with white text and rgb(58, 95, 107) 0px 2px 0px 0px shadow for depth.
Stack form fields vertically with 12px margin between rows; keep width at 337px or use 90% with max-width constraints for responsive scaling.
Apply teal accents (#94D3E6, #BCE5F1, #D6F1F9) to secondary containers, sidebars, and information panels; layer from darkest to lightest for hierarchy.
Reserve emerald green (#03934F) exclusively for primary call-to-action buttons, positive feedback, and active states; don't overuse or it loses impact.
Use Ubuntu (weight 700) for all heading levels (H1: 28px, H2: 25px, H3: 20px); Roboto for body text ensures consistent readability at 13–15px sizes.
Include help icons with background: #94D3E6, width: 18px, height: 18px, centered text at 12px weight 700; position inline next to form labels for accessibility.
Apply inset borders to text inputs: 2px inset rgb(118, 118, 118) for a recessed 3D effect; shift to 2px solid rgb(3, 147, 79) on focus.
Space sections with macroscopic whitespace: 20px between form rows, 32px padding in cards, 40px margins between major sections, 168px for full page breaks.
Test all interactions at 44px minimum (buttons, links, icon targets); ensure keyboard focus states are visible using outlines or background shifts; never rely on color alone.
Maintain color contrast ratios of 4.5:1 for normal text, 3:1 for large text; #363636 on #FFFFFF and #FFFFFF on #003140 both pass WCAG AA.
Use the navy slate (#2B5D6D) for section headers and structural containers; deep ocean (#003140) only for the main header bar and brand-critical areas.
Apply subtle shadows only to buttons and cards using the prescribed values; avoid compound shadows that add visual complexity; keep elevation functional, not decorative.
Collapse form layouts from 2-column to 1-column below 768px; reduce padding from 36px to 16px on mobile; ensure buttons expand to full width for mobile primary actions.
Never remove focus indicators on form fields or links; keyboard navigation is essential; replace default browser focus with a 2px solid rgb(3, 147, 79) outline or background highlight.