DESIGN.md

name	Bits&Bytes Design System
colors	background foreground primary primary-foreground secondary secondary-foreground accent accent-foreground destructive destructive-foreground border input muted muted-foreground card card-foreground popover ring brand-purple brand-plum brand-pink brand-coral brand-amber brand-midnight brand-ink #080504 #f7f1ec #97192c #fff9f4 rgba(151, 25, 44, 0.2) #fff4ea #ff7a1b #2a0804 #f04438 #ffffff rgba(247, 241, 236, 0.12) rgba(247, 241, 236, 0.1) rgba(247, 241, 236, 0.08) rgba(247, 241, 236, 0.72) rgba(20, 15, 10, 0.86) #f8f2ed rgba(22, 16, 11, 0.96) rgba(255, 122, 27, 0.4) #5e0f1a #791423 #97192c #ff7a1b #ffae24 #1e0509 #120f0a
typography	display sans serif script fontFamily fontWeight Helvetica Now Display, Helvetica Neue, sans-serif 700 fontFamily fontWeight Helvetica Now Text, Helvetica, sans-serif 400 fontFamily Georgia Pro, Georgia, serif fontFamily fontWeight Palm Club, cursive 400
rounded	sm md DEFAULT lg xl 12px 16px 18px 18px 24px
shadows	glow-strong glow-soft shadow-card 0 20px 70px rgba(255, 122, 27, 0.24) 0 10px 32px rgba(151, 25, 44, 0.22) 0 20px 60px rgba(7, 3, 2, 0.55)

Brand & Style

The Bits&Bytes design system embraces a bold, production-friendly dark mode aesthetic designed for highly agency, ambitious student builders. The interface balances high-impact energy with mature restraint, making the platform feel like a professional environment where real products are shipped—not a beginner-centric playground.

With deep, rich tones and vibrant gradient pops, the UI projects confidence. Textured overlays (halftones, stipples) give character without detracting from legibility.

Colors

Our primary theme revolves around an ink-black to midnight-burgundy base with glowing coral and amber accents.

• Burgundy Core: Deep, refined magentas and pinks (Brand Pink #97192C to Purple #5E0F1A) ground the brand.
• Warm Accents: Energetic oranges and corals (Brand Coral #FF7A1B) drive action and create dynamic "pops" of color across interactions and borders.
• Neutrals & Surfaces: Almost universally dark, our surface layers rely on transparency (rgba) to blend smoothly with underneath textures. Text balances stark contrast by using slightly warm, off-white shades (#F7F1EC) for a sophisticated look that prevents eye strain.

Typography

Typography relies on a highly structured, editorial yet modern hierarchy combining Swiss pragmatism with stylized accents.

• Primary Headings: Helvetica Now Display commands attention through heavy weights.
• Copy & Long-form: Helvetica Now Text or Georgia Pro for highly readable, dense information.
• Accents: Palm Club (Script) and Anton (Display) provide rare, decorative moments for hero headers or marketing elements.

Layout & Spacing

A centralized app-shell layout dictates a maximum width of 72rem/6xl with sensible padding and consistent spacing, ensuring that everything stays digestible on wide screens while responding flawlessly to smaller viewports.

• Negative Space: We prefer dramatic breathing room between major sections to let the deep background colors and glowing effects resonate.

Elevation & Depth

We avoid sharp, opaque borders. Instead, elevation uses a combination of deep, colored shadows and layered translucent surfaces to evoke depth without weight.

• Cards: Semi-transparent backdrops (var(--card)) sit above a dark background to catch any moving gradients or star motifs underneath.
• Glows: Two key glow levels—soft burgundy glow and a stronger, wider coral glow—help draw focus to active elements and primary call-to-actions.

Shapes

Shapes reflect an approachable but structured geometry.

• We use soft corner radiuses (default 18px) that are substantial without being pill-shaped. This geometric softening contrasts with the intense colors and adds tactile, "app-like" affordances to buttons and cards.