Gabriel Beaugonin

Overview

Gabriel Beaugonin's portfolio embodies 'Architectural Minimalism'—a design philosophy that strips away ornament to reveal essential structure and meaning. The aesthetic is rooted in Swiss typography and grid-based composition, where whitespace is not empty but purposeful, and every element earns its place. The brand serves award-winning UX designers and creative professionals who value clarity, precision, and restraint. The interface evokes calm professionalism: a light, neutral canvas (rgb(246, 246, 246)) with deep charcoal text (rgb(26, 26, 26)) and subtle gray accents (rgb(108, 117, 125)) that guide without shouting. The emotional response is one of confidence and sophistication—the user feels they are in the hands of someone who understands the power of saying less.

The voice is direct, measured, and unapologetically refined. Vocabulary favors precision over flourish: 'selected work,' 'award-winning,' 'based in Paris.' Sentences are short and declarative. The brand personality rejects trends; it is timeless, European, and grounded in craft. Example sentence in brand voice: 'Selected work spanning product design, research, and strategy.'

Colors

The color system is built on a neutral foundation with strategic restraint. Primary (#1a1a1a, rgb(26, 26, 26)) is the deep charcoal used for all body text, headings, and interactive focus states—it is the voice of the brand, commanding attention through weight rather than hue. On-primary (#ffffff) provides maximum contrast for accessibility and clarity. The surface stack ranges from near-white (#fafafa for surface-container-lowest) to light gray (#f0f0f0 for surface-container), creating subtle visual hierarchy without jarring contrast. Secondary (#6c757d, rgb(108, 117, 125)) is a warm gray reserved for supporting text, disabled states, and secondary labels—it recedes gracefully. Tertiary (#eaeaea) is a very light gray used for tertiary surfaces and dividers, maintaining the monochromatic a

Typography

The type system is anchored in Suisse Intl, a Swiss sans-serif that embodies geometric precision and humanist warmth. All weights are set to 400 (regular) or lighter, rejecting bold declarations in favor of size and spacing for hierarchy. Display (56px, lineHeight 64px, letterSpacing -0.02em) is reserved for hero statements and major section breaks; headline-lg (40px, lineHeight 48px) for primary headings; headline-md (28px, lineHeight 36px) for secondary headings; body-lg (18px, lineHeight 28px) for introductory paragraphs; body-md (16px, lineHeight 24px) for standard body copy; label-md (14px, lineHeight 20px) for UI labels and metadata. The progression is fluid and proportional, with line-height set generously (1.5–1.75x font size) to ensure readability on light backgrounds. Letter-spac

Layout

The layout follows a 12-column grid with a fixed container max-width of 1025px, centered on the viewport. The page rhythm is generous and breathing: sections are separated by lg spacing (40px) or xl spacing (64px), creating clear visual pauses. The gutter (24px) is applied consistently between grid columns and as padding on the sides of the container. Whitespace is the primary design tool—the background (rgb(246, 246, 246)) is never fully occupied, allowing the eye to rest. Cards and content blocks use md spacing (24px) for internal padding, creating a 1:1 ratio of content to breathing room. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is used semantically: xs for micro-interactions (icon spacing), sm for component internals, md for card padding and section margins,

Elevation & Depth

Depth in this system is achieved through subtle shadow and spatial layering, never through color darkening. Level 1 (Base/Surface) has no shadow—it is the canvas itself (rgb(246, 246, 246)). Level 2 (Standard Card/Component) uses box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), creating a soft, diffuse shadow that lifts the element 4px from the base. Level 3 (Elevated/Modal/Hover) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger blur radius (24px) and offset (8px) that suggests greater distance. Focus states on interactive elements add a secondary shadow: 0 0 0 2px rgba(26, 26, 26, 0.2), a

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used sparingly and purposefully, never decoratively. Buttons and primary interactive elements use rounded.xl (1.5rem / 24px border-radius), creating a soft, approachable form that softens the geometric precision of the grid. Cards and secondary containers use rounded.lg (1rem / 16px), a moderate curve that suggests containment without playfulness. Input fields and tertiary elements use rounded.DEFAULT (0.5rem / 8px), a subtle curve that maintains the technical, grid-based aesthetic. Dividers and minimal elements use rounded.sm (0.25r

Components

Action Elements Buttons are the primary call-to-action mechanism. button-primary uses backgroundColor: {colors.primary} (#1a1a1a), textColor: {colors.on-primary} (#ffffff), padding: 18px 32px, height: 48px, rounded: {rounded.xl} (24px), and typography: {typography.label-md} (14px, 400 weight). On hover, transition to button-primary-hover with backgroundColor: {colors.primary-container} (#e9ecef) and textColor: {colors.on-primary-container} (#3f3f3f), using a 200ms ease transition. button-secondary is transparent with a 1px solid border in {colors.outline} (#d0d0d0), same padding and height, and on hover shifts to backgroundColor: {colors.surface-container-high} (#e9ecef). Links use textColor: {colors.primary} with a 1px bottom border in {colors.outline}; on hover, the border shifts to

Do's and Don'ts

**Do**

• Do use the full range of the gray scale (--gray1 through --gray12) to create subtle visual hierarchy; avoid pure black (#000000) or pure white (#ffffff) as they break the refined aesthetic.
• Do apply generous whitespace (lg or xl spacing) between major sections to create visual breathing room and guide the user's eye through the content.
• Do use Suisse Intl at 400 weight exclusively; reject bold or heavy weights in favor of size and spacing for emphasis.
• Do apply box-shadow transitions (200ms ease) on hover to create smooth, predictable depth changes without jarring jumps.
• Do maintain a minimum 48px touch target for all interactive elements to ensure accessibility on mobile and desktop.
• Do use the primary color (#1a1a1a) sparingly and strategically—reserve it for CTAs, focus states, and primary text to maintain its authority.

**Don't**

• Don't introduce saturated or bright colors; the palette is intentionally muted and desaturated to preserve the refined, European aesthetic.
• Don't use rounded corners on structural elements (grids, dividers, containers) unless they are interactive; maintain sharp edges for precision.
• Don't apply multiple shadows or complex layering; the elevation system uses a single, clear shadow per level to maintain clarity.
• Don't mix font families or weights; Suisse Intl at 400 is the only typeface; use size and spacing for hierarchy, never weight.
• Don't compress whitespace to fit more content; the layout is intentionally spacious and breathing; if content doesn't fit, reconsider the content.
• Don't use color alone to convey meaning (e.g., red for error without text); always pair color with text or iconography for accessibility.