Skip to content

DESIGN.md

Latest commit

 

History

History
74 lines (60 loc) · 3.33 KB

DESIGN.md

File metadata and controls

74 lines (60 loc) · 3.33 KB
name bits&bytes™ Design System
colors
background foreground primary primary-foreground secondary secondary-foreground accent accent-foreground destructive destructive-foreground border border-dark brand-burgundy brand-warm-accent brand-near-black brand-off-white
#faf8f5
#120f0a
#97192c
#faf8f5
#fee9cf
#120f0a
#fc920d
#120f0a
#f04438
#ffffff
rgba(18, 15, 10, 0.15)
rgba(250, 248, 245, 0.15)
#97192c
#fc920d
#120f0a
#faf8f5
typography
display sans serif script
fontFamily fontWeight
Anton, Helvetica Now Display, Helvetica Neue, sans-serif
normal
fontFamily fontWeight
Helvetica Now Text, Helvetica, sans-serif
400
fontFamily
Georgia Pro, Georgia, serif
fontFamily fontWeight
Palm Club, cursive
400
rounded
DEFAULT none
0px
0px
shadows
none
none

Brand & Style

The bits&bytes™ design system embraces a Swiss editorial, museum poster, and architectural blueprint "movement" aesthetic. The interface balances structural engineering restraint with raw student energy, making the platform feel like a blueprint drafting sheet where real products are designed and built.

We reject standard, colorful neobrutalist offsets, cartoonish drop shadows, and futuristic SaaS gradients. Instead, we use thin 1px lines, coordinates, dot grids, and tick marks.

Colors

The palette is limited and highly controlled. It supports light mode and dark mode transitions:

  • Primary Background: Warm off-white (#faf8f5). In dark mode, it flips to near-black (#120f0a).
  • Primary Text & Borders: Near-black (#120f0a). In dark mode, it flips to off-white (#faf8f5).
  • Burgundy Accent: Deep burgundy (#97192c) is used for primary brand elements, badges, and key editorial highlights.
  • Orange Pop: Warm orange (#fc920d) is used strictly as a minor accent for state triggers, indicators, or active badge highlights.

Typography

Typography relies on a highly structured, editorial hierarchy:

  • Display & Headings: Anton (Display) and Helvetica Now Display command attention in clean uppercase blocks.
  • Copy & Explanations: Georgia Pro (Serif) is preferred for descriptive paragraphs and body copy, giving it a premium print publication feel.
  • System Labels: Clean monospace is used for technical labels, indicators, status badges, coordinates, and viewport dimensions.
  • Script Accents: Palm Club (cursive) is used sparingly for handwritten editorial accents.

Shapes & Corners

  • Square Corners Only: The border radius must be strictly rounded-none (0px) across all cards, buttons, input fields, and tags. Soft rounded radiuses are prohibited.

Layout & Grid System

Layouts resemble print layouts or blueprint drawings:

  • Asymmetry: Grid systems are offset (e.g., 60/40 hero grids) with generous whitespace.
  • Dot Grids: .blueprint-dot-grid is used as a light background pattern overlay.
  • Dimension Lines: Clean 1px lines, coordinates (26.8467° N, 80.9462° E), and tick markers (blueprint-tick-x, blueprint-tick-y) outline key boundaries.
  • Asset Treatment: Photographic assets should be grayscale (black-and-white) to preserve print identity, though structural frame hovers (offset translations and shadows) are encouraged to keep layouts responsive.