Okmand

One container, one rhythm, two layouts.

Everything on the landing page is built from the tokens and components below, and the app shares the same colours, type and icons. If something is not here, it should not be on a page.

Rules what keeps it aligned and calm

One container

1120 px wide, 24 px gutters. Every block starts and ends on its edges. Only running text (the FAQ) is narrower, and it is centred.

Two layouts

A row of three cards, or a split card with a text half and a stage half. The six-column footer sits on the same grid.

Colour is small

Surfaces are neutral and flat. Colour appears in icon boxes, chips, dots, markers, code and the signature stroke.

  • No gradients on cards, no coloured shadows or glows.
  • No eyebrow labels above section headings.
  • No underline or highlight effects in headings.
  • No square corners on landing buttons: always pills.
  • No icon off-centre in its box; no title wrapping in one card and not its neighbours.
  • No jargon outside the developer section; no claim that is not true today.

Neutrals surfaces, borders, text

Accents flat, used at small sizes; each has one job

Type Geist, self-hosted; weight 500 for display, 400 for text

display · 36–70 · 500
Sign it off
h2 · 28–50 · 500
You stay in control.
h3 large · 30 · 500
One connection. Any agent platform.
h3 · 21 · 500
Limits that hold
lead · 19
The right person approves it on their phone.
body · 16
Agents prepare. A named person decides.
small · 14
Used only to answer you.
mono · 12.5
sha256 9f2c 81d4 77e0 3b5a · 14:03:11

Headings may mute their second half with the tertiary grey. They never carry an underline, a highlight or an eyebrow.

Spacing 4 px base

Radius three values only

14 inner
22 card
pill

Controls buttons, chips, icon boxes, segmented control, switch

Request a pilot See how it works Sign Talk to us Sign in Reset
Start hereRefusedAsksWalletExpires soonNeutral
Icon box: 40 px, radius 12, tint 14%, icon 18 px, centred.

Card row icon box, title, text, footer; all four share lines across the row

One switch stops everything

One or two sentences. The footer row below always sits on the same line across the row.

All agents3 running

Limits that hold

Shorter text.

4 342 500 Ft10 000 000 Ft

No authorisation, no action

A card may also have no visual in its footer, only a row.

3 400 000 Ft orderRefused

Split card text half padded 48, stage half on the dot pattern; may be mirrored

Text half

Heading, one paragraph, a short list. Vertically centred.

  • List item
  • List item
Stage half

Product visual goes here

RowValue
RowValue

Comparison one card, three equal columns, every row the same height

Approve buttonOkmand
What it isA clickA legally valid signature
The recordWith the vendor, editableTamper-proof, and yours

Facts row vertical dividers; text lines up with card text below

< 20 sfrom notification to signature
0 AIinvolved in the decision
27 EUcountries recognise this signature

Accordion as a card for grouped detail; as plain lines for the FAQ

Card rowIcon box, title and a one-line hint

Content sits on the same 28 px padding as the row.

Second rowRows are divided by a hairline

More content.

FAQ question in plain words?

Answer in two or three sentences.

Another question?

Another answer.

Code six syntax colours taken from the accents; line numbers; tabs; result line

// commentconst receipt = await gw.waitForApproval(req.id);{ "total": 1250000, "currency": "HUF" }
201 · status pending

Form field label above, 44 px input, blue focus ring, message below

Please tell us your company.

Used only to answer you. No newsletter, no tracking.

Thank you.

Success replaces the form in place.

Phone frame iPhone-like: 2.07 to 1, metal edge, side buttons, island, status bar, home bar

Purchasing agent asks
1 250 000 Ft
Purchase order · Papírgyár Zrt.
Your limit2 000 000 Ft
Used this month43%
Sign
Reject