TheTechMargin

A comprehensive design and style guide for designers and developers building products for The Tech Margin brand.

the-tech-margin.com|GitHub

Portfolio / Library of Work

Reference implementations showcasing The Tech Margin design system in action.

TheTechMargin

Primary

Primary hub featuring AI insights, tech articles, creative portfolio, and professional services.

Visit Site
PrimaryArticlesPortfolio

IIIF Collection Explorer

Browse cultural heritage collections from Smithsonian, Harvard Art Museums, and Europeana through IIIF.

CollectionsGallerySearch

Next Dream

Career navigation for curiosity-driven learning journeys with multi-step profile builder.

CareersMulti-stepProfiles

Codex Protocol

Network initialization interface with dark, mysterious aesthetic and loading visualizations.

NetworkLoading States

Mesh Video Explorer

3D viewer and mesh exploration tool with WebGL/Three.js integration.

3DWebGLViewer

Four Corners Metadata Editor

Metadata editing tool for managing image context and provenance.

MetadataGalleryEditor

Design Pattern References

Article/Blog Cards

the-tech-margin.com

Collection Browsing

collection-explorer

Multi-Step Forms

nextdream.work

3D/WebGL

mask.thetechmargin.com

Loading States

codex-protocol

Metadata Editing

four-corners

Colors

Vibrant neon palette for an energetic, tech-forward aesthetic.

Brand Colors

Vibrant Pink

#E904E5

var(--brand-pink)

Primary brand color

Lime

#a1ff00

var(--brand-lime)

Secondary brand color

Cyan

#09FFF0

var(--brand-cyan)

Accent color

Hot Red

#ff0080

var(--brand-hot-red)

Highlights & CTAs

Goldenrod

#ff9500

var(--brand-goldenrod)

Warnings & accents

Neutrals & Backgrounds

Background

#1a1a1a

var(--ttm-bg)

Page background — dark gray, never blue

Card Surface

#242424

var(--ttm-surface)

Card backgrounds

Surface Alt

#2e2e2e

var(--ttm-surface-alt)

Muted surfaces

Hairline Accent

#09d3c5

var(--ttm-border-accent)

1px colored borders (cyan at 35%)

Gray

#767676

var(--muted-foreground)

Muted text

Terminal Thememaths.thetechmargin.com

Terminal BG

#f2ede1

var(--ttm-bg)

Terminal background

Terminal Text

#2b2a28

var(--ttm-text)

Terminal text

Terminal Green

#7c9f35

var(--ttm-lime)

Terminal accent

Terminal Pink

#e85d9c

var(--ttm-pink)

Terminal highlight

Terminal Cyan

#09d3c5

var(--ttm-cyan)

Terminal info

Retro terminal aesthetic with cream background and monospace fonts. Switch to "Terminal" theme to preview.

Usage Guidelines

Do

  • Use vibrant colors sparingly
  • Maintain high contrast
  • Use dark backgrounds

Don't

  • Overuse neon colors
  • Neon on light backgrounds
  • Multiple neons together

Typography

Poppins for body/copy/newsletters, Pacifico for display headings, Geist Mono for terminal aesthetic.

Aa

Poppins

Body & Newsletters

The quick brown fox

Body text, newsletters, copy, readable long-form content.

font-sans
Aa

Pacifico

Display & Headlines

The quick brown fox

Hero headings, branded highlights, decorative text.

font-serif
Aa

Geist Mono

Terminal & Code

TECHMARGIN.EXE

Code blocks, terminal UI, retro aesthetic.

font-mono
Aa

IBM Plex Mono

Terminal Alt

SYSTEM.RUN

Alternative terminal font, slightly warmer feel.

--font-ibm-plex-mono

Script Font Guidelines

Pacifico Rules

  • xNever uppercase - Script fonts lose their flow and become illegible
  • ✓Use generous line-height - Prevent ascenders/descenders from colliding (min 1.4)
  • ✓Single lines preferred - Multi-line script text is hard to read
  • ✓Large sizes only - Script fonts need space to breathe (24px+)

Ascender/Descender Spacing

Bad: Line-height 1.0

jumping quickly
flying high

Good: Line-height 1.5

jumping quickly
flying high

Use leading-relaxed or leading-loose for script fonts.

H1 Styles by Type and Vibe

Different heading styles for different contexts. Choose based on your content's tone and purpose.

Corporate / Professional

Enterprise Solutions

Poppins, semibold, tight tracking. Clean and authoritative.

font-sans text-3xl font-semibold tracking-tight
Creative / Playful

Let's Create Something Amazing

Pacifico, natural case, generous line-height. Warm and inviting.

font-serif text-4xl leading-relaxed
Terminal / Hacker

SYSTEM.INITIALIZE

Geist Mono, uppercase, wide tracking. Technical and edgy.

font-mono text-2xl font-semibold uppercase tracking-widest
Editorial / Magazine

The Future of Design

Poppins light, tight line-height. Elegant and sophisticated.

font-sans text-4xl font-light tracking-tight leading-none
Bold / Impact

Make It Happen

Poppins bold, uppercase, compressed. Attention-grabbing.

font-sans text-5xl font-bold uppercase leading-none
Minimal / Subtle

less is more

Poppins regular, lowercase, wide tracking. Understated and modern.

font-sans text-2xl font-normal lowercase tracking-wide

When to Use Each Font

Poppins (font-sans)

  • - Newsletter content
  • - Blog posts and articles
  • - Marketing copy
  • - UI labels and buttons
  • - Long-form reading

Pacifico (font-serif)

  • - Hero headlines (single line)
  • - Brand wordmarks
  • - Decorative titles
  • - Special callouts
  • - Never uppercase

Geist Mono (font-mono)

  • - Code snippets
  • - Terminal interfaces
  • - Technical data
  • - File names / paths
  • - Retro/hacker aesthetic

Recommended Font Alternatives

Fonts that pair well with our design system and can be swapped in for different project needs.

Heading Fonts

Inter

Clean, modern sans-serif. Great for tech/SaaS.

fonts.google.com/specimen/Inter

Playfair Display

Elegant serif. Perfect for editorial/luxury brands.

fonts.google.com/specimen/Playfair+Display

Space Grotesk

Geometric sans with personality. Tech-forward feel.

fonts.google.com/specimen/Space+Grotesk

Sora

Friendly geometric. Works for apps and dashboards.

fonts.google.com/specimen/Sora

Body Fonts

DM Sans

Low-contrast geometric. Excellent readability.

fonts.google.com/specimen/DM+Sans

Plus Jakarta Sans

Modern variable font. Versatile for UI.

fonts.google.com/specimen/Plus+Jakarta+Sans

Source Sans 3

Adobe's open-source classic. Long-form content.

fonts.google.com/specimen/Source+Sans+3

Nunito

Rounded, friendly feel. Great for consumer apps.

fonts.google.com/specimen/Nunito

Pairing Tips

  • • Pair a decorative heading font with a neutral body font
  • • Use max 2-3 font families per project
  • • Contrast weights: bold headings + regular body

Type Scale

Display

Creative Tech Innovation

48px / 700 weight / Line height 1.1
H1

Welcome to TheTechMargin

36px / 600 weight / Line height 1.2
H2

Our Design Philosophy

30px / 600 weight / Line height 1.3
H3

Component Guidelines

24px / 500 weight / Line height 1.4
H4

Button Variants

20px / 500 weight / Line height 1.4
Body Large

Innovation meets artistry in every pixel we craft.

18px / 400 weight / Line height 1.6
Body

Our design system empowers creators to build beautiful, consistent experiences that delight users and drive engagement.

16px / 400 weight / Line height 1.6
Small

Last updated 2 hours ago

14px / 400 weight / Line height 1.5
Caption

Required field

12px / 400 weight / Line height 1.4

Buttons

Interactive elements with clear visual feedback.

Primary Actions

bg-brand-pink hover:bg-brand-pink/90 text-white

Secondary Actions

bg-brand-cyan | bg-brand-lime | bg-brand-goldenrod

Outline & Ghost

variant="outline" | variant="ghost"

Sizes

size="sm" | size="default" | size="lg" | size="icon"

Button Guidelines

Primary

Main CTAs. One per section.

Secondary

Support actions. Multiple allowed.

Ghost/Outline

Tertiary actions, navigation.

Cards

Content containers with consistent visual hierarchy.

Basic Cards

Default Card
Standard card with header and description
Use for general content grouping. The dark background creates depth against the page.
Interactive Card
Hover to see the border effect
Add hover states for clickable cards. Pink border accent reinforces brand.
Featured Card
Highlighted with brand accent
Use sparingly to draw attention to important content.

Cards with Actions

AI Solutions
Cutting-edge artificial intelligence for creative workflows
Leverage machine learning and generative AI to accelerate your creative process and unlock new possibilities.
Creative Portfolio
Explore multimedia art and digital compositions
AI-mediated visuals, digital art, compositions, and multimedia installations that push creative boundaries.

Glow Effect Cards

Pink Glow
Subtle pink glow effect for featured content
Cyan Glow
Cyan glow for highlighting tech elements
Lime Glow
Lime glow for success states or accents

Card Classes

bg-cardBackground
border-borderBorder
glow-pink | glow-cyan | glow-limeGlow

Gradients

Dynamic gradients for energy and depth. Use sparingly.

Aurora

linear-gradient(135deg, rgba(9, 255, 240, 0.5), rgba(233, 4, 229, 0.4), rgba(161, 255, 0, 0.35))

Cyan to Pink

linear-gradient(135deg, #09FFF0, #E904E5)

Cyan Glow

linear-gradient(135deg, rgba(9, 255, 240, 0.7), rgba(9, 255, 240, 0.2))

Pink Mist

linear-gradient(135deg, rgba(233, 4, 229, 0.6), rgba(255, 0, 128, 0.3))

Lime Fade

linear-gradient(135deg, rgba(161, 255, 0, 0.6), rgba(255, 149, 0, 0.35))

Sunset

linear-gradient(135deg, #ff0080, #ff9500)

Gradient Text

TheTechMargin

Creative Tech Innovation

.gradient-text { background: linear-gradient(90deg, #09FFF0, #E904E5, #ff0080); -webkit-background-clip: text; }

Guidelines

Do

  • Hero sections, headlines
  • Decorative backgrounds
  • 1-2 per view max

Don't

  • Body text
  • Small UI elements
  • Light backgrounds

Spacing & Layout

Concise, consistent spacing. No options, just standards.

Layout Standards

p-3Card padding
gap-2Element gap
mb-3Section margin
px-4Container

Border Radius

0
3px(default)
full

Concise Layout Example

Action
Secondary

Tight spacing, minimal radius, clear hierarchy.

Iconography

Lucide icons for consistent, clean interfaces.

Brand Icons

Sparkles

AI, Magic

Brain

AI, Intelligence

Zap

Speed, Power

Palette

Creative, Art

Code

Development

Rocket

Launch, Growth

UI Icons

Settings

User

Mail

Bell

Search

Menu

Close

Chevron

Arrow

External

Download

Upload

Feedback Icons

Success

Warning

Error

Info

Icon Sizes

w-4
w-5
w-6
w-8

Guidelines

Usage

  • w-4 inline, w-5 buttons, w-6 standalone

Color

  • UI: text-foreground, Brand: text-brand-*

Noun Project Icons

Search and browse icons from The Noun Project. Icons require attribution or a Pro subscription.

No icons found. Try a different search term.

Noun Project Viewer

  • Always check the license before commercial use
  • Icons can be customized with brand colors using CSS filters or SVG fill

Header Specification

The site header pattern used on the-tech-margin.com. The navigation is always a single icon menu button opening a dropdown panel — at every breakpoint, never an inline row of links.

Anatomy

TheTechMargin

Sticky blurred surface, 1px rainbow hairline bottom border, logo + Pacifico gradient wordmark left, 44px bordered menu button right. Click the button to preview the dropdown anatomy.

Specs

Position: sticky top-0
Surface: bg/80 + blur
Bottom edge: rainbow 1px
Height: 64px
Logo: 32–40px
Wordmark: Pacifico + gradient
Menu button: 44px, cyan/60
Dropdown: w-72, cyan/25

Dropdown Item Order

  1. Primary CTA (e.g. Studio, Subscribe)
  2. Theme toggle
  3. Separator
  4. Site navigation links
  5. Separator
  6. External / secondary links
export function BrandHeader() {
  const [menuOpen, setMenuOpen] = useState(false)
  return (
    <header className="sticky top-0 z-50 bg-background/80 backdrop-blur-md rainbow-border-bottom">
      <div className="container mx-auto px-4 flex h-16 items-center justify-between">
        {/* Brand: logo + Pacifico gradient wordmark */}
        <a href="/" className="flex items-center gap-2.5">
          <img src="/images/logo.png" alt="TheTechMargin Logo" className="w-8 h-8" />
          <span className="font-serif text-xl gradient-text-rainbow">TheTechMargin</span>
        </a>

        {/* Menu: always the bordered icon button + dropdown — every breakpoint */}
        <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
          <DropdownMenuTrigger asChild>
            <button
              aria-label="Menu"
              className="h-11 w-11 inline-flex items-center justify-center rounded-md
                border border-brand-cyan/60 hover:border-brand-cyan hover:bg-brand-cyan/10"
            >
              {menuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-72 border-brand-cyan/25 bg-popover/95 backdrop-blur-md">
            {/* primary CTA, theme toggle, separator, site links, separator, external links */}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  )
}

Do

  • Keep the menu as one icon button + dropdown at every screen size
  • Swap in different icons per project (hamburger, cube, sparkle)
  • Use hairline (1px) colored borders on the button and panel

Don't

  • Show an inline row of nav links on desktop
  • Use gray or heavy (2px+) borders on header chrome
  • Use blue backgrounds — surfaces are dark gray, never blue

Shortcuts & Panels

The keyboard shortcut engine, pop-out panel (FAB), and command palette patterns used on the-tech-margin.com and Four Corners. New builds reuse these constructs.

Canonical Shortcut Map

Shortcuts are off while the user types in a field.

  • Show the shortcuts panel?
  • Focus search/
  • Open or close the menum
  • Toggle themet
  • Go homegh
  • Go to all articles / galleryga
  • Open a random itemr
  • Share this pages
  • Close menus and dialogsEsc

Shortcut Engine Rules

  • One window keydown listener per page, in a hook (useKeyboardShortcuts(handlers)) with memoized handlers.
  • Bail out on metaKey / ctrlKey / altKey / repeat, and on typing targets: INPUT, TEXTAREA, SELECT, isContentEditable (shared isTypingTarget guard).
  • Key sequences (g then h) use a closure flag with a ~900ms timeout reset — no state, no library.
  • preventDefault() only for keys that would otherwise type (?, /) or scroll.
  • Scoped engines (e.g. client pages) may override the global one with stopImmediatePropagation().
  • Dialogs open cross-component via window CustomEvents (e.g. ttm:shortcuts, fc:open-help) — no context or prop drilling for globally mounted panels.

Pop-out Panel (FAB)

FAB: 44px round
Position: fixed bottom/right
Border: cyan/60 hairline
Open icon: swaps to X
Panel: w-72 translucent
Dividers: 1px hairline
Hover: cyan glow shadow
Max height: 70vh scroll
  • Trigger carries aria-expanded, aria-controls, aria-haspopup="dialog"; the panel is role="dialog" with a label.
  • On open, focus the first link/button in the panel; on close, return focus to the trigger.
  • Dismiss on Esc, outside pointer-down (useDismissable(open, refs, onDismiss)), and route change.
  • Menu rows may carry a trailing ?-style keycap hinting the equivalent shortcut.
  • A theme row uses paired toggle buttons with aria-pressed, not a bare icon swap.

Command Palette / Help Launcher

  • Headerless dialog: search row with a leading search icon, placeholder "Search help & jump to anything…", and a trailing Esc keycap that swaps to a clear button while typing.
  • Grouped listbox (uppercase tracking-wide group labels); rows are icon + bold title + muted subtitle; selected row gets a wash background and a 3px inset accent bar.
  • Combobox ARIA: focus stays in the input; options use role="option" and the input tracks aria-activedescendant.
  • Entries and filtering are pure functions (buildEntries() + case-insensitive AND term match) so they unit-test without React.
  • Actions are a discriminated union: route | external | event — the event arm is the hook point for opening other panels.
  • Restore focus to the opener on unmount; keep the active option visible with non-smooth scrollIntoView.

Do

  • Keep the canonical shortcut map (? / m t …) consistent across sites
  • Drive shortcut dialogs from a data array rendered as hairline-divided rows with real <kbd> chips
  • Honor prefers-reduced-motion on FAB and panel transitions

Don't

  • Fire shortcuts while the user is typing in a field
  • Add a hotkey library — the ~80-line hook covers every case used
  • Hardcode z-index (z-[9999]) — use the z-scale tokens

Accessibility

Guidelines for building inclusive, WCAG 2.1 AA compliant interfaces.

WCAG Compliance Levels

A

Minimum accessibility

AA

Target compliance (recommended)

AAA

Enhanced accessibility

Color Contrast Ratios

Color PairRatioStatusLevel
Primary Text on Background15.2:1PassesPassAAA
Secondary Text on Background10.8:1PassesPassAAA
Muted Text on Background5.4:1PassesPassAA
Cyan on Background12.1:1PassesPassAAA
Pink on Background4.6:1PassesPassAA
Lime on Background14.8:1PassesPassAAA

Minimum ratio: 4.5:1 for normal text (AA), 3:1 for large text (AA), 7:1 for enhanced (AAA)

Keyboard Navigation

  • TabMove focus to next interactive element
  • Shift + TabMove focus to previous element
  • Enter / SpaceActivate buttons and links
  • EscapeClose modals and dropdowns
  • Arrow KeysNavigate within menus and tabs

Focus States

Link with focus

All interactive elements must have visible focus indicators. Use focus:ring-2 focus:ring-offset-2

ARIA Patterns

Button with loading state
<button aria-busy="true" aria-label="Saving...">
  <Spinner /> Save
</button>
Icon-only button
<button aria-label="Close dialog">
  <X className="w-4 h-4" />
</button>
Form field with error
<input 
  aria-invalid="true"
  aria-describedby="email-error"
/>
<span id="email-error" role="alert">
  Invalid email address
</span>
Navigation landmark
<nav aria-label="Main navigation">
  <ul role="list">
    <li><a href="/">Home</a></li>
  </ul>
</nav>

Best Practices

Do

  • Use semantic HTML elements (button, nav, main, article)
  • Provide alt text for all meaningful images
  • Ensure color is not the only indicator of state
  • Support 200% text zoom without loss of content
  • Use aria-label for icon-only buttons
  • Group form fields with fieldset and legend
  • Announce dynamic content with aria-live regions

Don't

  • Use div or span for interactive elements
  • Remove focus outlines without replacement
  • Rely on hover-only interactions
  • Use placeholder as the only label
  • Auto-play media without controls
  • Create keyboard traps in modals
  • Use tabindex greater than 0

Screen Reader Utilities

sr-onlyVisually hidden but accessible to screen readers
not-sr-onlyUndo sr-only, making element visible again
aria-hidden="true"Hide decorative elements from assistive tech

Motion & Animation

Respect user motion preferences with the prefers-reduced-motion media query:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Tailwind: Use motion-safe: and motion-reduce: variants

Downloads

Export design system files for use in other projects.

design-system.md

Complete design system documentation

globals-export.css

Standalone CSS with all variables

Quick Copy

CSS Variables
:root {
  --ttm-bg: #0f0b08;
  --ttm-surface: #181210;
  --ttm-text: #f4efe8;
  --ttm-border: #3a2f26;
  --ttm-pink: #E904E5;
  --ttm-lime: #a1ff00;
  --ttm-cyan: #09FFF0;
  --ttm-hot-red: #ff0080;
  --ttm-goldenrod: #ff9500;
  --ttm-rainbow: linear-gradient(90deg, #b48cff, #7ab0ff, #6ee4f0, #8ee08a, #f5d84f, #ffa356, #ff78b4);
  --ttm-border-accent: color-mix(in srgb, var(--ttm-cyan) 35%, transparent);
  --ttm-radius: 0.7rem;
}
Rainbow Gradient
/* violet -> blue -> cyan -> green -> yellow -> orange -> pink */
--ttm-rainbow: linear-gradient(90deg, #b48cff, #7ab0ff, #6ee4f0, #8ee08a, #f5d84f, #ffa356, #ff78b4);

.gradient-text-rainbow {
  background: var(--ttm-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rainbow-border-bottom { border-bottom: 1px solid transparent; border-image: var(--ttm-rainbow) 1; }
.rainbow-border-top { border-top: 1px solid transparent; border-image: var(--ttm-rainbow) 1; }
Footer Component
<footer class="ttm-footer">
  <p>made with <span class="heart">❤️</span> by <span class="brand">thetechmargin</span></p>
</footer>
Terminal Theme Variables
.terminal {
  --ttm-bg: #f2ede1;
  --ttm-text: #2b2a28;
  --ttm-text-muted: #635f57;
  --ttm-lime: #7c9f35;
  --ttm-pink: #b83570;
  --ttm-cyan: #09d3c5;
  --ttm-success: #166534;
  --ttm-danger: #b91c1c;
  --ttm-warning: #8a5a00;
  --ttm-info: #0f6674;
  --ttm-font-sans: var(--ttm-font-mono);
  /* Re-declare role tokens (var() substitutes where declared) */
  --ttm-accent-cta: var(--ttm-pink);
}
Terminal Font Imports
/* Next.js font imports */
import { Geist_Mono, IBM_Plex_Mono } from 'next/font/google'

const geistMono = Geist_Mono({ subsets: ['latin'], variable: '--font-geist-mono' })
const ibmPlexMono = IBM_Plex_Mono({ subsets: ['latin'], weight: ['400', '500', '600', '700'], variable: '--font-ibm-plex-mono' })