Brand, color, and typography for dev10x.guru. Paste this URL to an AI agent to build presentations, landing pages, or artifacts that match the site.
Five rules that decide every trade-off. Reference these before adding color, shadow, or a new component.
Dark surfaces signal brand moments: hero, terminal, pipeline, conversion. Light surfaces carry information-dense reading: feature lists, explanations, guides. Never an all-dark page.
Fira Code carries every functional surface — nav, buttons, kickers, code, stats. Space Grotesk is reserved for display headlines where personality earns its keep.
Phosphor green is a spotlight — primary CTA, prompt glyph, the stat figure, successful state. Never a large fill. A darker phosphor is used for the same role on light surfaces.
1px hairline borders define card edges. Shadows appear only on terminal/code blocks to separate them from the canvas. Rounded cards never nest.
No gradients used as primary treatment. No emoji. No Inter-as-personality. No purple SaaS gradients. No card-on-card. No rounded-corner-with-left-border-accent tropes.
Warm near-black canvas, cool off-white text. Never pure black. Hairline borders carry edges — shadows only on terminal blocks.
Warm off-white, not stark. Used for information-dense sections — feature lists, guardrail grids, article bodies. Same ink hue as the dark canvas, inverted.
Phosphor green is the spotlight — one per view. Amber for scarcity signals. Terminal blue for hyperlinks in code. Borders are always hairlines.
Dark sections never sit flat. Two overlays give them presence without competing with content — a subtle grid on every dark section, plus an atmospheric aurora on the hero.
80px grid at 3.5% white, radial-masked to fade at the edges. Paired with phosphor + amber aurora radials. Once per page, on hero-sized surfaces.
64px grid at 2.5% white, no mask, always on. Applied to every dark section except hero — Pipeline, Demo, Install, Footer. Stops the canvas reading as a void.
Fira Code everywhere the interface does work. Space Grotesk only in display headlines — hero title, section h2, pull-quote.
Patterns reused across the site. Copy them verbatim — don't invent new affordances for known jobs.
Supporting copy. Kicker is Fira Code, uppercase, letter-spacing 0.18em, in phosphor. Headline is Space Grotesk at -0.02em.
The same tokens scale to pitch decks — the deck rebuilt here uses exactly the same aurora, grid texture, typography, and green-to-citrus headline gradient as the home hero.
.hero-accent-green-citrus gradient — the same class rendered on the site hero and quote cards.
Sections alternate dark and light. Dark carries brand moments and terminal content; light carries reading. Never stack two adjacent surfaces of the same family.
Quick-reference rules. When in doubt, pick the pattern already used on the home page.
Paste this block into the agent's prompt to anchor design decisions. Keep it short; the agent will infer the rest from the page above.
Design system: dev10x.guru
Reference: https://dev10x.guru/brand
Stack Astro + Tailwind CSS v4. CSS variables in @theme.
Fonts Fira Code (mono, 400–600) · Space Grotesk (display, 300–700).
Mood Terminal / dev-native. Dark for emphasis, light for reading.
Palette
--color-bg #151B21 dark canvas (hero, pipeline, install)
--color-surface-deck #0E131A dark cards, code blocks
--color-page-light #FAFAF7 light canvas (features, guardrails)
--color-page-light-2 #F2F3EF raised light (guardrail cards)
--color-fg #F4F8F5 text on dark
--color-fg-body #E6EDE7 body on dark
--color-ink #0B0D0C text on light
--color-ink-body #14181C body on light
--color-phosphor #6EE7A3 primary accent on dark
--color-phosphor-dark #0F7A3F primary accent on light
--color-warn #F8B36B amber scarcity / limited-time
--color-info #7DD3FC terminal blue (rare)
Primary CTA on dark
bg: --color-phosphor · fg: --color-bg · font: Fira Code lowercase
leading glyph: ❯ · radius: 6px · hover: brightness 110
Primary CTA on light
bg: --color-phosphor-dark · fg: --color-page-light · same shape
Kicker (section label)
font: Fira Code · 15px · 500 · letter-spacing 0.18em · uppercase
color: --color-phosphor (on dark) or --color-phosphor-dark (on light)
leading glyph: ❯
Display headline (h1, h2)
font: Space Grotesk · weight 600–700 · letter-spacing -0.02em
color: --color-fg or --color-ink
Body / meta / nav / code
font: Fira Code · weight 400 · letter-spacing 0
Rules
1 Dark for emphasis, light for reading. Never all-dark pages.
2 Mono spine, sans heart — Fira Code does work, Space Grotesk does display.
3 Phosphor spotlight, one per view. Never a large fill.
4 Hairline borders. Shadows only on terminal blocks.
5 No emoji. No gradients as primary treatment. No purple SaaS. ❯ or nothing.