SendHawk.Online

Brand and components

Design manual

The rules of the public website, rendered by the components the pages actually use. Change a component or a token and this page and every public page change with it.

Logo and mark

Always BrandMark and BrandWordmark. Never redraw the mark, recolor it or set the name in another face.

BrandMarkBrandWordmarkAppLogo
SendHawk.Online
SendHawk.OnlineSendHawk.Online

Color

Components name a role, never a value. Ember is the brand, neutrals carry text and surfaces. A dark band re-scopes every role, so one component works on both grounds.

app/assets/css/main.cssapp/app.config.ts

Ember scale (primitives, main.css only)

50
100
200
300
400
500
600
700
800
900
950

Light ground

  • bg-default
  • bg-muted
  • bg-elevated
  • bg-accented
  • bg-inverted
  • Aatext-highlighted
  • Aatext-default
  • Aatext-toned
  • Aatext-muted
  • Aatext-brand
  • bg-primary
  • bg-brand-fill
  • text-brand-fill-deep
  • border-default

Dark ground

  • bg-default
  • bg-muted
  • bg-elevated
  • bg-accented
  • bg-inverted
  • Aatext-highlighted
  • Aatext-default
  • Aatext-toned
  • Aatext-muted
  • Aatext-brand
  • bg-primary
  • bg-brand-fill
  • text-brand-fill-deep
  • border-default

Typography

The display face for marketing headings only, the sans for reading, mono for anything a machine reads.

--font-display--font-monoBrandHeading
size="display"

Transactional email for developers

size="section"

One request. Everything after it, handled.

size="sub"

Signed and sent

text-lg text-toned

The same deliverability as the big players, at half the price. Simple API, fair pricing, no surprises.

text-sm text-muted

3,000 emails a month free. No card required.

font-mono text-brandPOST /api/emails

Spacing

An 8 px grid. Bands sit 128 px apart; blocks inside a band 24 to 64 px.

8 px
16 px
24 px
32 px
48 px
64 px
128 px

Buttons

One primary action per view. Ghost for the second path, inverse on the brand fill block.

BrandButton
Start for freeRead the docs
Start for freeRead the docs
Start for free

Section heading

Every band opens with BrandHeading: an optional mono kicker, the title, one line of context.

BrandHeadingBrandSection

POST /api/emails

Your first email is one request away.

Send raw HTML, or a saved template with variables. Use any language that can make an HTTP call.

Code window

Real, runnable requests only. Strings are highlighted, nothing else.

BrandCodeWindowapp/utils/brand-samples.ts
curl https://sendhawk.online/api/emails \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{
    "from": "hello@yourapp.com",
    "to": "ada@example.com",
    "templateId": "YOUR_TEMPLATE_ID",
    "variables": { "name": "Ada" }
  }'

Live demo

The real lifecycle of one message. It pauses when hidden and holds still for visitors who prefer reduced motion.

BrandLiveDemoBrandHero
example request
$ curl https://sendhawk.online/api/emails \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{"from": "hello@yourapp.com",
       "to": "ada@example.com",
       "subject": "Your sign-in code",
       "text": "Your code is 428913"}'

200 OK { "id": "msg_7f3a91", "status": "sent" }

YourAppnow
Your sign-in code
  1. Sent+0.0 s
  2. Delivered+0.8 s
  3. Opened+2.4 s
  4. Clicked+3.9 s

Pipeline

Numbered steps for a process that happens in order. The rule fills as the band scrolls in.

BrandPipeline

  1. You call the API

    One endpoint, authenticated with a workspace API key.

    POST /api/emails

  2. We check it

    Suppressed addresses are skipped. Templates render with your merge tags.

    {{name}}

  3. Signed and sent

    From your own domain, aligned for SPF, DKIM and DMARC, through Amazon SES.

    dkim=pass spf=pass

  4. Tracked

    Deliveries, opens, clicks, bounces and complaints land in your activity log.

    delivered - opened - clicked

  5. You hear back

    Every event is delivered to your webhook, signed so you can trust it.

    x-sendhawk-signature

Feature index

Numbered editorial rows instead of a grid of cards.

BrandFeatureIndex
  1. 01

    Simple API

    One clean endpoint. Send your first email with a single request.

  2. 02

    Real-time logs

    Every send, delivery, open and bounce - searchable in seconds.

  3. 03

    Your own domains

    Authenticate with SPF, DKIM and DMARC for your own reputation.

Pricing slider

Reads the same plan list as the pricing page. A price changes once, in app/utils/plans.ts.

BrandPricingSliderapp/utils/plans.tsusePlans
How many emails do you send a month?18,000
Starter plan
€9/mo
  1. Free3,000
  2. Starter25,000
  3. Pro75,000
  4. Business250,000
  5. Scale750,000
  6. Enterprise1,000,000+
Full API access, Webhooks, Custom domains, 3 Team membersGet started

Closing block

Once per page, at the end: the brand fill and a single action.

BrandCta

Ready to send better email?

Create a free account and send your first email today.

Start for free

Footer

Rendered by the layout on every public page. New links go here, never into a page body.

BrandFooterlayouts/default.vue