Frédérik Paillé

Overview

Frédérik Paillé is a full-stack developer and digital strategist portfolio built on a **Grid-Driven Minimalism** aesthetic — a design philosophy that prioritizes clarity through geometric structure, high contrast, and intentional negative space. The brand serves developers, entrepreneurs, and businesses seeking custom web applications, automation systems, and digital strategy consulting. The UI evokes precision, technical competence, and creative ambition through an austere dark canvas (#090909) punctuated by a vivid burnt-orange accent (#ff5811) that commands attention on CTAs and key interactions. The emotional response is one of focused intensity: the grid background suggests infrastructure and order, while the orange accent injects energy and urgency.

The voice is direct, strategic, and unapologetically technical yet human. Frédérik speaks in concrete outcomes: "I craft digital journeys that speak, sell, and scale — enhanced by AI, fueled by intent." The vocabulary avoids buzzwords; instead, it privileges specificity ("custom web applications," "workflow automation," "API integration") and impact-driven language. The brand personality is hybrid: equal parts engineer and strategist, comfortable discussing both code architecture and business metrics. Example sentence in brand voice: "Tomorrow's cold front arrives at 6:14 — pack a layer" becomes "Your automation system cuts manual tasks by 60% — ship faster."

Colors

The color system is built on **high-contrast monochromacy with a single, dominant accent**. The primary surface stack descends from near-black (#090909 surface) through deep charcoal (#17181a surface-container) to create visual hierarchy without relying on color variation. This austere foundation ensures text legibility (on-surface: #fafafa at 16.5:1 contrast ratio) and focuses user attention on interactive elements.

Primary (#ff5811, a burnt-orange) is the brand's signature accent — used exclusively on call-to-action buttons, active states, focus rings, and key brand moments. It appears sparingly but decisively, creating visual weight and urgency. On hover, primary shifts to primary-container (#ff7a3d, a lighter orange) with a 200ms ease-out transition, signaling interactivity without ja

Typography

The type system uses **Arimo** (a geometric sans-serif optimized for screen rendering) across all scales, creating visual cohesion and reinforcing the technical, no-nonsense brand personality. Display (72px, 900 weight, -0.04em tracking) is reserved for hero headlines and major section breaks; its extreme weight and negative letter-spacing create a bold, almost architectural presence. Headline-lg (48px, 700 weight) anchors page sections, while headline-md (32px, 700 weight) structures subsections. Title-lg (24px, 600 weight) labels cards and component headers.

Body text uses body-lg (18px, 400 weight, 28px line-height) for introductory paragraphs and body-md (16px, 400 weight, 24px line-height) for standard copy. The 1.5x line-height ratio (28px ÷ 18px) ensures readability on dark backgro

Layout

The layout system employs a **12-column fluid grid** with a fixed max-width of 1400px, centered via margin-auto. The container uses 24px horizontal padding (gutter token) on mobile and tablet, scaling to 40px (lg spacing) on desktop. This rhythm creates breathing room while maintaining focus on content.

White-space is semantic: lg spacing (40px) separates major sections (hero, about, work, contact), md spacing (24px) divides subsections and card groups, and sm spacing (12px) provides internal padding within components. The grid background (visible in the hero) uses 1px lines at 40px intervals, reinforcing the geometric aesthetic and guiding the eye. Sections stack vertically with consistent 40px gaps, creating a predictable, scannable rhythm. The container max-width of 1400px prevents lin

Elevation & Depth

Depth in this system is achieved through **subtle shadow layering and border definition**, not through dramatic blur or glassmorphism. The elevation scale uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.12)) for minor UI elements like badges and small cards; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals; and lg (0 8px 24px rgba(0, 0, 0, 0.2)) for floating elements like dropdowns and overlays. All shadows use a 0px x-offset and y-offset proportional to the element's visual weight, creating a subtle lift without directional bias.

Cards and containers use a 1px solid border at

Shapes

The shape philosophy is **Geometric Precision** — a balance between sharp corners and subtle rounding that reflects the brand's technical foundation while remaining approachable. Buttons and primary CTAs use rounded.md (0.75rem / 12px), creating a soft-edged rectangle that feels modern without sacrificing clarity. Cards and containers use rounded.lg (1rem / 16px), providing slightly more softness for larger surfaces. Input fields use rounded.DEFAULT (0.5rem / 8px), maintaining visual hierarchy by being less rounded than buttons. Badges and pills use rounded.full (9999px), creating perfect circ

Components

Action Elements Buttons are the primary interaction mechanism. **Button-primary** uses a solid background of primary (#ff5811), white text, 12px horizontal padding, and 48px height, creating a large, tappable target (WCAG AAA compliant). The label uses label-md typography (14px, 600 weight) for emphasis. On hover, the background shifts to primary-container (#ff7a3d) with a 200ms cubic-bezier(0.2, 0, 0, 1) transition, providing visual feedback without animation jank. On active (mousedown), apply transform: scale(0.98) to create a tactile press effect. **Button-secondary** uses a transparent background with a 1px outline at outline (#666666), allowing secondary actions to coexist without visual competition. On hover, the background becomes surface-container-high (#242426) and the border

Do's and Don'ts

**Do**

• Do use primary (#ff5811) exclusively for CTAs, active states, and focus indicators — it's the brand's signature accent and should never be diluted.
• Do maintain the 1.5x line-height ratio (28px line-height for 18px body text) on dark backgrounds to ensure readability and reduce eye strain.
• Do apply the md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all interactive cards and containers to create visual hierarchy without blur.
• Do use Arimo at 600+ weight for all interactive text (buttons, links, labels) to signal affordance and guide user attention.
• Do respect the 40px lg spacing for section separation and 24px md spacing for component padding — this rhythm is the backbone of the layout.

**Don't**

• Don't use primary (#ff5811) for body text, backgrounds, or non-interactive elements — reserve it for moments that demand user action.
• Don't apply rounded corners larger than rounded.lg (16px) on cards or containers; excessive rounding undermines the geometric, technical aesthetic.
• Don't use blur effects, transparency overlays, or glassmorphism — the system relies on solid colors, borders, and shadows for clarity.
• Don't mix typefaces; Arimo is the sole font family across all scales. Avoid system-ui, sans-serif, or serif fallbacks in component definitions.
• Don't reduce line-height below 1.4x on dark backgrounds or increase letter-spacing beyond 0.03em on body text — this degrades readability and contradicts the minimalist philosophy.