Montfort Group

Overview

Montfort Group's design system embodies **Institutional Modernism**—a refined aesthetic that prioritizes clarity, precision, and trustworthiness without sacrificing contemporary sophistication. The brand serves global commodity traders and institutional investors who demand both visual authority and functional transparency. The UI employs a restrained palette anchored by a distinctive deep ocean blue (#2d628c) that signals financial stability and global reach, paired with warm grays (#a9bfd2, #81a0bb) that soften the corporate edge. The emotional response is one of composed confidence: users feel they are engaging with a serious, well-established institution that respects their intelligence and time.

The brand voice is precise, measured, and direct—never breathless or hyperbolic. Montfort communicates in declarative sentences with concrete details: "We trade physical commodities across 15 global offices" rather than "We're a dynamic global leader." Typography balances Josefin Sans (geometric, modern, used for headlines and display) with Century Gothic (clean, professional, used for body text and UI labels), creating a visual hierarchy that guides users through complex information without overwhelming them. Example sentence in brand voice: "Our compliance framework ensures every transaction meets the highest regulatory standards across all jurisdictions."

Colors

The color system is organized around a **corporate-technical hierarchy** that reflects Montfort's position as a trusted, data-driven institution. Primary (#2d628c) is the signature ocean blue used exclusively for interactive elements (buttons, active navigation, focus states, and brand-critical CTAs). It appears sparingly but decisively—never as a background, always as a call to action. Secondary (#008ae0) is a brighter, more energetic blue reserved for alerts, highlights, and secondary CTAs that require distinction from primary actions. Tertiary (#a9bfd2) is a soft gray-blue that serves as a supporting accent for disabled states, subtle backgrounds, and tertiary UI elements.

The surface stack creates visual depth through careful tonal progression: surface (#ffffff) is the primary canvas;

Typography

The type system employs a **geometric-to-humanist pairing** that balances modernity with approachability. Josefin Sans (weights 600–700, sizes 28px–56px) is reserved for display and headline contexts where brand personality and visual impact matter most; its geometric letterforms convey precision and forward-thinking. Century Gothic (weights 400–700, sizes 12px–20px) handles all body text, labels, and UI copy, providing a more neutral, universally legible foundation. Display (56px, 700 weight, -0.02em letter-spacing) is used only for hero statements and major section breaks; headline-lg (40px, 600 weight) for primary section titles; headline-md (28px, 600 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent descriptions; bo

Layout

The layout system is built on a **24-column fluid grid** with a fixed max-width of 1440px, ensuring content remains readable on ultra-wide displays while maintaining proportional spacing on mobile. The grid uses 20px column gaps on desktop, 10px on tablet, and stacks to single-column on mobile (390px breakpoint). Container padding follows a semantic scale: 32px gutter on mobile, 24px on tablet, 40px on desktop. White-space is used strategically to create visual breathing room—section separators use lg spacing (40px) for major content breaks, md spacing (24px) for subsections, and sm spacing (12px) for component-level separation. Cards and content blocks are never edge-to-edge; they always maintain at least md spacing from container edges. The rhythm is deliberate and measured: users should

Elevation & Depth

Depth is conveyed through a **restrained shadow system** that emphasizes clarity over drama. The elevation scale has three levels: Level 1 (Base/Surface) has no shadow—elements sit flush on the white background; Level 2 (Standard Cards/Modals) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift that indicates interactivity; Level 3 (Elevated/Hover States) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), reserved for hover states, expanded modals, and floating action elements. Shadows are always soft and diffuse—never sharp or high-contrast. Focus states do not rely on shadow

Shapes

The shape philosophy is **Architectural Precision**—rounded corners are used sparingly and purposefully to soften hard edges without sacrificing the institutional aesthetic. Buttons use rounded.md (0.75rem / 12px) to create a modern, approachable feel while maintaining clear clickability; inputs and form fields use rounded.DEFAULT (0.5rem / 8px) for a more utilitarian appearance that signals data entry. Cards and modals use rounded.lg (1rem / 16px) to create a sense of containment and importance. Badges and pills use rounded.full (9999px) to indicate status or metadata. The reasoning is hierar

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. Primary buttons use backgroundColor: {colors.primary} (#2d628c), textColor: {colors.on-primary} (white), and padding: 12px 24px with height: 48px for touch-friendly targets. On hover, transition to backgroundColor: {colors.primary-fixed-dim} (#6b94b8) over 0.2s. Secondary buttons use a transparent background with a 1px border in {colors.outline} (#81a0bb) and textColor: {colors.primary}; on hover, fill the background with {colors.surface-container-high} (#d1dde8). All buttons must include transition: all 0.2s cubic-bezier(0.4, 0, 0.1, 1) for smooth state changes. Focus states apply a 3px outline in primary with rgba(45, 98, 140, 0.1) background.

Containers & Surfaces Cards are the p

Do's and Don'ts

**Do**

• Do use primary (#2d628c) exclusively for interactive elements and CTAs—never as a background or decorative color.
• Do maintain at least 44px height for all clickable targets to ensure touch accessibility on mobile devices.
• Do apply consistent shadow elevation (0 3px 8px for standard, 0 8px 24px for elevated) to create clear visual hierarchy.
• Do use Josefin Sans for headlines and display only; reserve Century Gothic for body text and UI labels to maintain visual clarity.
• Do include a 3px outline focus state in primary with 0.1 opacity background for all interactive elements to meet WCAG AA standards.
• Do use the 24-column grid with 40px max-width container padding on desktop to ensure content remains readable and proportional.

**Don't**

• Don't use primary (#2d628c) for body text, backgrounds, or non-interactive elements—it must remain reserved for actions and focus.
• Don't stack multiple box-shadows on a single element; each element occupies one elevation level only.
• Don't reduce or remove border-radius on hover or active states; maintain consistent shape language across all interaction states.
• Don't use color alone to convey state changes; always pair color transitions with shadow or outline changes for accessibility.
• Don't apply letter-spacing greater than 0.03em on body text; reserve high letter-spacing for labels and all-caps UI copy only.
• Don't exceed 1440px container max-width on any screen size; content must remain centered and proportional on ultra-wide displays.