Forge — UI, generated (electric-dark dev-tool)
A premium electric-dark developer-tool SaaS landing page for an AI design agent: obsidian near-black surfaces lit by a single acid-green accent, a sticky glass nav, terminal/code mock hero, logo cloud, workflow code panel, 3-column feature grid, alternating product shot, 3-tier pricing, glowing CTA band, and a mega footer.
Summary
A premium electric-dark developer-tool SaaS landing page for an AI design agent: an obsidian near-black canvas lit by a single acid-green accent, a sticky glass nav, a code/terminal mock hero, a logo cloud, a workflow code panel with surface tabs, a 3-column line-icon feature grid, an alternating product-shot section, a 3-tier pricing block, a glowing CTA band, and a mega footer.
Style
Electric-dark dev-tool aesthetic: obsidian near-black surfaces, one acid-green accent used as glow, faint grain texture, monospace code framing, terminal traffic-light syntax color. Premium, engineered, never generic.
Layout & Structure
A long single-column landing page, content centered in a ~1180px max-width container with px-6 gutters and faint vertical guide lines. Sections stack: sticky nav, hero (split copy + code panel), logo cloud, workflow code section, feature grid, alternating product shot, pricing, CTA band, mega footer. Each section is separated by a 1px #26262f hairline.
Sticky nav
Hero
Hero code panel
Logo cloud
Workflow section
Workflow code panel
Feature grid
Alternating product shot
Pricing
CTA band
Mega footer
Components
Acid primary button
The single signature CTA.
Terminal code panel
The hero and workflow code mocks.
Acid eyebrow
Section kicker.
Glowing diamond logo tile
Brand mark.
Status pill
Footer trust signal.
Special Notes
Keep the accent strictly acid-green #22e584 (with #13c46d for depth); avoid the generic indigo/violet/blue SaaS gradient. Every surface is a layered near-black (#0a0a0f / #14141b / #1b1b24) with a single #26262f hairline for all borders and dividers. Code blocks must stay legible with the terminal syntax palette and real-looking generated code. Use the grain + acid radial glows sparingly (hero, CTA) so they read as light, not noise. Icons are thin 1.6-weight line icons (Phosphor-style) in acid or zinc. Responsive: the hero, workflow tabs, feature grid, product shot, and pricing all reflow gracefully from desktop to tablet to a single mobile column; the center nav collapses below lg. No em-dashes in any copy.