Josh Warner

Josh Warner's portfolio combines stark dark surfaces with a clean, highly legible typography scale. The design system emphasizes clarity and directness through minimal use of color, relying instead on high contrast, subtle achromatic gradients, and precise spacing. Interactive elements are softly rounded, creating a tactile impression against the otherwise structured aesthetic. Most visual weight is carried by conceptual 3D renders rather than UI adornment. Prioritize high contrast using Pure Canvas (#f0f0f0) for text on Deep Space (#0f0f0f) or Inky Void (#000000) backgrounds. Use Inter Display for all major text (headings, body), ensuring 0.04em letter-spacing is applied consistently. Apply Deep Space (#0f0f0f) for main backgrounds and Darkened Canvas (#1a1a1a) for secondary backgrounds like footers or distinct sections. Utilize large border-radii (100px, 40px) for buttons and interactive elements to create a soft, pill-like appearance. Maintain compact spacing, with a default elementGap of 10px between interactive components and text blocks. Emphasize content over UI chrome; keep borders minimal and colors purely functional. Use the system sans-serif font at 12px for utility text, navigation, and minimal interactive elements. Avoid using saturated colors for UI elements; color is reserved for content aesthetics, not interface. Do not introduce complex gradients or inner shadows on UI elements; elevation is sparse and subtle. Steer clear of aggressive, heavy typography for headlines; rely on Inter Display's light weight and 0.04em tracking. Do not use small border-radii (e.g., 2px) on buttons or primary interactive elements; aim for 8px, 40px, or 100px. Introduce excessive padding or wide margins that disrupt the compact information density. Do not use dark gray text on a dark background; ensure compliance with the 15:1 contrast ratios provided. Avoid any drop shadows on text, and keep container shadows subtle and very low opacity.