Forge Utah Design System

A terminal-flavored, 8-bit-leaning design system for the Forge Utah Foundation — a not-for-profit community for technologists, developers, data scientists, and tinkerers in Utah.

"Utah's community built for the builders."

The system blends Forge Utah's existing brand mark (a coral-red flame above a gray cog) with a darker, more developer-native visual language inspired by terminal UIs, ASCII art, and 8-bit nostalgia — closer to what you'd see on planetscale.com or exe.dev than the current marketing site.

---

Sources & Inputs

Source	What it gave us
uploads/forge-logo.webp	Primary logo (flame + cog + "Forge Utah" wordmark, white-on-transparent).
https://forgeutah.tech/	Existing site copy, voice, audience, sub-community list. Hugo-based, light + dark mode toggle, friendly hand-drawn banner illustration.
https://planetscale.com/	Aesthetic reference — clean type, ASCII diagrams, dense developer info architecture, minimal chrome, dark surfaces.
https://exe.dev/	Aesthetic reference — radically minimal, monospace-forward, ssh exe.dev energy, terminal-as-marketing.

The current forgeutah.tech site uses a light/friendly visual approach (rotating word typewriter hero, hand-drawn line illustrations). This design system pivots intentionally toward a dark, developer-tooling aesthetic per the requested direction while preserving the brand's flame red and cog gray.

---

What's here

.
├── README.md                  ← you are here
├── SKILL.md                   ← agent skill manifest
├── colors_and_type.css        ← all CSS tokens + semantic type classes
├── assets/                    ← logos, banner, brand imagery
│   ├── forge-logo.webp        (primary, white text on transparent)
│   ├── forge-logo-light.webp  (from forgeutah.tech, dark text)
│   └── forge-logo-darkmode.webp (from forgeutah.tech, white text)
├── preview/                   ← Design System tab cards
│   ├── colors-*.html
│   ├── type-*.html
│   ├── spacing-*.html
│   ├── components-*.html
│   └── brand-*.html
└── ui_kits/
    └── marketing/             ← forgeutah.tech-style site recreation
        ├── README.md
        ├── index.html
        └── *.jsx

---

Brand at a glance

• Name: Forge Utah Foundation
• What it is: A volunteer-run not-for-profit organizing the Utah developer community
• Audience: Programmers, web developers, data scientists, SREs, DBAs, tinkerers, engineers, frontend devs, builders, technologists — they list these explicitly in their hero
• Mission pillars: Share. Learn. Build.
• Owned meetups: Utah Go User Group, Utah Kubernetes, Utah Data Engineering Meetup (UDEM), Women Who Go Utah, AI Utah, Engineering Leadership Utah, St George Developers, The Foundry Hack Nights
• Channels: forgeutah.tech, GitHub, Slack, X/@ForgeUtah, LinkedIn
• Logo elements: A coral-red stylized flame above an industrial gray gear / cog — "forge" as in blacksmith forge: heat (flame) + machinery (cog). The wordmark "Forge Utah" sits to the right in white sans-serif.

---

Content Fundamentals

The voice is friendly, communal, technical, lightly proud of being Utah — never corporate, never salesy. Reads like a Slack invite from a peer, not a recruiter pitch. The bar to clear: would a senior engineer roll their eyes at this? If yes, rewrite.

Voice rules

• "We" and "you," never "the Foundation will..." First-person plural is the default. "We host several local meetups." "Join us on Slack." Reserve the formal third-person ("The Foundation's mission is…") for mission/legal copy only.
• Specific over generic. Always name the thing. Not "communities" — Utah Kubernetes, AI Utah, The Foundry Hack Nights. Specificity is the brand. Exception: don't quote a count of meetups in evergreen copy — communities come and go. Name them, or say "our meetups."
• Plain words. No "leverage," no "synergy," no "ecosystem," no "empower" except in mission copy where it's earned. Use what an engineer would write in a README.
• Sentence case for all UI. "Join us on Slack," not "Join Us On Slack." Title Case only for proper nouns and event names.
• No marketing exclamation points. A single "!" is fine in a meetup confirmation, never in body copy.
• Hyphenate decisively. "not-for-profit," "open-source," "click-thru" — small consistency wins trust.
• Acronyms with their expansion the first time: Utah Data Engineering Meetup (UDEM), then UDEM after.

Casing & punctuation

• Headlines: Sentence case. Hero word-loop (PROGRAMMERS, DATA SCIENTISTS…) is the one exception — all-caps because it's a typewriter-style display flourish.
• Buttons: Sentence case ("Join us on Slack," "Get the calendar").
• Section labels / eyebrows: UPPERCASE mono with wide tracking — read as terminal prompts (> SHARE, > LEARN, > BUILD).
• Code & paths in body: wrapped in <code> with the cyan mono treatment.
• No em-dashes in marketing body. En-dashes for ranges. Hyphens for compounds.

Emoji & flourishes

• No emoji in marketing or product copy. This is a developer community, not a startup pitch deck.
• ASCII flourishes (>, $, →, ┌─┐, █) and box-drawing characters are the brand's emoji. Use them in eyebrows, dividers, code blocks.
• The terminal cursor (▮ or █) blinking after a word is fair game in hero treatments.

Example pairings (current → revised in our tone)

OK	Better
"Empowering developers across Utah."	"We're a community of Utah technologists who share, learn, and build."
"Join our amazing community! 🚀"	"Join us on Slack."
"Sign up for events."	"See what's happening: utahdev.events"
"Our world-class meetups."	"Meetups run by volunteers, free to attend."

---

Visual Foundations

The system is dark by default, monospace-forward, with a coral-red brand accent that glows. Think: the README looks like a terminal session, the marketing site looks like an htop of the community, and the buttons all want to be Enter keys.

Color

• Base surfaces are near-black with a cool blue tint — --ink-0 (#07090C) through --ink-3 (#181D26). Never pure black; that flattens the brand glow.
• Text is layered across --ink-7 (dim/captions) → --ink-9 (body) → --ink-10 (headings) → --ink-11 (#FFFFFF, used sparingly).
• Brand accent: --forge-flame (#C04058) — lifted directly from the logo. Has a --forge-flame-bright (#E0445F) for hover and --forge-flame-deep (#8A2D3F) for press / shadow. The flame should glow on important surfaces (--glow-flame).
• Cog gray (#A8A8A8) is the secondary brand color but used sparingly in marketing; the cog reads "machinery / craft" — best as iconography stroke color or as a thin line between sections.
• Terminal status colors — green (#4ADE80 success/online), amber (#FBBF24 warning), cyan (#67E8F9 info/links), magenta (#D946EF rare), error red (#F87171). Used as foreground colors on dark surfaces; never as large fills.
• Selection is a 35% flame red tint — feels right when scrubbing terminal output.

Type

• Primary mono: JetBrains Mono (400/500/600/700/800). Used for headings, eyebrows, buttons, navigation, anything that wants to feel "command-line." Fallback: IBM Plex Mono → ui-monospace.
• Body sans: Inter (400/500/600/700). Used for long-form paragraphs only — blog posts, mission statements, anything over ~3 sentences. Mono can be hard to read at length; Inter breathes.
• Pixel display: Press Start 2P + VT323. For 8-bit flavor — section headers, error pages, easter eggs. Use very sparingly; pixel fonts on every page get tiring fast.
• Scale is pixel-pegged (11, 12, 13, 14, 15, 17, 20, 24, 30, 38, 48, 64, 84, 112). The mono scale (--text-md 14px) is one step under the sans scale (--text-base 15px) — mono reads larger optically at the same px.
• Tracking is loose on uppercase labels (--tracking-wider 0.12em, --tracking-mega 0.22em). Tight on display headings (--tracking-tight -0.02em).

Spacing

• 4px grid. Everything snaps to multiples of 4. --space-1 (4) through --space-24 (96). Pixel-art demands the grid.
• Card padding: typically --space-6 (24px). Sections: --space-12 (48px) to --space-20 (80px) vertical.
• Density is terminal-comfortable — closer than a typical marketing site (15-20% tighter), with confidence that the user is technical and can handle information density.

Corners & borders

• Square or near-square. --radius-1 (2px) is the default; --radius-2 (4px) for friendlier UI. Pills (999px) reserved for tags and avatars.
• Buttons and cards have square corners. 8-bit / terminal vocabulary doesn't pill.
• Borders are 1px (--border-width) hairlines in --border (#232936). 2px (--border-thick) only for emphasis. Top-of-card highlights (inset 0 1px 0 rgba(255,255,255,0.04)) give the subtle "raised" feel without a real shadow.

Backgrounds & textures

• Solid dark surfaces are the default. No gradients in body content.
• Optional dot grid (.fu-dotgrid) — 24px lattice of 1px dots at 6% white. Use behind hero sections or as a "workspace" backdrop.
• Optional scanlines (.fu-scanlines) — repeating 2px lines at 1.5% white, opt-in flourish for CRT/retro moments.
• No photo backgrounds. This brand doesn't do stock photography. If imagery is needed: ASCII art, SVG schematics, code screenshots, or commissioned illustrations — never AI-generated stock or generic 3D renders.
• Brand gradient (rare): a radial wash from --forge-flame at ~15% opacity, sized large (1000px+), positioned behind the logo or hero — like the glow off a forge.

Animation

• Fast, snappy, no bounce. 120ms hover, 180ms default, 280ms slow. --ease-snappy for state changes; --ease-out for entrances; never ease-in-back or springy curves — those feel toy-like, wrong for the brand.
• The cursor blinks. A 1.0s steady blink on terminal cursors is canonical.
• Typewriter / type-in animations are on-brand (echo the existing hero's word loop) but should hit terminal speed: ~30–50ms per character, not slow dramatic typing.
• No parallax. No scroll-jacking. Developers hate this.

Hover & press states

• Hover (links / text): brighten color one step — flame red → flame-bright, ink-9 → ink-11, link cyan one step lighter. Underline appears (1px offset).
• Hover (buttons / cards): background lifts one ink step (e.g. --bg-surface → --bg-raised); border goes from --border → --border-strong; flame accent gets --glow-flame-sm.
• Press / active: background goes one step darker (back to canvas), translateY(1px), shadow shrinks. Press feels like keys depressing.
• Focus visible: 2px outline in --accent with 2px offset. Never remove focus rings.

Shadows & elevation

• Borders > shadows. This brand prefers a crisp 1px outline to a soft shadow.
• When a shadow is used (--shadow-1 to --shadow-3), it's combined with a 1px inset highlight on top — gives a "rendered with subpixel craft" feel.
• The signature flame glow (--glow-flame) is the only "decorative" shadow — used on the primary CTA and the logo on dark backdrops.

Layout rules

• Container max-width: 1280px (marketing pages). 1140px (content pages). 720px (long-form prose).
• Section gutters: --space-12 to --space-20 vertical, --space-6 to --space-8 horizontal on desktop.
• Sticky nav at the top is 64px tall, bordered bottom in --border, never floating/glassy.
• Footers are 1-2 columns of mono links, terminal-style, with an ASCII divider above.

Transparency & blur

• Avoid backdrop-filter blur as decoration. It's expensive and reads "iOS app" not "terminal."
• Translucency is OK for modal scrims (rgba(7,9,12,0.7) solid dim, no blur) and for selection (--selection-bg is 35% flame).
• Glass / frosted nav is off-brand.

Card anatomy

• Background: --bg-surface (#11151C)
• Border: 1px --border
• Radius: --radius-2 (4px)
• Inner padding: --space-6 (24px)
• Top inset highlight (1px) for subtle raised feel
• Hover: border → --border-strong, translateY(-1px), flame glow if interactive

Imagery vibe

• Cool, dark, high-contrast. Screenshots of terminals, dashboards, code editors.
• No AI-generated stock. No purple/blue gradient blobs. No "abstract tech" 3D renders.
• No hand-drawn cartoon mascots. (The current forgeutah.tech site uses a hand-drawn dev-at-desk banner — this is template artwork, not commissioned brand asset, and is intentionally not part of this system.)

---

Iconography

The brand currently does not ship an icon set. Their site uses a small handful of inline SVGs (menu, search, social links) and the banner illustration. For this design system:

• Primary icon set: Lucide — open-source, MIT, monospace-friendly 24px grid, 1.5–2px stroke. Loaded via CDN: https://unpkg.com/lucide@latest. Fits the terminal aesthetic and the existing site's icon weight.
• Stroke weight: 1.75px (Lucide default) — feels precise without being thin.
• Color: --fg-muted by default; --accent for active/branded; --info (cyan) for interactive hover.
• Size: 16, 20, 24 px in product UI; 32, 48 in marketing.
• Logo: always use the supplied flame+cog asset. Never reconstruct it from emoji or recreate the flame in SVG. Available variants in assets/:
  • forge-icon.svg — icon-only flame + cog, vector, color-tokenized (cls forge-flame / forge-cog). Use for favicons, avatars, small nav marks, anywhere the wordmark would crowd.
  • forge-logo.webp — flame + cog + "Forge Utah" white wordmark (primary, use on dark backgrounds)
  • forge-logo-darkmode.webp — same as primary, from forgeutah.tech
  • forge-logo-light.webp — variant with dark wordmark for light backgrounds
• ASCII as icon: >, $, ▮, █, ┌─┐, └─┘, ▲▼ are first-class brand glyphs. Use them where Lucide would feel too "polished."
• No emoji in product chrome.
• Unicode arrows (→, ↑, ↓) are fine in dense terminal-style tables.

FLAGGED: The current site appears to use Tabler/Lucide-class outline icons but we did not find a definitive icon library declaration in the source. We're substituting Lucide as the closest CDN-available match. If the team has a preferred icon set or wants to ship a custom one (e.g. with a flame and a cog as part of the family), please flag and we'll swap.

---

Index — what to look at next

File	Purpose
colors_and_type.css	All tokens. Import this first in any HTML artifact.
SKILL.md	Agent skill manifest — drop into Claude Code as a skill.
preview/	Cards rendered into the Design System tab — visual token reference.
ui_kits/marketing/index.html	Click-thru recreation of forgeutah.tech in the new style.
ui_kits/marketing/README.md	Component inventory for the marketing UI kit.
assets/	Logos and the existing banner illustration.

---

Caveats / Flagged substitutions

1. Fonts: We're using Google Fonts for JetBrains Mono, IBM Plex Mono, Inter, VT323, and Press Start 2P. If Forge Utah has licensed a specific monospace (Berkeley Mono, Commit Mono, etc.) please send the .woff2 files and we'll swap.
2. Icon library: Substituted Lucide (CDN). See Iconography section.
3. Visual direction: The existing forgeutah.tech site is light-friendly with hand-drawn illustrations. This system intentionally goes dark-terminal per the brief. If you want a light variant of the system, flag it — most tokens have a light-mode pair worth defining.
4. Logo wordmark: The supplied logo has the wordmark baked in. A separate icon-only mark (flame+cog standalone) would be useful for favicons / small surfaces — flag if you'd like us to extract one.