---

name: jordantech-design description: Use this skill to generate well-branded interfaces and assets for Jordantech, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping. user-invocable: true

Read the README.md file within this skill, and explore the other available files.

If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.

If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.

Quick orientation

• README.md — brand positioning, content fundamentals, visual foundations, iconography
• colors_and_type.css — foundation tokens (color, type, spacing, radii, shadows, motion) + semantic type classes
• assets/ — logos (mark, wordmark, wordmark-light)
• preview/ — design-system preview cards (reference for visual language)
• ui_kits/marketing/ — marketing site components (Hero, Nav, FeatureGrid, Stats, PricingTable, Footer)
• ui_kits/console/ — product dashboard components (Sidebar, CommandBar, DeployRow, MetricCard, LogStream, IncidentBanner)

Core rules (fast)

• Dark-only. Backgrounds are near-black (#05070A); the brand does not ship a light theme.
• Brand color is acid green #2EDD00 — used as punctuation, not wallpaper. Secondary is electric cyan #00C2F0.
• Typography: JetBrains Mono (all mono + eyebrows + labels + terminal), Space Grotesk (display + headings), Inter Tight (body).
• Sharp corners: radii max at 10px + pill. No 16px+ rounded cards.
• Icons: Lucide via CDN, 1.5px stroke, 16/20/24 sizes.
• No emoji in product UI. Use mono symbols ($, >, →, //, ●, ▊) where a glyph is needed.
• Voice: direct, dry, technical. Lowercase is fine for eyebrows/labels. No marketing puff.
• Motion: fades + 4px lifts, no slides from offscreen. Ease-out for entrances, snap for affordances.

Jordantech Design System

Terminal-core software, refined. Jordantech is a software company building developer-grade products for both SMBs and the enterprise. This design system codifies a hacker-adjacent aesthetic — monospace-forward, dark, technical, confident — rendered with the polish of a modern B2B SaaS platform.

---

Brand positioning

Jordantech positions itself as "the best software company in the world" — a claim it earns through craft, speed, and technical depth. The visual language mirrors that attitude:

• For SMBs: approachable, clear, fast to value. Plain language. No jargon moats.
• For Enterprise: auditable, secure, observable. The same surface, with admin/compliance depth revealed contextually.

The brand's single unifying metaphor is the terminal — the place where power users and builders feel at home. We lean into that metaphor without becoming a costume: monospace accents, sharp corners, status dots, keyboard-first interactions, a blinking cursor in the logo. The typography and layout restraint prevent it from tipping into "1995 BBS."

---

Source materials

The user did not attach any codebase, Figma, or brand assets. This design system was authored from the brief alone:

"Jordantech — the best software company in the world. Make it nice, like a hacker website, with very cool products for smb and big companies."

All visual decisions — logo, color, type, components — are proposals. The user should review and request changes where the direction is off. Fonts are Google Fonts substitutes (see Typography). A real brand would swap in licensed webfont files under fonts/.

---

Index

File / Folder	What it is
README.md	This document — brand positioning, content rules, visual foundations, iconography
SKILL.md	Agent-Skill manifest. Drop this folder into a Claude Code skill and it works
colors_and_type.css	Foundation tokens. CSS variables for color, type, spacing, radii, shadows, motion + semantic type classes
assets/	Logos (logo-wordmark.svg, logo-mark.svg, logo-wordmark-light.svg), brand illustrations, backgrounds
fonts/	(Empty — using Google Fonts CDN. Replace with licensed files if needed.)
preview/	Design System tab cards — type, color, spacing, components, brand previews
ui_kits/marketing/	Marketing website UI kit — hero, nav, footer, pricing, feature grid
ui_kits/console/	Product UI kit — the Jordantech Console (dashboard / command surface for both SMB and Enterprise)

---

Products (imagined)

To give the design system concrete surfaces to recreate, two products are represented:

1. Jordantech Console — the core product. An observability + ops command surface: deploys, logs, runs, incidents, team, billing. Think Vercel × Datadog × Linear, with a command-bar-first UX.
2. Jordantech Marketing Site — the public-facing brand: homepage hero, pricing, feature pages, docs entry.

---

Content fundamentals

Jordantech's voice is direct, dry, and technical — with quiet confidence. Engineers should feel addressed as peers, not leads to be converted.

Voice rules

• Second person, present tense. "You ship, we watch" — not "Users can deploy and Jordantech will monitor."
• No marketing puff. Avoid: "revolutionize," "unlock," "empower," "seamless," "cutting-edge." Prefer: verbs that describe what actually happens.
• Short sentences. Fragments are fine. Mirror the rhythm of shell prompts and commit messages.
• Lowercase is allowed — even preferred — for eyebrows, labels, and product names in running copy (jordantech console, $ jt deploy). Headlines stay sentence-case. SHOUTY CAPS only for very short section eyebrows with wide tracking.
• Numbers beat adjectives. "p99 under 40ms" > "blazing fast." "14,000 teams" > "trusted by many."
• No emoji in product UI. Status uses dots, icons, or short mono labels (● up, ▲ warn, × down). Emoji can appear on the marketing site sparingly as section markers (//, $, →) — but prefer monospace symbols.
• Terminal motifs are earned, not decorative. $ prompts, > quotes, and // comments should appear where they carry meaning, not as chrome.

Examples

❌ Off-brand	✅ On-brand
"Unlock seamless deployments with our revolutionary CI/CD platform"	"Push a branch. Console builds it, runs it, and shows you what broke."
"Empower your team with powerful analytics"	"Every request, every error, queryable in SQL. No sampling."
"🚀 Trusted by innovators worldwide"	"// 14,203 teams. 2.1B requests/day. p99: 38ms."
"Get started today!"	"$ jt init — 90 seconds to first deploy."
"Our cutting-edge AI-powered platform"	"Ships code. Reads logs. Pages you when it actually matters."

Tone by surface

• Marketing hero / section titles: Declarative. Ten words or fewer. No period, or one emphatic period. "Ship software. Watch it run."
• Product UI labels: Noun-phrases. Terse. "Deploys", "Runs", "Incidents" — not "Your Deployments".
• Empty states: A single sentence, then a command. "No incidents — yet. $ jt incident create when one happens."
• Errors: Plain. What failed, why, what to do. "Build failed at npm run build (exit 1). View logs ↗"
• Tooltips / micro-copy: Monospace, lowercase, ≤ 6 words.

---

Visual foundations

Colors

The palette is one dominant neutral scale + two signal accents, with amber and magenta reserved for states.

• Obsidian (neutral): 11-step scale from #05070A (deepest bg) to #F5F8FC (max-contrast fg). Used for every surface, border, and body text.
• Acid (primary brand): Terminal green. #2EDD00 is the canonical brand. Used for primary CTAs, key status ("healthy"), brand marks, and precision highlights in code. Use sparingly — it should feel like punctuation, not wallpaper.
• Plasma (secondary): Electric cyan #00C2F0. Used for info states, link hovers, secondary accent moments, data-viz second series.
• Amber #F58900: warnings, in-progress.
• Magenta #E60050: destructive actions, errors, down status.

Backgrounds are dark by default. The design system does not ship a light theme; marketing pages can use --obsidian-10 on selected sections for contrast, but product surfaces are always dark. This is an intentional identity choice.

Typography

Three families, used with discipline:

Family	Role	Substitute note
JetBrains Mono	All mono — code, eyebrows, labels, kbd, small captions, terminal blocks	Google Fonts. ⚠️ If you have a licensed alternative (e.g. Berkeley Mono, Commit Mono), swap in fonts/ and update @import in colors_and_type.css.
Space Grotesk	Display + headings	Google Fonts. Pairs well with JetBrains Mono; geometric without being cold.
Inter Tight	Body, long-form	Google Fonts. Chosen over stock Inter for tighter optical metrics at reading sizes.

Scale: 11, 12, 14, 16, 18, 22, 28, 36, 48, 64, 88, 120. Heavy use of 14px mono for secondary UI; display sizes (64–120px) reserved for marketing hero.

Tracking: negative on display (-0.04em), slightly negative on H1/H2 (-0.02em), wide on mono eyebrows (0.18em uppercase).

Spacing + layout

4px base unit. Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128. No 10px — nothing looks right at 10px.

Marketing uses a 12-column grid with 24px gutter, max-width 1200px. Product surfaces use flexible split layouts (sidebar + canvas + inspector), not constrained by the marketing grid.

Generous negative space on marketing. Dense information on product. The contrast is intentional — Jordantech's product earns its density because its marketing doesn't waste yours.

Backgrounds

• Default: flat --obsidian-0 (#05070A) — very near black but with a hint of blue.
• Grid overlay: 1px dotted grid at 40px pitch, rgba(255,255,255,0.025) — used on hero and canvas backgrounds for depth.
• Scanline glow: a single soft radial of --acid-500 at ~8% opacity, behind the hero headline. One per page, max.
• No gradient-mesh-purple-to-blue. Ever.
• No stock imagery. When photography is needed, use high-contrast black-and-white with green duotone overlay.
• Full-bleed product screenshots on marketing feature sections, bleeding off the right edge of the grid to suggest scale.

Animation

• Easing: cubic-bezier(0.16, 1, 0.3, 1) (out) for entrances. cubic-bezier(0.2, 0.9, 0.2, 1.2) (snap) for small UI affordances like dropdown opens. No bouncy spring, no elastic.
• Durations: 80ms (instant — dropdown open), 150ms (fast — hover), 220ms (base — panel change), 400ms (slow — page transition).
• Fades over slides. Elements fade-and-lift 4px — never slide from offscreen.
• Typing effect is permitted (rare) for terminal blocks in hero. 35ms per character. Skippable.
• Cursor blink is the only perpetual motion allowed — reserved for the logo and inline text-cursor affordances.

Hover / press

• Buttons: hover → slight brightness lift (brand: --acid-500 → --acid-400); press → darker (--acid-600) + 1px translateY.
• Links: underline appears on hover, never by default. Color stays --fg; underline color is --brand.
• Cards: hover → border shifts from --obsidian-3 to --obsidian-4, plus a faint --glow-soft. No scale, no lift.
• Icons: hover → brightness to brand. No rotation.

Borders + radii

• Everything that can have a 1px border does. Borders carry the visual system.
• Default border: 1px solid --obsidian-3.
• Radii are small: 2px (inline chips), 4px (buttons, inputs), 6px (cards), 10px (modals). Nothing uses 16px+ except pills.
• No double borders. No 2px borders except for focus rings.

Shadows + glows

Because the UI is dark, glows replace drop-shadows for emphasis.

• Drop-shadows exist (sm/md/lg) but are used only for floating surfaces (menus, toasts).
• The canonical "this element is active/focused" treatment is --glow-brand: 1px solid acid + 24px soft acid bloom.
• Focus rings on inputs: --glow-accent (plasma cyan) — distinguishes focus from brand emphasis.

Corners, cards, panels

• Cards are --bg-elevated (one step up from page), with a 1px --obsidian-3 border and 6px radius.
• Dense panels (e.g. log viewers) use --bg-inset (one step darker than page) to signal "this is data, not chrome."
• Corner clipping: occasionally a clip-path corner cut (the top-right of hero cards) to reinforce the technical aesthetic. Used ≤ 1 per viewport.

Transparency + blur

• Header: rgba(5, 7, 10, 0.72) + backdrop-filter: blur(12px) when scrolled.
• Modals: overlay at --bg-overlay, modal itself is solid --obsidian-2.
• No frosted glass everywhere. Blur is a specific tool for sticky chrome and modals only.

Capsules vs protection gradients

• Use solid pill chips (--r-pill) for status labels and tag clusters.
• Use gradient protection behind text only over photography — never over flat surfaces.

Layout motifs

• Fixed header (64px), transparent until scroll.
• Fixed footer only on terminal-style surfaces (logs, command palette) — marketing footers flow naturally.
• Command bar (⌘K) pinned to viewport in product; invoked as a centered modal.
• Sidebars are collapsible to icon-only. Never two sidebars.

---

Iconography

Primary icon set: Lucide via CDN. Stroke-based, 24×24 viewBox, 1.5px default stroke. Lucide's geometric precision fits the brand; its stroke weight harmonizes with 1px borders.

Linked via CDN in UI kits:

<script src="https://unpkg.com/lucide@latest"></script>

Usage rules

• 16px for inline UI (buttons, menu items, breadcrumbs). Stroke: 1.5px.
• 20px for section headers, card toolbars.
• 24px for standalone decorative uses.
• 48px+ for empty states, hero punctuation.
• Color: inherit currentColor from parent. Default is --fg-muted; hover is --fg; active is --brand.

When NOT to use icons

• Never decorate headings with icons.
• Never use icons as bullet points in prose.
• Never pair an icon with a one-word label when the label alone is clear.

Status icons (our own)

For status we use filled dot + optional short mono label, not Lucide icons. The dots are:

• ● green — healthy / passing / up (--acid-500)
• ● cyan — info / in progress
• ● amber — warning / degraded
• ● magenta — error / down
• ○ gray — unknown / disabled

Emoji + unicode

• No emoji in product UI.
• Monospace symbols are permitted as prose decorators: $, >, →, //, ▲, ■, ●, ▊ (terminal cursor).
• These render reliably across systems because they're in every monospace font.

Flagged substitutions

Asset	Shipped as	Ideal
Fonts	Google Fonts CDN (JetBrains Mono, Space Grotesk, Inter Tight)	Licensed files in fonts/ if a real brand ships this
Icons	Lucide via CDN	Custom hand-drawn set matching Jordantech's line weight, shipped as sprite
Product screenshots on marketing	Recreated in HTML/CSS	Real captures once Console exists
Photography / team imagery	None shipped	Real photos with green-duotone treatment

---

Using this design system

In an HTML artifact:

<link rel="stylesheet" href="colors_and_type.css">
<body style="background: var(--bg); color: var(--fg); font-family: var(--font-body);">
  <h1 class="jt-h1">Ship software. Watch it run.</h1>
  <p class="jt-eyebrow">// jordantech console</p>
</body>

For UI components: copy from ui_kits/<product>/. Components are plain JSX files that render inside a host HTML file via Babel — they use the CSS variables directly and require no build step.

For slides: no slide templates are shipped (none were requested). If needed, compose from marketing components.