Bold Tech

source

---
name: Bold Tech
description:
  Dark-mode-first UI with saturated purple/cyan accents and monospace code
  treatment. For developer tools and infra dashboards.
colors:
  background: "#0B0B12"
  surface: "#151522"
  surface-raised: "#1E1E30"
  ink: "#F5F5FA"
  ink-muted: "#A0A0B5"
  accent: "#A855F7"
  accent-alt: "#22D3EE"
  success: "#22C55E"
  danger: "#EF4444"
  border: "#2A2A3D"
  link: "{colors.accent-alt}"
typography:
  h1:
    family: "'Space Grotesk', 'Inter', sans-serif"
    size: "3rem"
    weight: 700
    lineHeight: 1.05
    letterSpacing: "-0.03em"
  h2:
    family: "'Space Grotesk', 'Inter', sans-serif"
    size: "2rem"
    weight: 700
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  h3:
    family: "'Space Grotesk', 'Inter', sans-serif"
    size: "1.375rem"
    weight: 600
    lineHeight: 1.25
  body:
    family: "'Inter', system-ui, sans-serif"
    size: "0.9375rem"
    weight: 400
    lineHeight: 1.6
  code:
    family: "'JetBrains Mono', 'Fira Code', ui-monospace, monospace"
    size: "0.875rem"
    weight: 500
    lineHeight: 1.55
spacing:
  xs: "0.375rem"
  sm: "0.75rem"
  md: "1.25rem"
  lg: "2rem"
  xl: "3.5rem"
rounded:
  sm: "4px"
  md: "8px"
  lg: "14px"
shadows:
  glow-accent: "0 0 24px rgba(168, 85, 247, 0.35)"
  glow-alt: "0 0 24px rgba(34, 211, 238, 0.3)"
components:
  button-primary:
    background: "{colors.accent}"
    color: "#FFFFFF"
    border: "1px solid {colors.accent}"
    radius: "{rounded.md}"
    padding: "0.625rem 1.25rem"
    shadow: "{shadows.glow-accent}"
  button-secondary:
    background: "{colors.surface-raised}"
    color: "{colors.ink}"
    border: "1px solid {colors.border}"
    radius: "{rounded.md}"
    padding: "0.625rem 1.25rem"
  card:
    background: "{colors.surface}"
    border: "1px solid {colors.border}"
    radius: "{rounded.lg}"
    padding: "{spacing.lg}"
---

## Overview

Bold Tech is a dark-mode-first visual language for developer tools, infra
dashboards, and AI-adjacent products. It leans on a deep near-black background,
saturated purple + cyan accents, and monospace code blocks that feel native to
the content.

## Colors

- Near-black background (`#0B0B12`) with two progressively-lighter surfaces for
  elevation.
- Purple primary accent (`#A855F7`) carries most brand weight; cyan (`#22D3EE`)
  handles links and secondary emphasis.
- Semantic green / red for status signals. Every accent has a matching `glow-*`
  shadow for active states.

## Typography

- Space Grotesk for headings — modern, slightly geometric, works well at large
  sizes.
- Inter for body copy at 15px.
- JetBrains Mono for code, sized one step below body so inline code doesn't
  dominate the paragraph.

## Usage

Ideal for landing pages of infra products, developer-tool marketing, or AI
dashboards. Pair with subtle grid lines on dark surfaces and use the glow
shadows sparingly — they read as "this is active/selected" rather than
decoration. Avoid light backgrounds; this design doesn't have a light-mode
counterpart.