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

Dark Blue

#030729

var(--background)

Background

Card Surface

#0a0f2e

var(--card)

Card backgrounds

Dark Plum

#250F25

var(--muted)

Muted surfaces

Border

#1a1f4e

var(--border)

Borders & dividers

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

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: #030729;
  --ttm-pink: #E904E5;
  --ttm-lime: #a1ff00;
  --ttm-cyan: #09FFF0;
  --ttm-hot-red: #ff0080;
  --ttm-goldenrod: #ff9500;
  --ttm-radius: 3.25rem;
}
Rainbow Gradient
.gradient-text {
  background: linear-gradient(90deg, #09FFF0, #ff0080, #E904E5, #a1ff00, #ff9500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
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-lime: #7c9f35;
  --ttm-pink: #e85d9c;
  --ttm-cyan: #09d3c5;
  --ttm-font-mono: 'Geist Mono', 'IBM Plex Mono', monospace;
}
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' })