Charly van Rest

Overview

Charly van Rest is a portfolio platform for an audio and visual artist, embodying a **Gradient-Driven Maximalism** aesthetic that celebrates the intersection of sound and sight. The design philosophy centers on vibrant, flowing color transitions—cyan (#00bcd4) to magenta (#d946ef) to violet—that evoke the synesthetic experience of translating audio frequencies into visual form. The brand personality is bold, experimental, and unapologetically creative: it speaks to artists, producers, and collaborators who understand that sound design and visual art are not separate disciplines but complementary expressions of the same creative impulse. The UI prioritizes visual storytelling through color and motion, with typography that commands attention and interactive elements that respond with fluidity. Voice example: "Every sound has a color. Every color has a frequency. Let's explore both."

Colors

The color system is built on a vibrant primary blue (#116dff) paired with a secondary magenta (#d946ef) and tertiary cyan (#00bcd4), creating a tri-chromatic accent palette that mirrors the RGB color space and reinforces the audio-visual fusion. The primary blue (#116dff) is reserved for CTAs, links, and interactive focus states—it appears on the 'Contact' button and key navigation elements. The secondary magenta (#d946ef) is used for highlights, badges, and secondary CTAs, adding energy and visual rhythm. Tertiary cyan (#00bcd4) supports accent states and hover effects. The surface stack uses a clean white (#ffffff) as the base (surface), with progressive darkening through surface-container (#e9ecef, rgb(233, 236, 239)) for cards and panels, down to surface-container-highest (#d0d0d0) for

Typography

The type system pairs Poppins (display, headlines, labels) with Arial/Helvetica (body text), creating a contrast between expressive and utilitarian. Poppins at 700 weight (72px, -0.04em letter-spacing) commands the hero space with the 'CHARLY' and 'VAN REST' wordmark treatment. Headline-lg (48px, 700 weight) is used for section titles and major content blocks, while headline-md (36px, 600 weight) breaks up page sections. Body text uses Arial at 16–18px with 400 weight and 0.01em letter-spacing for legibility on gradient backgrounds. Labels use Poppins at 12–14px with 500–600 weight and 0.05–0.08em letter-spacing to add visual crispness to buttons and badges. On busy gradient backgrounds or over imagery, apply text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) to maintain contrast; on white surfaces

Layout

The layout follows a 12-column grid with a max-width of 1280px, maintaining a fluid center-aligned container on desktop and stacking to full-width on mobile. The hero section spans the full viewport height with a gradient background (cyan to magenta to pink) and centered text overlay, using lg spacing (40px) for section separation and md spacing (24px) for internal padding within cards and components. White-space is generous—the gutter between grid columns is 24px, and section margins use the lg token (40px) to create breathing room between content blocks. The gradient background is the primary visual anchor, so content containers use minimal shadows and rely on color contrast to establish hierarchy. Container padding is consistently md (24px) on desktop, reducing to sm (12px) on mobile to

Elevation & Depth

Depth is achieved through a subtle shadow and color-shift system rather than heavy drop shadows. Level 1 (Base): the gradient hero background with no shadow, establishing the visual foundation. Level 2 (Cards & Panels): 0 4px 12px rgba(0, 0, 0, 0.08) with a 1px border in surface-variant (#e9ecef), creating a soft lift. Level 3 (Modals & Overlays): 0 8px 24px rgba(0, 0, 0, 0.12) with a 2px border in primary (#116dff) on interactive overlays. Buttons use a colored shadow: 0 4px 12px rgba(17, 109, 255, 0.3) for primary buttons, reinforcing the primary color and creating a glow effect. On hover, b

Shapes

The shape language follows **Soft-Technical Modernism**, balancing geometric precision with approachable curves. Buttons and inputs use rounded.lg (1rem / 16px) for a friendly, modern feel that avoids sharp corners while maintaining clarity. Cards use rounded.xl (1.5rem / 24px) for a more generous curve that softens the container and invites interaction. Small UI elements like badges use rounded.full (9999px) for pill-shaped containers that feel contemporary and playful. The hero imagery (the 3D hair/audio visualization) uses organic, flowing curves that contrast with the geometric grid layout

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use {colors.primary} (#116dff) with white text, 48px height, 12px vertical and 24px horizontal padding, and rounded.lg (16px). On hover, the background darkens to #0d47a1 and the button lifts 2px with an increased shadow (0 8px 24px rgba(17, 109, 255, 0.4)), transitioning over 200ms. Secondary buttons use a transparent background with a 2px primary-colored border and the same text color, inverting on hover to fill with primary-container (#e3f2fd). Ghost buttons use a 8% opacity primary background (rgba(17, 109, 255, 0.08)) with no border, increasing to 16% opacity on hover. All button transitions use cubic-bezier(0.37, 0, 0.63, 1) for a snappy, responsive feel.

Containers & Surfaces Cards are the primary

Do's and Don'ts

**Do**

• Do use the primary blue (#116dff) exclusively for CTAs and interactive focus states—it's the signature accent and must remain distinct.
• Do apply the gradient background (cyan → magenta → pink) to hero sections and full-width containers to establish visual energy and brand recognition.
• Do use Poppins for headlines and labels to create visual hierarchy and draw attention to key content.
• Do maintain generous white-space (lg spacing, 40px) between major sections to prevent visual fatigue on gradient backgrounds.
• Do apply the colored shadow (0 4px 12px rgba(17, 109, 255, 0.3)) to primary buttons to reinforce the primary color and create a subtle glow.
• Do use rounded.lg (16px) for buttons and rounded.xl (24px) for cards to maintain a modern, approachable aesthetic.

**Don't**

• Don't use the secondary magenta (#d946ef) or tertiary cyan (#00bcd4) for primary CTAs—reserve them for badges, secondary actions, and accent highlights.
• Don't apply heavy drop shadows (> 0 8px 24px) to cards or containers; the gradient background provides sufficient visual energy.
• Don't use Arial for headlines or display text—Poppins is the expressive typeface and must be reserved for hierarchy-building.
• Don't reduce rounded-radius below rounded.DEFAULT (8px) for interactive elements; sharp corners conflict with the soft-technical aesthetic.
• Don't apply text-shadow to body text on white surfaces; it reduces legibility and adds unnecessary visual noise.
• Don't use more than three accent colors (primary blue, secondary magenta, tertiary cyan) in a single component—color restraint maintains focus.