Skip to content
Brand system GetOn • Updated 15 Feb 2026

Branding guidelines

Use this page as the single source of truth for GetOn’s visual identity and UI patterns. If you’re building anything public-facing, match these rules first.

Copy tokens Logo usage
Quick downloads PNG + SVG
Logo (use on light backgrounds) Logo (use on dark backgrounds) Icon (use on light backgrounds) Icon (use on dark backgrounds) Logo (mono white, SVG) Logo (greyscale, SVG)

Add more assets under /public/brand (or /public/branding).

Contents 10 sections

Golden rule

Be consistent. If you must break a rule, break it everywhere the same way.

Brand fundamentals

Positioning

GetOn helps startups and SMEs in Malaysia launch modern websites and automate operations with practical, outcome-driven solutions.

Personality

Warm, confident, and helpful. We’re professional without being corporate, and direct without being cold.

Promise

Make digital transformation feel simple: clearer decisions, faster work, and systems that scale.

What we avoid

Overcomplicated jargon, gimmicky design, and inconsistent copy. Clarity wins.

Core message template

“We help {who} achieve {outcome} using {solution} — without {pain}.”

Example: “We help SMEs move faster with automation and clean websites — without the usual complexity.”

Colour

Colour is functional. Primary drives action, secondary guides navigation and emphasis, neutrals keep everything readable.

Primary — Sun

Primary CTA, highlights, chips

Token geton-primary
Hex #FFBB00

Use with Ink for text (not white).

Secondary — Electric Blue

Links, accents, section dividers

Token geton-secondary
Hex #2620F6

Use with White for text.

Ink

Primary text colour

Token geton-ink
Hex #222222

Use on Paper/Sand/Muted.

Sand

Default page background

Token geton-sand
Hex #F5F4F0

Use with Ink text.

Paper

Cards, modals, surfaces

Token geton-paper
Hex #FFFFFF

Use with Ink text.

Muted

Subtle backgrounds, separators

Token geton-muted
Hex #F2F2F2

Use with Ink text.

Night

Dark mode background

Token geton-night
Hex #0B0B0B

Use with White/Muted text.

Night 2

Dark mode surfaces

Token geton-night2
Hex #111111

Use with White/Muted text.

Contrast rules (quick)

  • Primary + Ink is excellent for text. Avoid Primary + White for body text.
  • Secondary + White is excellent for text. Avoid Secondary + Ink for body text.
  • Use neutrals (Sand/Paper/Muted) for long reading surfaces.

Typography

Primary font is Poppins. Headings are bold, body is calm and readable.

Type scale

Use these sizes before inventing new ones.

Poppins • Tailwind
H1
text-5xl sm:text-6xl font-extrabold tracking-tight

The quick brown fox jumps over the lazy dog.

Page titles

H2
text-3xl sm:text-4xl font-extrabold

The quick brown fox jumps over the lazy dog.

Section headings

H3
text-xl font-bold

The quick brown fox jumps over the lazy dog.

Card headings

Body
text-base

The quick brown fox jumps over the lazy dog.

Primary content

Small
text-sm

The quick brown fox jumps over the lazy dog.

Labels, metadata

Writing basics

  • Use UK spelling (organise, colour, centre).
  • Prefer short sentences. One idea per line for UI copy.
  • Use sentence case for buttons and headings (not ALL CAPS).

Layout & spacing

Container

Use max-w-7xl with px-4. Match existing pages.

<div class="mx-auto max-w-7xl px-4">…

Radii

  • Cards: rounded-3xl
  • Buttons: rounded-2xl
  • Chips/pills: rounded-full

Motion

Keep transitions subtle (≈180ms) and respect prefers-reduced-motion.

Default motion settings live in src/styles/global.css.

UI components

Re-use existing patterns before creating new ones.

Buttons

Primary for main action, secondary for alternative, outline/ghost for low emphasis.

src/components/Button.astro
Primary Secondary Outline Ghost

Cards

Use Paper on Sand, subtle border, soft shadow. Avoid heavy gradients.

Standard card

For content blocks, feature lists, and pricing modules.

Highlight

Emphasis card

Use sparingly for CTAs and key callouts.

Automation Websites SMEs

Form fields

Rounded, calm borders, clear focus. Keep labels visible.

Voice & tone

We sound like

  • A trusted operator who explains clearly.
  • A friendly partner who keeps momentum.
  • Someone who respects the reader’s time.

We avoid

  • Buzzwords (synergy, disruption, next-gen).
  • Overpromising (“guaranteed results”).
  • Long paragraphs in UI copy.

Microcopy examples

Do

  • “Book a 15‑minute consult”
  • “Send invoice”
  • “We’ll reply within 1 business day”

Don’t

  • “Unlock powerful solutions now!!!”
  • “Proceed to the next step”
  • “We will endeavour to respond at our earliest convenience”

Animated headline

Use sparingly (hero only). Keep the phrases short and outcome-focused. Respects reduced-motion settings.

GetOn  

Recommended: use Ink for Get and Sun for On.

Drop-in snippet (HTML + JS) 
<div class="go-typewriter" data-go-typewriter data-phrases='["Today","Launch in 1 Day","Websites That Convert"]'>
  <span class="go-get">Get</span><span class="go-on">On</span>
  <span class="go-gap">&nbsp;</span>
  <span class="go-dynamic" data-go-dynamic aria-live="polite"></span>
</div>

<script>
(function () {
  const root = document.querySelector("[data-go-typewriter]");
  if (!root) return;
  const phrases = JSON.parse(root.getAttribute("data-phrases") || "[]");
  const out = root.querySelector("[data-go-dynamic]");
  if (!out || !phrases.length) return;

  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reduced) { out.textContent = phrases[0]; return; }

  let pi = 0, ci = 0, del = false;

  function tick() {
    const phrase = phrases[pi];
    out.textContent = phrase.slice(0, ci);

    if (!del) {
      ci++;
      if (ci > phrase.length) { del = true; setTimeout(tick, 900); return; }
    } else {
      ci--;
      if (ci <= 0) { del = false; pi = (pi + 1) % phrases.length; }
    }

    setTimeout(tick, del ? 45 : 95);
  }

  tick();
})();
</script>

Imagery & illustration

Prefer real photography (people at work, SMEs, modern office scenes). Keep overlays subtle and colour-accurate.

Photography style

  • Natural light, honest environments, minimal filters.
  • Warm neutrals (Sand/Paper) with small hits of Primary/Secondary.
  • Use soft vignettes or 10–25% overlays for text readability.
Example hero imagery

Illustration & abstract

  • Use abstract motion sparingly (e.g., subtle backgrounds).
  • Never compete with the logo or primary CTA.
  • Keep contrast high enough for readability.
Abstract animated background

Accessibility

Colour contrast

Aim for WCAG AA as a baseline.

  • Primary text should be Ink (not White).
  • Secondary backgrounds should use White text.
  • Don’t rely on colour alone—add icons, labels, or patterns.

Focus & motion

  • Keep visible focus styles (already set in global CSS).
  • Respect reduced-motion preferences.
  • Provide alt text for meaningful images.

Developer tokens

Use existing Tailwind tokens and CSS variables. Don’t hardcode hex values unless you’re defining tokens.

Tailwind colour tokens

Defined in tailwind.config.mjs.

// Examples
<Button variant="primary">Pay Bills</Button>
<div class="bg-geton-sand text-geton-ink">…</div>
<section class="bg-geton-secondary text-white">…</section>

CSS variables

Defined in src/styles/global.css.

:root{
  --geton-ink:#222222;
  --geton-primary:#FFBB00;
  --geton-secondary:#2620F6;
  --geton-muted:#F2F2F2;
  --geton-sand:#F5F4F0;
  --geton-paper:#FFFFFF;
}

Need a new token?

Add it to Tailwind + global CSS, then reference by token everywhere.