Mendix Developer Portal

Overview

Mendix Developer Portal embodies a **Precision-Technical** aesthetic—a design language that prioritizes clarity, trust, and professional authority through high-contrast, structured visual hierarchy. The brand serves enterprise developers and architects building complex low-code applications, evoking confidence through a deep navy foundation (#0a1324) paired with an electric blue accent (#064ae4) that signals interactivity and forward momentum. The UI avoids softness; instead, it employs sharp edges (0.25rem–1rem radii), deliberate spacing (24px gutters), and a rigorous typographic scale anchored in Patron serif headlines and Noto Sans body text. The emotional response is one of control and precision: users feel they are working with a sophisticated, enterprise-grade platform.

The brand voice is direct, technical, and solution-oriented. Vocabulary patterns favor specificity over abstraction—"Deploy your app" rather than "Empower your journey." Tone is confident without being condescending, authoritative without being cold. Example sentence in brand voice: "Your application is ready to deploy—review the build log and proceed to production."

Colors

The color system is built on a **high-contrast, trust-driven foundation**. Primary (#064ae4) is the signature electric blue used exclusively for CTAs, links, focus states, and brand-critical interactive elements; it appears on buttons, active navigation, and form highlights. On hover, primary darkens to #0123c6 (a 12% shift toward navy), and on active/pressed states, it deepens further to #0006ab. This three-tier progression ensures tactile feedback without relying on shadows alone.

Surface colors establish a clean, minimal canvas: the base surface is pure white (#ffffff), with container variants stepping down through grays (surface-container-low at #f0f0f0, surface-container at #eeeeee, surface-container-high at #e8e8e8) to create subtle depth without visual noise. On-surface text is the

Typography

The type system employs a **serif-and-sans hybrid model** that balances authority with approachability. Patron serif (custom font-family) anchors headlines and display text, conveying enterprise credibility and visual weight; Noto Sans (sans-serif) handles body copy, labels, and UI text, ensuring legibility at small sizes and on-screen clarity. Display (56px, 700 weight, -0.02em letter-spacing) is reserved for hero sections and major page titles; Headline-lg (40px, 700 weight) for section headers; Headline-md (28px, 700 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) form the core reading experience, with generous line-height (1.4–1.5x) to support sustained reading on screen. Label-md (14px, 600 weight, 0.02em letter-sp

Layout

The layout system uses a **12-column fluid grid** with a fixed container max-width of 1280px, ensuring responsive scaling on mobile while maintaining control on desktop. Spacing is semantic and hierarchical: the base unit is 8px, with named scales (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) applied consistently across margins, padding, and gaps. Gutter spacing (24px) separates major sections and creates breathing room; this same 24px is used for card padding and form field spacing, creating visual rhythm. White-space philosophy prioritizes clarity over density: sections are separated by lg spacing (40px), cards within a grid use md spacing (24px), and internal card content uses sm–md spacing (12–24px). The container max-width of 1280px ensures that content remains scannable and not s

Elevation & Depth

Depth is conveyed through **subtle, restrained shadows** rather than dramatic layering. The elevation system uses three tiers: sm (0 1px 3px rgba(10, 19, 36, 0.06)) for base cards and subtle separation; md (0 4px 12px rgba(10, 19, 36, 0.08)) for elevated cards, modals, and hover states; lg (0 16px 40px rgba(10, 19, 36, 0.12)) for the highest-priority overlays and dropdowns. Shadows use the on-surface color (10, 19, 36) at low opacity to maintain color harmony and avoid harsh black shadows. Buttons employ sm shadows by default, escalating to md on hover and lg on active/pressed states, providin

Shapes

The shape philosophy is **Architectural Precision**—a disciplined approach that rejects organic curves in favor of controlled, geometric radii that reinforce the platform's technical authority. Rounded-sm (0.25rem / 4px) is used sparingly for micro-interactions (small badges, tight form elements) and creates a subtle softness without compromising sharpness. Rounded-DEFAULT (0.5rem / 8px) is the workhorse radius for input fields, small buttons, and list items, providing a clean, modern appearance. Rounded-md (0.75rem / 12px) and Rounded-lg (1rem / 16px) are applied to cards, larger buttons, and

Components

Action Elements Buttons are the primary call-to-action mechanism and employ a three-state system. Button-primary uses {colors.primary} (#064ae4) with white text, 44px height, 12px vertical and 24px horizontal padding, and rounded-md (0.75rem). On hover, the background darkens to #0123c6 and box-shadow escalates from sm to md elevation (0 4px 12px rgba(10, 19, 36, 0.08)), signaling interactivity. On active/pressed, the background deepens to #0006ab with lg elevation. Button-secondary uses a transparent background with a 2px solid primary border, maintaining the same padding and height; on hover, the background fills with primary-container (#e8f0ff) while the border remains primary, creating a "fill-on-hover" effect. Button-ghost uses a subtle background (rgba(10, 19, 36, 0.05)) with no

Do's and Don'ts

**Do**

• Do use primary (#064ae4) exclusively for CTAs, links, and focus states—never use it for backgrounds or neutral UI.
• Do maintain 24px gutter spacing between major sections and 12px spacing within card content to preserve visual breathing room.
• Do apply label-md (14px, 600 weight) to all button text and form labels for consistent, scannable hierarchy.
• Do escalate box-shadow on hover and active states (sm → md → lg) to provide tactile feedback without relying on color alone.
• Do use Patron serif for headlines (40px+) and Noto Sans for body and UI text to maintain the serif-and-sans hybrid authority.
• Do test all interactive states (hover, focus, active, disabled) at 16px base font size to ensure accessibility and legibility.

**Don't**

• Don't use primary color for disabled states or neutral backgrounds—reserve it for high-priority interactive elements only.
• Don't apply shadows larger than lg elevation (0 16px 40px) except on modals and critical overlays; excessive shadows create visual fatigue.
• Don't mix rounded radii arbitrarily—use the graduated scale (sm for micro-interactions, md for inputs, lg for cards, xl for containers) to reinforce hierarchy.
• Don't reduce line-height below 1.4x for body text or below 1.2x for headlines; generous line-height is essential for on-screen readability.
• Don't use near-black (#000000) or pure white (#ffffff) for text on colored backgrounds—use on-primary, on-secondary, or on-error tokens instead.
• Don't animate transitions faster than 200ms or slower than 400ms for standard state changes; maintain snappy, predictable feedback.