Design system · Cobalt structure, brand orange

Colour, type, and components

The locked system for Serversinc's Sept 1 redesign: modern-minimal genre, Cobalt's structure (hairlines, code-as-hero, tight radii) retinted to our brand orange (#ff6900). Space Grotesk for display, Inter for body, JetBrains Mono for code and labels. One brand-orange signal accent, hairline borders, tight radii. Full spec in design.md at the project root. Tracked in lander#2.

Colours

OKLCH tokens. The accent is used sparingly, under 5% of any viewport.

Paper

--background

Card

--card

Ink

--foreground

Muted

--muted-foreground

Rule

--border

Accent (brand orange)

--primary

Graphite

--graphite

Success

--success

Destructive

--destructive

Typography

Space Grotesk (display) · Inter (body) · JetBrains Mono (code, labels)

Display XL

Heading / H2

Heading / H3

Heading / H4

Body text in Inter. Deploy, start, stop, and restart containers directly from the dashboard. Forget manual CLI commands, control your Docker apps across servers in one place.

Muted / secondary body text, used for descriptions and captions.

Mono label / eyebrow

Buttons

One solid brand-orange primary. No pills, 6px radius. Hover, keyboard focus, and active states are live on this page.

Badges

Default Secondary Outline Destructive

Inputs

Email

Disabled

Error

Enter a valid email address.

Success

Looks good.

Cards

Depth comes from the hairline border, never a drop-shadow.

Run commands remotely

Execute shell commands on your servers without SSH.

Terminal

Real-time metrics

Monitor CPU, memory, disk, and network across all servers.

Monitoring

Alerts

Get notified via Slack, Discord, or webhooks.

Notifications

Code card

Cobalt's signature move: code as the hero. Dark graphite, hairline-framed, one status chip.

deploy.sh

200 OK

$ serversinc deploy --app api --server prod-1
✓ pulled ghcr.io/acme/api:latest
✓ container started (0.9s)
✓ health check passed

Nav & footer

The bordered top nav and single-line footer on this page are the real, live components, not a mockup. Nav links, the ⌘K command palette, and the primary CTA ship in the page-rebuild follow-up (out of scope for this design-system pass).