The ohmyho.st
design system.

Everything needed to build a page, a deck, a thumbnail or a post that looks like it came from the same company. Copy the tokens, use the components, fill the templates.

01 — brand

What we are

One provider for hosting, Postgres, email, a domain, AI models and backups. Ten dollars a month, for every project you build — not per project. Driven by an agent through one MCP, with no dashboard.

The one idea

Bundling at Aldi prices. Everyone else sells the parts separately and charges per project. We buy in bulk, bundle, and add a small margin. Every piece of communication should be traceable back to that sentence.

Positioning statement

Personality

• Blunt, not rude. Short sentences beat clever ones.
• Cheap and proud of it. Never apologetic about the price.
• Technical without jargon. A price list, not a whitepaper.
• Honest to the point of naming who we're worse for.

02 — voice

The test

Read it out loud. If it sounds like a person who got an invoice they didn't like, it's right. If it sounds like a conference booth, rewrite it.

03 — logo

The wordmark is set in JetBrains Mono, weight 400, tracking −0.02em. The domain suffix always drops to --subtle. The period stays with the suffix — the joke only works if you can see the split.

<span class="mark">ohmyho<i>.st</i></span>

.mark{font-family:var(--mono);letter-spacing:-.02em}
.mark i{font-style:normal;color:var(--subtle)}

Clear space & minimums

• Clear space on all sides: the height of the wordmark.
• Minimum size on screen: 13px. Below that, drop the suffix colour split.
• Never stack, outline, rotate, add a symbol, or place on a busy photo.

Tagline lockup

04 — color

The palette is monochrome on purpose. Colour carries meaning, never decoration: green means it worked, amber means look, red means it broke. If a colour isn't saying one of those three things, it's grey.

Dark (default)

Light

Semantic only

Partner brand colours (Zapier orange, n8n pink, Postgres blue) appear only inside logo tiles. They never leak into UI.

:root{
  --background:#FFF; --foreground:#09090B; --card:#FFF;
  --muted:#F4F4F5; --muted-foreground:#71717A; --subtle:#A1A1AA;
  --border:#E4E4E7; --border-strong:#D4D4D8;
  --primary:#18181B; --primary-foreground:#FAFAFA;
  --ok:#16A34A; --warn:#B45309; --bad:#B91C1C;
}
:root[data-theme="dark"]{
  --background:#000; --foreground:#F0F1F2; --card:#0A0B0D;
  --muted:#0C0D10; --muted-foreground:#83878D; --subtle:#3E4247;
  --border:#17181A; --border-strong:#26282C;
  --primary:#F0F1F2; --primary-foreground:#000;
  --ok:#4CAF8F; --warn:#D9A441; --bad:#E06C63;
}

05 — typography

Two families, no exceptions. Space Grotesk for everything human. JetBrains Mono for anything a machine produced: the wordmark, commands, prices in tables, labels, timestamps, units.

The gradient rule

Headlines may fade from --foreground at 42% to --muted-foreground at 100%. Only on display sizes, only on one heading per view, and always with extra line-height — a tight leading clips descenders.

.fade{
  line-height:1.06; padding-bottom:.12em;
  background:linear-gradient(180deg,var(--foreground) 42%,var(--muted-foreground) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

06 — space & shape

Spacing scale

Section rhythm on the site: 112px desktop, 80px mobile. Card padding: 26px. Never invent a value between steps.

Radius — three values, that's all

Borders, not shadows

Depth comes from a 1px hairline and a change in surface brightness. The only shadow in the system is under a floating element (toast). Cards never drop shadows.

07 — motion

• Reveal — 800ms, cubic-bezier(.2,.7,.3,1), 18px rise, 85ms stagger between siblings.
• Hover — 200ms, colour and border only. Nothing moves or scales.
• Draw — 1050ms stroke-dashoffset for diagram lines, 60ms apart.
• Data — numbers count up over 950ms with an ease-out cubic. Only for prices.
• Loop — particles along paths, 1.6–3.4s. Slow enough to ignore.

.up{opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.up.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .up{opacity:1;transform:none;transition:none}
}

Every animation must have a reduced-motion fallback that shows the end state. Non-negotiable.

08 — buttons

Dark pill, hairline border, chevron for navigation. No solid white slabs — they shout on black and break in light mode.

.btn{display:inline-flex;align-items:center;gap:8px;
  background:var(--muted);color:var(--foreground);
  border:1px solid var(--border-strong);padding:11px 20px;
  border-radius:999px;font-size:14px;font-weight:500;cursor:pointer;
  transition:background .2s,border-color .2s}
.btn::after{content:"›";color:var(--muted-foreground)}
.btn:hover{background:var(--background);border-color:var(--muted-foreground)}

09 — badges

Unearned claims are greyed and prefixed soon. Never show a certification badge you don't hold.

10 — cards

The winning card gets a foreground border plus a 3px muted ring — permanently, not on hover. One highlighted card per comparison.

11 — cell grid

The default way to show a set of peers: logos, destinations, supported runtimes. One outer frame, hairline dividers, no gaps, no individual boxes. This is what keeps a long page from looking like a pile of components.

.cells{display:grid;gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:22px;overflow:hidden}
.cells > *{background:var(--background);padding:22px 14px;
  transition:background .22s}
.cells > *:hover{background:var(--muted)}

12 — terminal

Our signature object. Used whenever we show what the agent does. Zones separated by hairlines, each with a mono label. Never fake output that the product can't produce.

13 — controls

Sliders use a 3px track in --border-strong and a 17px foreground thumb. Toggles turn --ok when on, never blue.

14 — diagrams

One visual language for every system drawing: sources on the left, the hub in the middle, outputs fanning right. Hairline bezier curves, 2.5px dot nodes, boxed labels for named things, particles travelling along the paths.

Diagram rules: no arrowheads, no drop shadows, no colour except the hub glow. Labels always lowercase mono.

15 — icons

Outline only, 24×24 grid, 1.6–1.7 stroke, round caps and joins, currentColor. Rendered at 16–20px. No filled shapes, no duotone, no emoji anywhere in the product.

16 — slides 16:9

Canvas is 1920×1080. Safe margin 120px. One idea per slide. Four layouts cover almost everything.

Slide rules

• Margin 120px. Nothing outside it, ever.
• Headline max 4 words per line, max 3 lines.
• One wordmark per slide, bottom left or bottom right — pick one and keep it.
• Body text never below 28px at 1920 width.

17 — YouTube

Thumbnail 1280×720. Readable at 210px wide — that's the only test that matters. Max five words, minimum 90px type.

Thumbnail rules

• Black background always. It is the only channel where that's a differentiator.
• Never put the wordmark bigger than the headline.
• No faces, no arrows, no red circles. The number is the hook.

18 — LinkedIn

Link image 1200×627, square post 1080×1080. Assume it's read at 400px on a phone in a grey feed — the black frame does the work.

Carousel

Square, 6–8 slides. Slide 1 is the claim, slides 2–6 one fact each, last slide is the command and the wordmark. Same margins as the deck, scaled: 90px on 1080.

19 — Instagram

Feed 1080×1080 or 1080×1350. Same system, more air, fewer words. The mono label at the top acts as the visual signature.

20 — story / reel

1080×1920. Keep everything inside the middle 1080×1420 — the top 250px and bottom 250px are covered by the platform UI.

21 — exporting

Every template above is real HTML at real pixel size, scaled down with transform: scale(). To export:

• Set the wrapper's scale to 1, open the file in a browser, screenshot the canvas at device pixel ratio 2 — or
• Use a headless shot: npx playwright screenshot --viewport-size=1280,720 file.html shot.png — or
• Print to PDF at exact page size for decks, then place in Keynote or Figma.

<!-- swap the scale factor to 1 before exporting -->
<div class="canvas" style="width:1280px;height:720px;transform:scale(1)">
  …
</div>

22 — writing rules

• Number first. "$10 a month" beats "affordable pricing" every time.
• Name the competitor when the comparison is the point. Never sneer at them.
• Two-part headlines. A fact, then the twist. "They charge per project. We don't."
• Lowercase mono for machine words: commands, labels, domains, units.
• No hedging. Cut "simply", "just", "basically", "seamlessly", "powerful".
• State the limit. Every claim page gets one honest sentence about who it's wrong for.
• Sentence case everywhere. Never Title Case Like This.

23 — don'ts

ohmyho.st design system v1 · Space Grotesk + JetBrains Mono, both open source · tokens follow the shadcn/ui naming convention so any component from that ecosystem drops in unchanged.