Skip to content

DESIGN.md

Latest commit

 

History

History
301 lines (240 loc) · 10.7 KB

DESIGN.md

File metadata and controls

301 lines (240 loc) · 10.7 KB

HyperFrames Design System & Style Guide

Use this guide to configure Mintlify docs or any other platform to match the HyperFrames brand.

Color Palette

Light Mode

Token Hex Usage
--bg #f6f5f1 Page background
--surface #ffffff Cards, panels, elevated surfaces
--surface2 #eeedea Secondary surfaces, timeline, subtle backgrounds
--border #e0dfdb Default borders
--border-light #d0cfcb Hover/active borders
--text #1a1a1a Primary body text
--text-secondary #6b6b6b Secondary/muted text
--text-tertiary #999999 Tertiary/placeholder text
--heading #0a0a0a Headings, nav brand, buttons
--code-bg #ffffff Code block backgrounds

Accent Colors (Light)

Token Hex Usage
--accent-green #1a7a0a Success, recommended badges
--accent-green-light rgba(26,122,10,0.07) Green badge backgrounds
--accent-green-border rgba(26,122,10,0.25) Green badge borders
--accent-blue #2563eb Links, info badges
--accent-blue-light rgba(37,99,235,0.06) Blue badge backgrounds
--accent-blue-border rgba(37,99,235,0.2) Blue badge borders
--accent-purple #7c3aed Highlights, special elements
--accent-purple-light rgba(124,58,237,0.06) Purple badge backgrounds
--accent-purple-border rgba(124,58,237,0.2) Purple badge borders

Syntax Highlighting (Light)

Token Hex Usage
--syntax-keyword #9333ea Keywords (const, let, function)
--syntax-function #0891b2 Function names
--syntax-string #16a34a Strings, values
--syntax-number #d97706 Numbers
--syntax-property #6366f1 Object properties
--syntax-punctuation #aaaaaa Brackets, semicolons
--syntax-tag #b45309 HTML/JSX tags
--syntax-attribute #555555 HTML attributes
--syntax-comment #bbbbbb Comments

Dark Mode

Token Hex Usage
--bg #0a0a0a Page background
--surface #141414 Cards, panels, elevated surfaces
--surface2 #1a1a1a Secondary surfaces
--border #2a2a2a Default borders
--border-light #3a3a3a Hover/active borders
--text #e5e5e5 Primary body text
--text-secondary #a0a0a0 Secondary/muted text
--text-tertiary #666666 Tertiary/placeholder text
--heading #f5f5f5 Headings
--code-bg #141414 Code block backgrounds

Accent Colors (Dark)

Token Hex Usage
--accent-green #22c55e Success, recommended badges
--accent-green-light rgba(34,197,94,0.1) Green badge backgrounds
--accent-green-border rgba(34,197,94,0.3) Green badge borders
--accent-blue #3b82f6 Links, info badges
--accent-blue-light rgba(59,130,246,0.1) Blue badge backgrounds
--accent-blue-border rgba(59,130,246,0.3) Blue badge borders
--accent-purple #a78bfa Highlights, special elements
--accent-purple-light rgba(167,139,250,0.1) Purple badge backgrounds
--accent-purple-border rgba(167,139,250,0.3) Purple badge borders

Syntax Highlighting (Dark)

Token Hex Usage
--syntax-keyword #c084fc Keywords
--syntax-function #22d3ee Function names
--syntax-string #4ade80 Strings, values
--syntax-number #fbbf24 Numbers
--syntax-property #818cf8 Object properties
--syntax-punctuation #666666 Brackets, semicolons
--syntax-tag #fb923c HTML/JSX tags
--syntax-attribute #a0a0a0 HTML attributes
--syntax-comment #555555 Comments

Typography

Font Families

Token Stack Usage
--font-display 'ABC Solar Display', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif Headlines, nav brand
--font-body 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif Body text, UI elements
--font-mono 'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace Code, terminals

Google Fonts Import

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap");

Type Scale

Element Size Weight Letter Spacing Line Height
H1 clamp(2.6rem, 6vw, 4.5rem) 400 -0.02em 1.0
H2 clamp(1.6rem, 3.5vw, 2.2rem) 400 -0.02em 1.2
H3 1rem 600 -0.01em 1.4
Body 1rem 400 normal 1.6
Body Small 0.95rem 400 normal 1.7
Caption 0.82rem 400 normal 1.6
Code 0.75rem 400 normal 1.9
Mono Small 0.65rem 500 normal 1.6

Spacing

Token Value Usage
xs 0.25rem (4px) Tight gaps
sm 0.5rem (8px) Small gaps
md 1rem (16px) Default gaps
lg 1.5rem (24px) Section gaps
xl 2rem (32px) Large spacing
2xl 4rem (64px) Section padding
3xl 8rem (128px) Hero/footer padding

Border Radius

Token Value Usage
sm 4px Badges, small elements
md 6px Buttons, inputs
lg 8px Cards, panels
xl 10px - 12px Large cards

Shadows & Effects

  • No heavy shadows — HyperFrames uses a flat, minimal aesthetic
  • Borders over shadows — Use 1px solid var(--border) instead of box-shadows
  • Backdrop blur for nav: backdrop-filter: blur(12px)
  • Selection color: rgba(128,128,128,0.2) (light) / rgba(255,255,255,0.15) (dark)

Mintlify Configuration

The docs site at docs/docs.json implements this design system. Key settings:

{
  "theme": "maple",
  "colors": {
    "primary": "#0a0a0a",
    "light": "#f6f5f1",
    "dark": "#0a0a0a"
  },
  "background": {
    "color": {
      "light": "#f6f5f1",
      "dark": "#0a0a0a"
    }
  },
  "fonts": {
    "family": "Inter",
    "heading": { "family": "Inter" }
  },
  "appearance": {
    "default": "light"
  }
}

Additional overrides (code font, CSS variables, heading tracking) live in docs/custom.css.

Component Patterns

Cards

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.card:hover {
  border-color: var(--border-light);
}

Buttons

.btn-primary {
  font-size: 0.8rem;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  background: var(--heading);
  color: #fff;
  font-weight: 500;
}

[data-theme="dark"] .btn-primary {
  background: var(--heading);
  color: #0a0a0a;
}

Code Blocks / Terminals

.terminal {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.terminal-bar {
  display: flex;
  gap: 5px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.terminal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-light);
}

.terminal-body {
  padding: 0.85rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.9;
}

Badges

.badge-green {
  color: var(--accent-green);
  background: var(--accent-green-light);
  border: 1px solid var(--accent-green-border);
}

.badge-blue {
  color: var(--accent-blue);
  background: var(--accent-blue-light);
  border: 1px solid var(--accent-blue-border);
}

.badge-purple {
  color: var(--accent-purple);
  background: var(--accent-purple-light);
  border: 1px solid var(--accent-purple-border);
}

Animation Guidelines

  • Duration: 0.15s - 0.2s for micro-interactions, 0.5s for reveals
  • Easing: ease or ease-out for most transitions
  • Hover states: Use opacity: 0.85 or border color changes
  • Scroll reveals: translateY(20px) with opacity fade

Brand Assets

  • Logo: "HyperFrames" in --font-display at 600 weight
  • Primary color: #0a0a0a (near-black)
  • Warm neutral palette: Beige/cream tones, not pure grays