Living reference

Brand guide

The source of truth for every visual decision on kasama systems. If a token isn't here yet, add it here first, then use it in the build. Current scope: the name, logos, color, type, and spacing; component patterns join as the homepage refinish lands.

The name

The name is the brand. Two rules, no exceptions.

1. Always lowercase

Including at the start of a sentence, a heading, or a title tag. Never "Kasama", never "KASAMA".

2. Always distinguished

The name never blends into the text around it; it reads as a mark, not a word. In copy, set it a different weight than the surrounding text. In headings, a different weightor a different color.

…helps mid-market suppliers respond. kasama systems turns the mandate into a plan.

In copy: weight offset. The name is the only bold thing in the sentence.

What kasama does

In headings: color offset, only where the color keeps AA contrast on that ground (Sunshine Gold works on Deep Teal, not on parchment).

Enforcement

Never type the name inline; use<Kasama />(src/components/Kasama.astro), the one place the rules are enforced. Passsystems for the full company name; it handles the weight offset. For the color treatment in headings, add a color class:<Kasama class="text-accent" />. The plain string in constants.tsexists only for meta tags and structured data, where markup isn't possible.

Logos

Official wordmark, transparent PNGs insrc/assets/images/branding/(masters: EPS, PDF, styleguide, insrc/assets/branding/). The ™ is part of the artwork. Keep clear space equal to one "a" around the perimeter. Never retype the wordmark, recolor it outside these variants, or set it on a ground it wasn't made for.

Sunshine: the default on dark grounds.logo-sunshine.png

Deep Teal: the default on light grounds.logo-deep-teal.png

Sunshine on Deep Teal: the teal plate is baked into the file. For social avatars, cover art, and placements where the ground can't be controlled.logo-sunshine-on-teal.png

Black: one-color print only. Not for the web build.logo-black.png

Color tokens

Defined in the @theme block ofsrc/styles/global.css(hex values mirrored in constants.ts). Never hardcode a hex in a template; use the generated utility. v2 uses these flat: no gradients, no shadows, no translucency.

Brand palette

Deep Teal

#08486B--color-primary

Dominant anchor. Dark grounds, headings, footer.

Supporting Teal

#4B8794--color-secondary

Supporting bands and UI. Digital-only; not in the print styleguide.

Sunshine Gold

#F9A823--color-accent

CTAs and highlights. Dark text only, never white.

Warm Sand

#EBC288--color-sand

Muted surfaces, borders, flat section grounds.

Parchment

#F9F5EC--color-parchment

Page base. Text color on dark grounds.

Wild Plum

#B32149--color-plum

Risk and warning states, rare emphasis.

Dark Chocolate

#414042--color-chocolate

Body text on light surfaces.

Surfaces

--color-base-100

page ground (parchment)

--color-base-200

inset / muted panels

--color-base-300

strong borders, pressed states

--color-surface

white cards lifted above the ground

--color-base-content

default text color

contrast rules (WCAG AA)

Sunshine Gold (#F9A823) never carries white text: roughly 2:1 on white, a hard AA failure. Pair it with Deep Teal.
Sand and parchment are surfaces, not text colors on light grounds. Use them as text only on primary or plum.
Verify before launch. These ratios are reasoned from the hex values, not measured; checklist A3 runs the real audit.

Text tokens

Two families, self-hosted via@fontsource(external font CDNs fail the build by design). Declared as--font-heading and--font-body inglobal.css.

Poppins

--font-heading

Headings and UI labels. Weights 500 · 600 · 700. Tracking −0.02em globally.

Frictionless reporting

Atkinson Hyperlegible Next

--font-body

Body copy. Weights 400 · 400 italic · 600 · 700.

Kasama means a companion: to accompany, together with. A guide and partner through the quagmire of reporting requirements.

Designed by the Braille Institute for maximum character distinction, chosen to support the accessibility commitment.Italic supported. Bold supported.

Casing

Headings and UI copy use sentence case: capitalize the first word and proper nouns, nothing else. The all-lowercase heading treatment used in earlier drafts is retired (client direction, August 2026). The one exception is the name: kasama is always lowercase, even at the start of a sentence or heading; see "The name" above.

Type scale

Tailwind's default steps, restricted to these sanctioned sizes.text-7xl and arbitrary sizes are off the menu.

text-8xl6rem · 96pxstat moments

text-6xl3.75rem · 60pxhero headline (desktop)

text-5xl3rem · 48pxsection headline (desktop)

text-4xl2.25rem · 36pxhero headline (mobile)

text-3xl1.875rem · 30pxsection headline (mobile), card statements

text-2xl1.5rem · 24pxcard titles, package names

text-xl1.25rem · 20pxsub-headings

text-lg1.125rem · 18pxlead paragraphs

text-base1rem · 16pxbody copy

text-sm0.875rem · 14pxsupporting copy, nav, footer

text-xs0.75rem · 12pxeyebrows, fine print

Spacing tokens

One base unit, --spacing: 0.25remin global.css, and every numeric utility (p-*,m-*,gap-*) is a multiple of it. Stay on the sanctioned steps below; no arbitrary values likep-[18px].

Micro: inside components

10.25rem · 4px

20.5rem · 8px

30.75rem · 12px

41rem · 16px

Component: padding and gaps

61.5rem · 24px

82rem · 32px

102.5rem · 40px

123rem · 48px

Macro: layout and section rhythm

164rem · 64px

205rem · 80px

246rem · 96px

287rem · 112px