Preview image. Unlock full-res
Warm canvas, playful 3D
This system expresses a playful, modern web developer's environment, characterized by soft, warm neutrals as a canvas for bold, single-hue accents. Typographical hierarchy is established through variable font weights and generous line heights, rather than drastic size shifts. Immersive 3D iconography sets a distinct tone, further solidified by a strong orange action color that adds an energetic, 'get-it-done' feel. Components prioritize rounded forms and minimal, subtle outlining, echoing the friendly nature of the primary visuals.
Prioritize Canvas Beige (#f5efe6) for page backgrounds to maintain the warm, inviting base.
Use Vibrant Orange (#ff8400) exclusively for primary call-to-action button backgrounds to preserve its impact.
Apply border-radius: 100px to all buttons for a consistent pill-shaped aesthetic.
Employ the Urbanist font family for all primary UI text, adjusting weights to establish hierarchy rather than relying solely on size.
Maintain an elementGap of 18px between elements within components for comfortable density.
When introducing new 3D elements, integrate Electric Blue (#34bfff) or the Hologram Gradient to tie into the existing technical visual language.
Ensure headings use a slightly condensed letterSpacing (e.g., 0.37px at 88px) to feel composed.
Avoid using saturated background colors other than Canvas Beige (#f5efe6), Mid-Tone Beige (#e9ded0), or Light Linen (#dfd2bf) for large surface areas.
Do not introduce new border radii beyond 100px, 16px, 24px, or 12px to maintain geometric consistency.
Refrain from using Vibrant Orange (#ff8400) for decorative purposes or secondary text; it must signal primary interaction.
Do not use highly contrasting or dark backgrounds unless it's for a specific immersive 3D experience with its own contained color scheme.
Avoid generic icon styles; instead, prefer the 3D illustrative style seen on the site to reinforce brand identity.
Do not use generic system fonts; always utilize Urbanist or ProFontWindows to maintain typographical distinctiveness.
Do not make buttons purely square or with sharp corners; always apply significant border-radius.
