LOADING
LOADING
A dark, photographic, single-accent design language that powers sunnyside.tv. Inter as the system typeface, square corners everywhere, one warm orange that carries 100% of the brand recognition.
Square mark over a dark cinematic ground. The mark is the only place a warm light leaks through the chrome - hover the sun icon to see the signature glow effect that mimics light catching a lens.
A single warm accent (#ff6b1a) carries every brand moment: active nav, focus rings, hover underbars, link color, eyebrow labels. Backgrounds are three layered near-blacks sitting on top of a dimmed full-bleed photograph.
One fixed full-bleed photo per page (CMS-configurable), dimmed to 78% opacity with a near-black scrim so chrome stays legible.
Inter is the single system typeface across navigation, display, body, and metadata. The CMS exposes independent display, mono, and body scale controls; the values below are the current base sizes before those multipliers are applied.
Spacing uses a compact production scale, corners remain square except for semantic circles and sliders, and motion favors the shared decelerating ease. Duration changes with purpose: immediate controls stay quick while spatial reveals and hover chrome receive more time.
Each specimen mirrors a current production component or uses the component itself. Hover and keyboard-focus the controls to see the same orange sweeps, border lifts, timeline fills, and restrained opacity changes used across the shipping pages.
Designing intelligent creative systems that bridge visual storytelling, real-time technology, and agentic AI to amplify how ideas are built, experienced, and scaled.
16px base · 2px orange rule · CMS-controlled weight on Resume, Generative AI, and galleriesThe same token and interaction system adapts to four distinct public surfaces. Click any page to inspect the production treatment in context.
Accessibility, responsive layout, layering, media behavior, and CMS controls are part of the design language—not implementation afterthoughts. These specimens document the current production contract.
nav padding: clamp(7px, 1.35vw, 24px)logo: min(var(--logo-max-height), 18vw)SUNNYSIDE: clamp(16px, 2.8vw, 28px)nav label: clamp(10px, 1.05vw, 14px)Highlight any portion of this paragraph and watch the selection paint orange instead of the OS default blue.
::selection is one of the few places the accent paints a large area. Try dragging across the line.