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

Hosting for vibe-coded apps: managed Postgres, transactional email, custom domain connections and on-demand SQL exports. One shared credit balance, with agent-led deployment and a portal for projects, credits and budgets.

The one idea

One balance across your projects. Usage is metered, with no per-project base subscription. Competitor comparisons must distinguish their actual plans, seats, compute and usage charges.

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 Ω mark and ohmyho.st wordmark are one identity. The wordmark uses JetBrains Mono at weight 400; the mark works on its own at small sizes. Always spell the brand ohmyho.st. The short forms are omh and omh.st.

ohmyho.st

Construction, space and size

• The mark uses a 100 × 100 grid, a 12.5-unit stroke, rounded caps and joins.
• Leave at least one stroke width clear on every side.
• At 20 pixels or smaller, use the thicker 15-unit favicon variant.
• Keep the original proportions; use the light mark on dark surfaces and the dark mark on light surfaces.
• Do not rotate, distort, outline, add gradients or combine the mark with a cube.

Downloads

Every file is served from /brand/assets/. Use the light mark on dark surfaces and the dark mark on light surfaces.

Logo, black on white · PNG 1024

Logo, white on black · PNG 1024

Logo and wordmark

• Mark, transparent: light SVG · dark SVG · light PNG · dark PNG
• Wordmark with mark, 1600 × 400: on white · on black · black, transparent · white, transparent
• App icon, rounded tile: dark SVG · light SVG · dark PNG 512 · light PNG 512
• Favicon and touch icon: SVG · ICO · touch icon

Social images

Each format exists on black and on white. Sizes are the platforms' recommended pixel sizes.

The social files are PNG because their type is set in the brand fonts. Regenerate them with node scripts/brand-assets.mjs.

Motion

The mark stays recognizable throughout movement. Finish the homepage's finite introduction before revealing its primary action, keep ambient particles independent, and respect reduced-motion preferences.

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. Primary prompt actions may use a high-contrast pill; secondary controls use hairline borders.

.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

Certification goals must be labelled planned and must not appear as attained credentials. A roadmap label is not a certification.

10 — cards

The featured card gets a foreground border plus a 3px muted ring — permanently, not on hover. One highlighted card per comparison. Example base plans: Vercel Pro, Supabase Pro and Resend Pro; list prices checked 2026-09-28. Vercel · Supabase · Resend. ohmyho.st: $10 per month for 1,000 shared credits; usage consumes credits and applicable taxes are extra.

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 or duotone. Use outline icons for controls; retain the existing roadmap vote symbols.

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.
• Keep ohmyho.st clearly identifiable; competitor names must remain part of a specific comparison.
• 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. "One balance. No per-project base fee."
• 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.