Val Town

Val Town presents a precise yet playful technical aesthetic, balancing a stark white background and deep charcoals with a lively array of vivid blues and pinks. Clean, structured layouts punctuated by subtle shadows create clear informational hierarchy without feeling heavy. The system leverages a dual-font strategy: a modern sans-serif for broad content and a monospaced font for code, underscoring its developer-centric focus. Use IBM Plex Sans for all user-facing content, reserving iA Writer Mono exclusively for code snippets and technical examples. Apply Charcoal Text (#000000) or Charcoal UI (#314158) for primary text on White Canvas (#ffffff) backgrounds to maintain AAA contrast. Utilize Cerulean Sky (#00bcff) as the default background for primary call-to-action buttons, with White Canvas text. Implement 12px border radius for primary and secondary buttons, and testimonial cards, contrasting with the general 8px radius for most UI elements. Employ the specific alert banner style (Lagoon Mist background #cefafe, Azure Glow border #53eafd) for all informational alerts. Maintain consistent section spacing with 48px vertical gaps between major content blocks. Use subtle shadows rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px for elevated components like code snippet cards, avoiding excessive depth. Do not use iA Writer Mono for general UI text or marketing copy; it is strictly for technical content. Avoid using highly saturated brand/accent colors as text on light backgrounds, except Electric Pink (#ed6aff) for specific highlights like 'We're hiring!'. Do not introduce new border radii beyond 4px, 8px, or 12px. Refrain from using strong, colorful box-shadows; stick to the specified subtle gray shadow for elevation. Do not vary the letter-spacing for iA Writer Mono; it should always be 'normal' to preserve its monospaced appearance. Avoid mixing light text directly on subtle Ghost Gray (#f1f5f9) backgrounds; rely on Charcoal Text or Charcoal UI for sufficient contrast. Do not use gradients; the design relies on solid colors and subtle color shifts for depth.