Circuit UX Design System

Circuit UX is the visual and interaction language behind Circuit’s digital products. This repository houses the brand’s core assets—color palettes, typography scales, iconography, illustrations, and layout studies—so designers and engineers can deliver consistent experiences across every medium.

Repository Layout

Directory	Purpose
Circuit-Design-Colors/	Core, extended, neutral, and gradient palettes defining the brand’s color language.
Circuit-Design-Typography/	Type hierarchy, recommended pairings, and spacing grids captured in annotated frames.
Circuit-Design-Logos/	App marks, wordmarks, and light/dark variants sized for product, marketing, and signage.
Circuit-Design-Iconography/	Icon set exports with consistent stroke weights and corner radii.
Circuit-Design-Lines/ & Circuit-Design-Masks/	Ambient lines, masks, and shapes for hero imagery, motion, and compositing.
Circuit-Design-Cars/	Photography and stylized renders highlighting Circuit vehicles.
Circuit-Design-Collateral/	Print, presentation, and social templates aligned to the Circuit grid.
Circuit-Design-Web/	Example web compositions showcasing card elevation, tables, and responsive layouts.
Circuit Branding 2025 Google Meet Headers/	Ready-to-use virtual background headers.
GPS.png	High-resolution map motif used in location storytelling.

All files ship as PNG (and, when appropriate, SVG) so you can drop them into design tools or export production-ready assets quickly.

Design Foundations

Color System

• Start with Circuit-Design-Colors/Core Palette.png to anchor brand storytelling. Pine (#092E2E), Teal (#008F7C), and Mint (#B8FFDB) combine to form the signature gradient.
• Use the extended palette frames (Extended Palette - Contrast Pairings.png) when you need AA/AAA-compliant combinations for data visualization or tabular UI.
• Neutral tones (Neutral Palette.png) provide grayscale steps calibrated for dark-on-light interfaces and body copy.

Example – Gradient hero panel

.circuit-hero {
  background: linear-gradient(128deg, #092E2E 0%, #008F7C 55%, #B8FFDB 100%);
  color: #FFFDF2;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 28px 48px rgba(9, 46, 46, 0.28);
}

Typography

Open the frames in Circuit-Design-Typography/ to see:

• Primary/secondary font families with usage notes,
• Heading-to-body ratios,
• Baseline grid spacing for mobile, tablet, and desktop.

Use these references to build tokenized text styles in your product (e.g., display-xl, body-sm). Apply the same ratios in marketing decks for cross-channel consistency.

Iconography & Logos

• Product icons live in Circuit-Design-Iconography/. Each export is optimized for a 48 px canvas—scale in multiples of 8 px to maintain crisp edges.
• Circuit-Design-Logos/ includes:
  • Circuit App Logo.png – primary app mark,
  • Circuit Logo Swatches.png – safe-on-dark and safe-on-light combinations,
  • Frame-*.png – lockups for hero panels, monochrome treatments, and social tiles.

Prefer SVG logos for web/mobile to preserve sharpness on high-DPI displays. Use PNG variants for presentation decks or fast mockups.

Illustrations, Lines & Masks

• Circuit-Design-Lines/ contains ambient strokes and waveforms. Overlay them at 8–18% opacity to add depth without overpowering content.
• Circuit-Design-Masks/ provides geometric frames (rounded diamonds, polygons, squares) to crop photography in a distinctive Circuit style.
• Pair vehicle renders from Circuit-Design-Cars/ with masks and linework to produce storytelling visuals for onboarding, marketing, or product education.

Web & Collateral Studies

Circuit-Design-Web/ showcases live layouts—card stacks, tables, filtering controls—demonstrating spacing (24 px outer gutters, 16 px internal padding) and elevation. Circuit-Design-Collateral/ offers pre-built templates for print and presentations so campaign materials align with product UI.

Applying The System

Product & Web

1. Translate the palette into design tokens or CSS variables. Example:

   export const palette = {
     pine: '#092E2E',
     teal: '#008F7C',
     mint: '#B8FFDB',
     sand: '#FFFDF2',
     slate: '#496461'
   };

2. Build components with 16 px corner radii, soft elevation (0 18px 32px rgba(9, 46, 46, 0.08)), and typography pulled from the type scale.

3. Adopt icon padding rules—at least 4 px of negative space inside touch targets—to preserve clarity.

4. For tables and charts, draw hues from the extended palette pairings to retain accessibility.

Mobile & Embedded

• Map the typography frames to native text styles (UIFontMetrics, TextTheme, etc.).
• Use gradient backgrounds sparingly for navigation bars or hero cards, and ensure contrast against text meets WCAG requirements (the contrast pairing frames call out compliant combinations).
• Export icons as SVG or PDF for vector scalability, backing them with single-color fills drawn from the neutral palette when necessary.

Motion & Video

• Combine linework, masks, and car renders to create parallax hero animations.
• The Google Meet headers are pre-sized PNGs—upload them directly for branded virtual backgrounds.
• When animating gradients, keep transitions under 6 seconds and avoid hard pivots away from the Pine/Teal/Mint core to maintain brand recognition.

Working With Assets

1. Download or sync the repository to your design tool (Figma libraries, Sketch libraries, Adobe CC libraries).
2. Organize palettes, typography, and icons into shared styles/components so teams can reuse elements rapidly.
3. Export deliverables:
   • PNG/WebP for imagery and gradients,
   • SVG for logos and icons,
   • Provide 1×/2×/3× slices when handing off to engineering.
4. Document new additions—if you extend the system (e.g., new motion patterns), add the source assets here and call out usage guidelines in your product documentation.

Contributing

• Keep filenames descriptive (e.g., Circuit-Design-Web/Data-Frame-Dealers.png) to aid discovery.
• When updating foundational assets (colors, typography, logos), include updated reference frames and note the change in your release log.
• Submit enhancements through pull requests with a brief summary, target touchpoints, and any required usage notes.

---

Circuit UX is a living system. Use these assets to accelerate product development, maintain brand coherence, and inspire new experiences across web, mobile, print, and motion. For questions or requests, open an issue or contact the Circuit design systems team.