Ricardo Chance

Overview

Ricardo Chance is a design engineer's portfolio embodying the aesthetic of Generative Minimalism—a movement that pairs algorithmic, procedurally-generated visuals with austere, intentional typography and layout. The brand serves creative technologists and premium clients seeking immersive web experiences built with WebGL, Three.js, and GSAP. The UI evokes a sense of controlled chaos: a deep, near-black canvas (#0d0718) anchors the composition, while animated gradient geometries (purples, grays, and subtle accent hues) emerge from the background as living, breathing elements. The overall emotional response is one of technical sophistication tempered by artistic sensibility—not cold, but precise; not playful, but confident.

The brand voice is direct, craft-focused, and unapologetically technical. Vocabulary leans into specificity: 'WebGL,' 'GLSL shaders,' 'React Three Fiber,' 'generative art'—never vague abstractions. Tone is calm and assured, with occasional dry wit. Example sentence in brand voice: 'I work at the intersection of design and code. 3D scenes, scroll-driven narratives, and motion-rich interfaces built with care for every detail. Not just functional—crafted.'

Colors

The color system is rooted in deep, saturated purples and near-blacks, creating a nocturnal, introspective palette. Primary (#3f2476) is a rich, muted purple used sparingly on interactive states, focus rings, and container backgrounds—it signals interactivity without shouting. Secondary (#ff6568) is a warm, slightly desaturated red-coral reserved for accent highlights, error states, and occasional call-to-action emphasis. Tertiary (#ffd236) is a golden amber used for badges, highlights, and tertiary CTAs. The surface stack descends from #0d0718 (surface) through #050505 (surface-dim), creating a layered depth that mimics the multi-plane composition of the hero canvas. On-surface text is #f5f4f8, a near-white with a hint of cool undertone that reduces eye strain on dark backgrounds. All int

Typography

The type system pairs two distinct typefaces to create visual hierarchy and emotional contrast. Instrument Serif (400 weight, 64px for display, 48px for headlines) anchors the brand with classical, editorial authority—its high contrast and elegant proportions evoke precision and craft. Red Hat Display (300–900 weights, 16–20px for body and UI) provides functional clarity and contemporary warmth, with variable font weights enabling nuanced emphasis without introducing new typefaces. Display text uses -0.02em letter-spacing to tighten the serif's natural width; body text remains at 0em for legibility. Line heights are generous (1.5× for body, 1.125× for headlines) to accommodate the dark background and ensure comfortable reading. On small labels over busy generative backgrounds, apply text-s

Layout

The layout employs a fluid, full-bleed composition anchored by a 1280px container max-width for content sections. The hero spans edge-to-edge, with a fixed Three.js canvas (1280×800px) positioned absolutely behind the text layer, creating the illusion of depth and interactivity. Grid is 12 columns with 32px gutters (gutter spacing), allowing flexible content placement while maintaining rhythm. White-space philosophy is generous: lg spacing (40px) separates major sections, md spacing (24px) groups related content, and sm spacing (12px) provides breathing room within components. The navbar is fixed at 80px height with mix-blend-difference applied to ensure legibility over the animated background. Container padding is 32px on desktop, reducing to 16px on mobile. This spacing scale creates a s

Elevation & Depth

Depth is conveyed through layered glassmorphism and subtle shadow gradients rather than stark contrast. Level 1 (Base): The dynamic generative gradient background with a noise texture overlay (mix-blend-multiply at full opacity) provides the energetic foundation. Level 2 (Standard Cards & UI Elements): backdrop-filter: blur(12px), background: rgba(63, 36, 118, 0.08), border: 1px solid rgba(255, 255, 255, 0.08), box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15). Level 3 (Modals & Elevated Surfaces): backdrop-filter: blur(20px), background: rgba(63, 36, 118, 0.12), border: 1px solid rgba(255, 255, 255,

Shapes

The shape philosophy is Architectural Precision—sharp, intentional, minimal. Border-radius follows a strict scale: sm (0.25rem / 4px) for small UI elements like badges and tight inputs; DEFAULT (0.5rem / 8px) for standard inputs and small cards; md (0.75rem / 12px) for medium containers; lg (1rem / 16px) for primary cards and larger surfaces; xl (1.5rem / 24px) for hero sections and modals; full (9999px) for pill-shaped buttons and circular elements. Buttons use full radius to signal their interactive nature and create visual softness against the sharp typography. Cards use lg or xl depending

Components

Action Elements Buttons are transparent with 1px borders and full border-radius (9999px). Primary buttons use on-surface text (#f5f4f8) with a subtle outline; on hover, the background shifts to primary-container (#5a3d9e) with a primary border. Secondary buttons use secondary color (#ff6568) text and border, shifting to secondary-container on hover. All buttons employ a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition for smooth state changes. Height is fixed at 48px with 12px vertical and 24px horizontal padding, ensuring consistent touch targets.

Containers & Surfaces Cards use a glassmorphic treatment: rgba(63, 36, 118, 0.08) background, 1px border at rgba(255, 255, 255, 0.08), backdrop-filter: blur(12px), and lg border-radius (16px). On hover, the background increases to rgba(63,

Do's and Don'ts

**Do**

• Do use Instrument Serif for headlines and display text to anchor the brand's editorial authority; pair with Red Hat Display for body and UI to maintain functional clarity.
• Do apply glassmorphic treatments (backdrop-filter: blur(12px), rgba backgrounds, 1px borders) to all interactive surfaces to reinforce the layered, generative aesthetic.
• Do maintain the deep purple and near-black surface stack (#0d0718 → #050505) as the foundation; reserve primary (#3f2476) and secondary (#ff6568) for interactive states and accents only.
• Do use full border-radius (9999px) on buttons and pill-shaped elements to signal interactivity; use lg (16px) for cards and md (12px) for smaller containers.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to small labels over busy generative backgrounds to ensure contrast without sacrificing the layered effect.

**Don't**

• Don't use high-contrast, pure-white text on the dark background; stick to #f5f4f8 (near-white with cool undertone) to reduce eye strain and maintain sophistication.
• Don't apply sharp corners (border-radius: 0) to interactive elements; the aesthetic demands intentional rounding to balance precision with approachability.
• Don't overuse secondary (#ff6568) or tertiary (#ffd236) colors; reserve them for accents, badges, and occasional CTAs. The palette is primarily dark and muted.
• Don't flatten the elevation system; every interactive surface must have a distinct background, border, and shadow to maintain visual hierarchy and the glassmorphic effect.
• Don't mix typefaces within a single headline or body paragraph; Instrument Serif is for display/headlines, Red Hat Display is for body/UI. Never reverse this pairing.