Design ContractsLLM-ready design systems

Tech Nerd

Dashed grids, golden CTAs, dev-tool energy

DeveloperDashedIsometric
Tech Nerd is a developer-focused UI style with warm cream surfaces and crisp, structured outlines. Page background is #F8F3EA with near-black text and borders (#1A1A1A). Signature structure uses dashed borders (1px dashed #1A1A1A) on cards and secondary buttons, with 8px border radius and minimal shadow (0 1px 3px rgba(0,0,0,0.08)). Primary accent is golden yellow (#F5A623) with a darker hover tone (#E09620). Typography pairs Inter (headings weight 600, body weight 400) with JetBrains Mono for code and command-like CTAs. Layout favors a clean grid: dashed grid background using repeating-linear-gradient lines every 100px with rgba(0,0,0,0.08). Dark sections use charcoal (#1E1E1E) with an overlaid noise texture: SVG feTurbulence fractalNoise baseFrequency 0.65, numOctaves 3, opacity 0.08. Buttons: Primary is #F5A623 fill with 1px solid #1A1A1A, 4px radius, and a small black square arrow badge (background #1A1A1A, text #F5A623). Secondary is transparent with 1px dashed #1A1A1A and JetBrains Mono. Graphics use isometric cubes and simple polygon SVGs with flat accent fills (#2BB673, #1F86F3, #E24B3B, #B65CE6) and a #1A1A1A stroke (1px). Avoid heavy gradients, thick brutal borders, or strong drop shadows.

Tech Nerd packages dev-tool confidence into a warm, readable layout: cream surfaces, strict grid rhythm, and dashed structure that feels like scaffolding. Golden CTAs give sharp emphasis, while isometric cube motifs and small polygon SVGs keep it technical without getting playful. Dark sections switch to charcoal with a subtle noise layer.

🤘
Tech Nerd// dev tools aesthetic
docs • sdk • cli

Hero

v1.0TypeScriptServer-rendered

Build docs that feel like a dev tool

Dashed structure, golden CTAs, grid rhythm, and isometric graphics. Great for SDKs, CLIs, dashboards, and technical landing pages.

Quick factsstatus: ok
Bordersdashed
Accent#F5A623
Grid100px
Noise0.08

Feature Grid

Features

grid: 2x2
Hot-swap primitives
Swap models or providers without rewriting surfaces.
/features/hot-swap-primitivesreadme
Docs-first layout
Grid structure makes scanning easy and consistent.
/features/docs-first-layoutreadme
Performance oriented
Minimal effects, low shadow, crisp borders.
/features/performance-orientedreadme
Isometric identity
Simple 3D cube language for dev brand recall.
/features/isometric-identityreadme

Code Block

Quickstart
bashcopy
1npm i tech-nerd-ui
2import { Navbar, Hero } from 'tech-nerd-ui'
3export default function Page() {
4 return (<><Navbar /><Hero /></>)
5}
Designed to stay readable in docs and changelogs. Monospace CTAs reinforce "CLI vibe".

Stats Strip

Stats

telemetry
Latency
24ms
median render
Bundles
0
no runtime deps
Tokens
12
core primitives
Themes
1
tech nerd

Pricing Cards

Pricing

no surprises
Hacker
monthly
$0
/mo
For prototypes and docs pages.
Dashed components
Grid backgrounds
Isometric icons
plan:hacker
Builder
monthly
$19
/mo
For shipping SDK sites.
Hero + pricing
Docs table
Dark CTA sections
plan:builder
Team
monthly
$49
/mo
For tooling orgs.
Design tokens
Reusable patterns
Consistent layout rules
plan:team

Docs Table

API Surface

docs
Endpoint
Auth
Rate
Status
GET /v1/jobs
key
60/min
stable
POST /v1/runs
key
30/min
beta
GET /v1/runs/:id
key
120/min
stable
DELETE /v1/runs/:id
key
15/min
stable

Dark CTA

darknoisedashed-light

Start building

Dark sections use subtle noise and lighter dashed borders to keep contrast controlled.

signal
buildpassing
deployready
docsindexed
🤘
Tech Nerd
v1.0
PrivacyDemosEvalsDocsGitHub
𝕏
💬

Card

SDK Quickstart

v1.0

A clean, dashed card with grid structure and isometric accents for dev tools and docs.

npx create-tech-nerd

Buttons

Copied to clipboard!