Switch between the rendered Visual preview and the Raw DESIGN.md.
The Accountology design system embodies a professional, modern, and technology-forward aesthetic grounded in trust and expertise. The visual language combines deep maritime blues with electric accents, creating a sophisticated yet dynamic atmosphere that conveys both stability and innovation. The design leverages geometric patterns, minimal ornamentation, and clean typography to establish authority in the financial services domain. Dark backgrounds contrast with bright highlights, creating visual depth and focus while maintaining legibility. This system is designed to communicate competence, reliability, and cutting-edge professionalism to enterprise and mid-market clients.
Key Characteristics
#1B3A59): Primary brand color used extensively in headers, text, and foundational UI elements. Conveys trust, professionalism, and institutional authority.#0000EE): Vibrant primary accent for interactive elements, links, and CTAs. Creates high contrast and draws attention to actions and navigational cues.#052B48): Darker tint of primary navy for hover states, borders, and secondary emphasis. Used sparingly for depth variation.#0A9E68): Semantic accent for positive actions, confirmations, and success states. Rarely used but available for status messaging.#0000EE): Links, button text, and interactive focus states. High visibility and web-standard blue for familiarity.#1B3A59): Button borders and interactive container backgrounds. Provides visual containment and hierarchy.#444444): Primary body text color. Warm neutral ensuring readability without pure black harshness.#000000): Secondary text, fine borders, and high-contrast accents. Used for maximum legibility in dense content.#808080): Subtle text, disabled states, and secondary information. De-emphasizes non-critical content.#999999): Placeholder text, subtle dividers, and tertiary information. Maintains visual hierarchy while remaining accessible.#FFFFFF): Primary surface background for cards, containers, and main content areas. Establishes clean, readable spaces.#EFEFEF): Subtle surface variation for secondary backgrounds, alternate rows, or secondary containers. Provides gentle visual distinction without distraction.#EEEEEE): Minimal use; available for very subtle background layers or edge cases requiring extreme subtlety.#111111): Near-black for maximum contrast scenarios or refined dark mode alternatives.Primary: Open Sans (sans-serif stack: Open Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)
The default typeface for all UI text, navigation, body copy, and standard interactions. Clean, highly legible, and universally available.
Secondary: Prata (serif stack: Prata, Georgia, "Times New Roman", serif)
Reserved for select display headings and premium branded moments. Adds sophistication and visual distinction.
Tertiary: Source Sans Pro (sans-serif stack: Source Sans Pro, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)
Used for button labels and specific interactive components requiring distinct visual treatment.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large (H1) | Open Sans | 55px | 700 | 66px | 0px | Hero headlines; dominant page impact |
| Display Medium (H2) | Open Sans | 40px | 700 | 60px | 0px | Section headings; primary visual breaks |
| Display Small (H3) | Prata | 35px | 400 | 42px | 0px | Premium section headers; branded moments |
| Heading Large (H4) | Open Sans | 16px | 700 | 24px | 0px | Card titles and subsection headers |
| Heading Small (H5) | Open Sans | 12px | 700 | 24px | 0.5px | Labels and small emphasis text |
| Body Standard | Open Sans | 16px | 400 | 24px | 0px | Primary reading text; paragraphs and descriptions |
| Body Small (Label) | Open Sans | 14px | 400 | 24px | 0px | Form labels and secondary descriptive text |
| Button Text | Source Sans Pro | 16px | 400 | 22px | 0px | All button labels and interactive text |
| Caption / Micro | Open Sans | 12px | 400 | 18px | 0px | Footnotes, timestamps, and minimal text |
| Monospace / Code | Monaco, "Courier New", monospace | 14px | 400 | 21px | 0px | Code snippets and technical references |
rgba(0, 0, 0, 0) (transparent)#0000EE1px solid #FFFFFF50px0px52px222pxrgba(0, 0, 238, 0.1), text remains #0000EE, border becomes 2px solid #0000EErgba(0, 0, 238, 0.2), border 2px solid #052B48#999999, border 1px solid #EFEFEF#0A9E68#0000EE1px solid #1B3A5950px0px52px222px#088A5A, text remains #0000EE#066D48, border 2px solid #052B48#EFEFEF, text #999999#EFEFEF#0000002px outset #0000000px1px 6pxautoauto#E0E0E0, border remains 2px outset #0000002px inset #000000#FFFFFF1px solid #EFEFEF5px24px to 40px (responsive)0px 2px 8px rgba(0, 0, 0, 0.08)#1B3A59, body text in #4444440px 4px 16px rgba(0, 0, 0, 0.12), background remains #FFFFFFfrom #1B3A59 to #052B48#FFFFFF40px to 56px0px 8px 24px rgba(0, 0, 0, 0.16)#EFEFEF#FFFFFF32px to 56px vertical spacing20px to 52px (responsive)#1B3A59, body in #444444rgba(0, 0, 0, 0) (transparent, often on dark surfaces)#FFFFFF1px solid #FFFFFF (context-dependent)0px0px 10px30px#999999 with opacity 0.62px solid #0000EE, background remains transparent#808080, opacity 0.5#1B3A598px#FFFFFF24px to 36px1px solid #EFEFEF5px16px to 20px between inputs#FFFFFF0px 68px (right alignment for menu)16px horizontal gap between nav items2px solid #0000EE#FFFFFF, opacity increases to 1 (if previously reduced)12px between items#444444/ in #999999#1B3A5912px 0px#0000EEunderline, color remains #0000EE#052B48, text decoration underline#6B5B95 (inferred accessible purple)#FFFFFF10px horizontalrgba(0, 0, 238, 0.1), color remains #FFFFFF#1B3A5915px 30px 15px 15px54px#EFEFEF, color remains #1B3A59#EFEFEF, left border 3px solid #0000EEThe spacing system is built on an 8px base unit with a modular scale:
4px — Tight padding within dense components (inputs, small buttons)8px — Padding around small UI elements; tight vertical rhythm12px — Padding in form fields, button-adjacent spacing16px — Standard padding for cards, section boundaries, and component gaps20px — Larger component padding; section dividers24px — Primary container padding; generous section spacing32px — Inter-section margins; major layout breaks40px — Large section padding and hero spacing52px — Premium spacing for hero sections and page top/bottom56px — Maximum spacing for full-width sections and layout boundariesUsage Context:
24px to 40px; sections use 20px to 56px32px to 56px; within sections, 16px to 24px8px below)1200px (inferred for enterprise web standards)20px to 52px responsive horizontal padding at all breakpointsGenerous whitespace is fundamental to Accountology's visual language. Sections breathe with ample vertical spacing (32px to 56px), and containers maintain comfortable internal padding. This approach emphasizes content hierarchy and prevents cognitive overload. White space draws the eye to actionable elements and reinforces the professional, uncluttered aesthetic. No section should feel cramped; breathing room signals confidence and clarity.
0px): Form inputs, tables, and components requiring sharp edges for technical precision5px): Cards, containers, and general UI surfaces. Provides gentle rounding without excessive curvature50px): Buttons and badge elements. Full-height border radius creates friendly, action-oriented appearance| Level | Treatment | Use |
|---|---|---|
| Flat (L0) | No shadow, box-shadow: none | Background surfaces, text, disabled elements |
| Raised (L1) | 0px 2px 8px rgba(0, 0, 0, 0.08) | Standard cards, subtle elevation, form containers |
| Elevated (L2) | 0px 4px 16px rgba(0, 0, 0, 0.12) | Card hover states, secondary containers, featured elements |
| Prominent (L3) | 0px 8px 24px rgba(0, 0, 0, 0.16) | Hero cards, primary featured sections, modal overlays |
| Maximum (L4) | 0px 12px 32px rgba(0, 0, 0, 0.2) | Dropdowns, modals, floating action elements (rare) |
Shadow Philosophy:
Shadows are minimal and nuanced, conveying elevation through subtle opacity shifts rather than harsh contrast. The shadow palette uses black with varying alpha values (0.08 to 0.2) to create a sense of depth without visual noise. Shadows scale proportionally with component importance: critical interactive elements and featured sections receive deeper shadows, while secondary elements remain flat or minimally elevated. This restrained approach aligns with modern design trends and maintains the clean, professional aesthetic.
#0000EE) exclusively for interactive elements and CTAs—links, button text, and focus states.#1B3A59) as the foundational brand color for headers, primary text, and container backgrounds.16px with 24px line height; avoid narrow measures (< 50 characters).44px height for touch targets).#000000) as a primary background; use #FFFFFF or #EFEFEF for readability.44px tall and 44px wide on mobile; ignore this at usability's peril.#999999 text on #EFEFEF backgrounds or vice versa; verify contrast ratios.| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px - 767px | Single-column layout, vertical stack, 16px container padding, 32px section margins, 44px minimum touch targets |
| Tablet | 768px - 1023px | Two-column grids, 20px container padding, 40px section margins, optimized text measure (50-75 chars) |
| Desktop | 1024px - 1199px | Three-column grids, max-width 1000px, 24px container padding, 48px section margins |
| Large Desktop | 1200px+ | Four-column grids, max-width 1200px, 40px container padding, 56px section margins, full-width hero sections |
44px × 44px for all interactive elements (buttons, links, form inputs).48px × 48px for high-traffic interactive elements.8px to 12px of whitespace between adjacent touch targets to prevent accidental activation.44px minimum on mobile; 30px acceptable on desktop with adequate surrounding spacing.52px on all breakpoints (as per design token); padding adjusts horizontally as needed.60% viewport height on tablet; stacks below text on mobile.1200px+); three columns on desktop (1024px+); two columns on tablet (768px+); single column on mobile.768px+); hamburger menu toggle on mobile (below 768px).55px on desktop; scales to 40px on tablet; scales to 28px on mobile. Body text remains 16px across all breakpoints (minimum legibility).56px (large desktop) to 40px (tablet) to 20px (mobile) while maintaining visual rhythm.56px to 32px to 24px across breakpoints; vertical spacing is sacrificed before horizontal padding.#0000EE) — Use for link text, button text, focus states, and actionable elements.#1B3A59) — Use for headers, primary text, container backgrounds, and brand anchors.#052B48) — Use for hover states, borders, and secondary emphasis.#0A9E68) — Use rarely for confirmations and positive status messaging.#444444) — Use for all body copy and standard paragraph text.#999999) — Use for placeholders, subtitles, and de-emphasized content.#FFFFFF) — Primary surface for cards, sections, and reading areas.#EFEFEF) — Subtle variation for alternate rows or secondary surfaces.#000000) — Use sparingly for maximum legibility in dense, critical information.#808080) — Use for disabled states and minimal emphasis text.Always use Open Sans for body and UI text unless creating a premium display moment, in which case use Prata sparingly at H2 or H3 level only.
Button styling is fixed: Primary buttons have transparent backgrounds with #0000EE text and #FFFFFF borders on 50px border-radius. Variations exist (Secondary green, Ghost minimal) but primary should not deviate.
Spacing follows the 8px scale (8px, 16px, 24px, 32px, 40px, 52px, 56px). Never add arbitrary spacing outside this system.
Contrast must be >= 4.5:1 for normal text and >= 3:1 for large text. Verify before deployment, especially for gray text on light backgrounds.
Touch targets are non-negotiable at 44px × 44px minimum on mobile. Desktop targets can be smaller but should respect this minimum when possible.
Navigation color is always #FFFFFF on dark backgrounds; use #1B3A59 on light backgrounds. Never reverse or invert without explicit design approval.
Cards receive L1 shadows (0px 2px 8px rgba(0, 0, 0, 0.08)) by default; L2 on hover; hero cards use L3.
Form inputs on dark backgrounds are transparent with #FFFFFF text and border; inputs on light backgrounds use #FFFFFF background with #444444 text and #EFEFEF borders.
Section padding scales with breakpoint: 56px large desktop, 40px tablet, 20px mobile. This pattern is applied consistently across all container types.
Link color is #0000EE for body links and #FFFFFF for navigation links. Visited state is inferred but rarely visible in modern browsers; prioritize focus and hover states.
Type hierarchy is semantic, not arbitrary: H1 (55px) for page titles, H2 (40px) for section breaks, H3 (35px Prata) for branded moments, H4 (16px) for card titles, body (16px) for all reading text.
Responsive typography: Scale headings down on smaller breakpoints (H1 → 28px on mobile) but keep body at 16px minimum. Never reduce below 16px for primary reading content.