Design system

The HostMyAI design system.

A living catalogue of tokens and components — structured for extraction by Claude Design.

ds / colours

Colour tokens

--background · Obsidian Core #090A0F

--foreground · Titanium White #F4F6FB

--card

--ink

--primary · Volt Lime #C6FF00

--accent

--signal · Hot Magenta #FF2D87

--success · Mint Pulse #2EE6A6

--muted

--border

--destructive

--muted-foreground

ds / type

Typography scale

Display / 72Live. Dependable. Ready for business.

H1 / 60Live. Dependable. Ready for business.

H2 / 48Live. Dependable. Ready for business.

H3 / 24Live. Dependable. Ready for business.

Body L / 18Secure European hosting for AI-built applications.

Body / 16Secure European hosting for AI-built applications.

Mono / 13deploy --region eu-west --tls

EyebrowSection label

Archivo 800 (display) · IBM Plex Sans (body) · JetBrains Mono (telemetry)

ds / buttons

Buttons

In use across the site

primary
- Home hero — the main call to action
- Header & mobile menu — the sign up / log in button
- Pricing page — the referral call to action
outline
- Home hero — the secondary link
- Pricing cards — CTA on every non-featured tier
- Header — the language switch
signal
- Pricing cards — CTA on the featured tier
- Home page — the highlighted call to action
ghost
- Home page — quiet text links between sections
- Header (mobile) — the menu open/close icon button

ds / badges

Badges

neutralprimarysignal● live✓ 100% EU-hosted✓ GDPRISO 27001 in progress

ds / alerts

Alert cards

Deployment queued

Your app will be live in about two minutes.

Guardrails passed

All 42 security checks completed.

Dependency warning

One package has a moderate vulnerability.

Secret detected

An API key was found in source code and has been moved to the vault.

ds / code

Code blocks

prompt

Using HostMyAI, put this app live with logins and daily backups.

mcp.json

{
  "mcpServers": {
    "hostmyai": {
      "url": "https://mcp.hostmyai.eu",
      "apiKey": "$HOSTMYAI_KEY"
    }
  }
}

ds / layout

Layout components

Ruled grid

Card A

Hairline-divided cell.

Card B

Hairline-divided cell.

Card C

Hairline-divided cell.

Telemetry block

node eu-west-ams-02

● uptime 99.98% · tls ok · backup 03:00

▲ 1 advisory pending

Pillar

Guardrails

Top-ruled feature column.

Ink panel

Statement or founder quote.