Oxide Computer Company

An original Basalt homepage: a 60px translucent nav with a Phosphor wordmark, six uppercase mono items and a ghost Try now beside a Deep Teal Talk to us; a first screen with a tabbed CLI terminal panel top left, a hairline connector trace running to a 570×678px HTML-drawn cabinet of glowing green drive sleds with a Fig. 1 chip, a right-gutter dot field and a two-line 65px Bone headline anchored bottom left; and a ruled strip of invented wordmarks at the fold. Below: a two-tone platform lead over a triptych, a four-column capability grid of HTML instruments, a two-options comparison with dashed floorplans, a governance card grid, a console window, a newsletter row, a workloads grid and a Carbon footer.

• Best forInfrastructure hardware, on-prem and sovereign cloud, data-centre and deep-tech products — any technical company that wants an engineering-document first screen where the product itself provides the only colour.
• Tech stack- Next.js (App Router) - React - TypeScript - CSS custom properties Use Next.js App Router, React and TypeScript with plain CSS custom properties for every colour, radius and spacing token. Render the page as a server component; it needs no client JavaScript. Self-host Inter (400) and Geist Mono (400), both under the SIL Open Font License, as woff2 files through next/font/local — no remote font request. Draw the cabinet, drive sleds, fan grilles, connector trace, dot field, floorplans, instruments and the console as HTML, CSS and inline SVG, never an image or canvas, so every render is identical. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Oxide Computer Company" kickstart — A rack-scale cloud homepage: a near-black machine room, a mono-labelled terminal panel wired by a hairline trace to a cabinet of glowing green drive sleds, a two-line 65px headline in one weight, and a single deep-teal button.

## Design
Build a rebrandable landing page for an on-premises cloud computer: compute, storage, networking and the software that runs them, shipped as one rack a team owns outright and operates like a public cloud.

Create a complete landing page for Basalt, a fictional rack-scale cloud company. This is a concept presentation, not a real company — no real product, customer, person or logo. Use original branding, artwork and copy throughout.

Color: a near-black machine room lit only by status lights. Void #0B0E12 is the page and every band. Carbon #181A1D fills the terminal panel, cards, badges and the footer; Graphite #1F2124 is the elevated layer inside cards and the nav's bottom hairline. Slate #303235 is every structural line — borders, dividers, the connector trace, the dot field and the ghost button outline. Bone #DEDEDE is headlines and the lightest ink; Silver #BABABB is body copy and terminal commands; Ash #A3A4A5 is navigation and links at rest; Steel #818284 is captions, figure labels and secondary sentences; Fog #5D5E61 is the terminal prompt, chevrons and the logo strip label. Deep Teal #002923 is the only filled button background, always with Phosphor #00D892 text; Phosphor #00D892 also marks the wordmark's first glyph, the active tab, status badges and the cabinet's drive LEDs — never a large fill. Emerald #005441 is the hover state of Deep Teal. Syntax Violet #C58AFF and Syntax Coral #FF6285 appear only inside code. No gradients behind text, no drop shadows: depth is tonal stepping plus 1px Slate lines.

Typography: headings use "Inter", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif at weight 400 only — the hero headline 65px/65px at -1.625px, section headings 36px/42px at -0.36px, lead sentences 25px/32px at -0.2px; body copy is 16px/22px at 0.336px and small print 12px/16px at 0.5px. Every technical label — navigation, buttons, tabs, badges, figure captions, the logo strip label — is "Geist Mono", ui-monospace, Menlo, monospace at 400, 12px/16px (tabs 11px/16px) with 0.64px tracking in uppercase; terminal code is the same mono at 13px/16px with no tracking. Never bold anything: hierarchy comes from size, colour and tracking.

Layout: a 1440px viewport. The first screen runs edge to edge with 40px gutters (x 40 to x 1400); every band below it centres a 1200px column (x 120 to x 1320) with 120px between bands. Radii: 2px for buttons and badges, 4px for the terminal panel and cards, 1px for figure chips.

Navigation: a 60px bar on rgba(11,14,18,0.85) with a 1px Graphite bottom hairline. At x 40 the wordmark basalt in 26px Inter, letter-spacing -0.5px, all in Phosphor. From x 430, six 32px mono items with 12px side padding — Product, Platform, Docs, Company and Field Notes each with a 12px Fog chevron, then Blog. Right, ending at x 1400 and 8px apart: Try now, a ghost button with a 1px Slate border and Ash text, and Talk to us, a Deep Teal button with Phosphor text; both 32px tall with 12px padding.

Hero (id top): the first screen, 840px under the nav. Top left at (40, 100): a 396×251px terminal panel — Carbon, 1px Graphite border, 4px radius. A 40px tab row with a 1px Slate bottom line holds CLI, API and Console in 11px mono; CLI is Phosphor with a 1px Phosphor underline, the others Steel; at the row's right end a 64×10px and a 10×10px Slate placeholder bar. In the panel's lower half, 13px mono lines 16px apart: ~> basalt login (prompt in Fog, command in Silver), Paste device code in Fog, QF7R-2KDN in Silver, an empty line, then ~> basalt vm create with an 8px Fog block cursor. From the panel's right edge at y 225 a 1px Slate connector runs 120px right, drops diagonally to y 357 and runs on to the cabinet. At (1183, 148), right-aligned to x 1400: a 22px figure chip — 1px Slate border, 1px radius, Fig. 1 in Steel mono — and beside it BASALT CABINET in Steel mono. From (830, 188) a 570×678px cabinet drawn in HTML and CSS that runs past the fold: a #050608 body with a lighter Graphite top edge, three bays split by Carbon posts, each bay two columns of twelve drive sleds whose fronts are rows of 3px vertical Phosphor fins at 70–100% opacity, a band of Steel fan grilles across the middle of each bay, and a small Phosphor basalt wordmark set vertically on the right side panel. Along the right gutter, a 40px-wide field of 2px Slate dots on a 6px grid. Anchored bottom left at (40, 560): the 720px two-line headline A private cloud that / ships as one machine. in Bone.

Logo strip: at y 758 a 1px Graphite line runs the full width; over it at x 40, on a Void patch, the label Running in these server rooms in Fog mono. At y 800 a row of nine 36px original wordmarks in Steel and Fog — Kestrel Bio, ORRIN LABS, Vantage Physics Lab, Carrow Energy, Halvard, Sable Grid, Meridian Health, NORTHFIELD, Tamsin — 48px apart, the row starting off the left edge and running past the right.

Platform (id platform): a 25px lead set in two tones — One machine, start to finish. in Bone, then Compute, storage, networking and the software that runs them, designed together and racked in a day. in Steel, then Yours to keep. in Bone — over a 1200×528px triptych: a Carbon panel holding a 226px status card (Cabinet 4 in Silver, PROVISIONED in Phosphor mono, a full-width Deep Teal Sign in with SSO bar), a dim cabinet-front drawing, and a pale #DEDEDE room with a single cabinet drawn in HTML. Beneath it, on the left, a 16px Silver paragraph whose key phrases switch to Bone.

Capability grid (id capabilities): a 1px Slate rule, then four 285px columns 20px apart — Elastic compute, Private networking, Measured power, Mirrored storage — each a 12px mono Steel heading with a ▸, a 220px Carbon card holding a small HTML instrument (a Phosphor allocation grid; an allow/deny rule table with Deep Teal TCP chips; a Phosphor power trace with a sensor list; a two-tone capacity bar), and three 12px lines whose first words are Silver and the rest Steel.

Two options: the 36px heading For years there were two ways to run compute. Both cost something. — the last sentence in Steel — then two 590px panels split by a 1px dashed Slate rule: On-prem, the old way and Rented cloud, each with a Steel subtitle, a dashed-line floorplan drawing (the left one tracing a Syntax Coral path to a STATUS FAULT 0x3E1 label in mono), and four bulleted 14px lines whose lead words are Bone.

Governance: the 50px heading The pace of the cloud, / the control of your own racks., then a 2×2 grid of 590px Carbon cards — Trusted from boot, Built for developers, Lower, flatter costs and Racked by the afternoon — each with a 18px Bone title, a 14px Steel line and an HTML vignette: a Root of trust card with a Phosphor UNLOCKED badge, a Terraform terminal beside a Phosphor-on-Deep-Teal resource block, a COMPUTE / STORAGE / NETWORK checklist over a Deep Teal step chart, and a rack-init log beside a cabinet drawer.

Console (id console): the 50px heading The biggest leap for / on-prem in a decade, a Fig. 2 Basalt Web Console chip, then an HTML console window: a 200px Carbon sidebar (Projects, Images, Instances active in Phosphor, Disks, VPCs, Settings) and an Instances table with Name, CPU, Memory, State and Created columns, RUNNING chips in Phosphor on Deep Teal and STOPPED in Steel, with a floating Create instance dialog.

Newsletter: a single row on a 1px Slate top rule — Field notes from the machine room in 18px Bone on the left, a 480px email field with a 1px Slate border and a Deep Teal Subscribe button on the right.

Workloads: the 50px heading Built for the work that stays in-house, then a 3×2 grid of Carbon cards with a 1px Graphite border — Cloud exit, Virtualisation exit, Machine learning, Scientific computing, Sovereign data, Build runners — each an 18px Bone title with a Phosphor ▸ over 14px Steel copy.

Footer: Carbon, four columns of 14px Ash links under 14px Steel headings with 12px row gaps, the basalt wordmark and © 2026 Basalt Systems in Fog mono.

## Tech stack
- Next.js (App Router)
- React
- TypeScript
- CSS custom properties

Use Next.js App Router, React and TypeScript with plain CSS custom properties for every colour, radius and spacing token. Render the page as a server component; it needs no client JavaScript. Self-host Inter (400) and Geist Mono (400), both under the SIL Open Font License, as woff2 files through next/font/local — no remote font request. Draw the cabinet, drive sleds, fan grilles, connector trace, dot field, floorplans, instruments and the console as HTML, CSS and inline SVG, never an image or canvas, so every render is identical. Provide page metadata. Build and run the production page before capturing its preview.
Where the repo you are working in already has an equivalent in place, keep the repo's choice and say which one you kept.

## Everything else
Keep Basalt clearly fictional and rebrandable: no real company, customer, laboratory or person — every wordmark in the logo strip is invented and set in type, and no hardware photograph or vendor logo is reproduced. Keep one filled call to action per screen: Deep Teal #002923 is the only button fill and always carries Phosphor #00D892 text; Phosphor is never a section or card background. Text pairs clear WCAG AA: #DEDEDE, #BABABB, #A3A4A5 and #818284 on #0B0E12 and #181A1D, and #00D892 on #002923. Every link leads to a real anchor on the page, and the page loads no analytics or tracking script and shows no cookie banner. Content is initially visible; the terminal shows a finished session rather than typing, the logo strip stays static, buttons shift to Emerald #005441 or Bone text over 150ms on hover, and every transition stops for prefers-reduced-motion. Every control shows a 2px #00D892 focus ring with a 2px offset. The cabinet, connector, dot field, floorplans and console are hidden from assistive technology. At 360px the nav keeps the wordmark, Talk to us and a Menu button, the headline drops to 40px/42px at -1px and sits above the terminal, the cabinet moves under the headline at full width, the logo strip scrolls horizontally inside itself, every grid stacks in one column, and the page never overflows horizontally.

### Non-negotiables
- Responsive from 360px through desktop — no horizontal page overflow at any width. Deliberately scrollable regions stay within the viewport and remain keyboard and touch accessible.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.