Brand

Brand guidelines

How Autellicare looks and sounds. Use the supplied files exactly as they are.

Logo

Horizontal, light background

Horizontal, dark background

Stacked, light background

Stacked, dark background

Mark, light background

Mono mark on raspberry

All twelve files (mark, horizontal and stacked, each in light, dark, mono-light and mono-dark) are in landing/site/assets/logo/ as SVG. Print and presentation PNGs come from the brand pack.

Do

Use dark variants on dark backgrounds and mono variants on raspberry or photographic backgrounds.
Keep clear space of at least half the mark's width on every side.
Keep the mark at 24 px or larger and the horizontal logo at 120 px wide or larger.
Write "Autellicare" in running text. The wordmark is lowercase only in the artwork.
Use the tagline "Automated customer care" only as it appears in the logo.

Do not

Redraw, recolour, stretch, rotate or add effects to the logo.
Place it on a photograph without a dark scrim.
Use light variants on dark backgrounds or the reverse.
Use the logos of WhatsApp or payment providers, or imply a partnership with any of them.
Use emoji anywhere. Use SVG icons with rounded caps and joins.

Colour

Platform defaults, implemented as CSS variables in one file. Workspace branding in the product overrides its own copy. The figures show contrast against white and against ink (#0E1022); text needs 4.5:1 and controls 3:1.

Brand

--ink-950
#0E1022
18.8:1 on white, 1.0:1 on ink

--ink-900
#161830
17.4:1 on white, 1.1:1 on ink

--ink-800
#1E2140
15.6:1 on white, 1.2:1 on ink

--ink-700
#22253D
15.0:1 on white, 1.3:1 on ink

--ink-600
#2F3459
12.0:1 on white, 1.6:1 on ink

--raspberry-700
#A9124B
7.3:1 on white, 2.6:1 on ink

--raspberry-600
#C51859
5.8:1 on white, 3.3:1 on ink

--raspberry-500
#E0357A
4.2:1 on white, 4.4:1 on ink

--rose-400
#FF5C97
2.9:1 on white, 6.5:1 on ink

--rose-300
#FF6A9F
2.7:1 on white, 7.0:1 on ink

--blush-100
#FDEAF2
1.2:1 on white, 16.3:1 on ink

--blush-50
#FFF5F9
1.1:1 on white, 17.6:1 on ink

Support and status

--saffron-500
#FFB020
1.8:1 on white, 10.3:1 on ink

--saffron-700
#8A5A00
5.9:1 on white, 3.2:1 on ink

--saffron-100
#FFF3D6
1.1:1 on white, 17.1:1 on ink

--sky-600
#1D6FB8
5.2:1 on white, 3.6:1 on ink

--sky-100
#E5F2FC
1.1:1 on white, 16.5:1 on ink

--success-600
#12805C
4.9:1 on white, 3.8:1 on ink

--success-100
#E3F5EE
1.1:1 on white, 16.6:1 on ink

--warning-600
#B45309
5.0:1 on white, 3.7:1 on ink

--warning-100
#FEF1DE
1.1:1 on white, 16.9:1 on ink

--danger-600
#D3351B
4.9:1 on white, 3.8:1 on ink

--danger-100
#FDEBE7
1.2:1 on white, 16.3:1 on ink

Surfaces and text

--bg
#FAFAFC
1.0:1 on white, 18.1:1 on ink

--surface
#FFFFFF
1.0:1 on white, 18.8:1 on ink

--surface-2
#F2F3F8
1.1:1 on white, 17.0:1 on ink

--border
#E3E5EF
1.3:1 on white, 15.0:1 on ink

--border-strong
#8E92AD
3.1:1 on white, 6.2:1 on ink

--text
#22253D
15.0:1 on white, 1.3:1 on ink

--text-2
#4A4E6B
8.1:1 on white, 2.3:1 on ink

--text-3
#5C607F
6.1:1 on white, 3.1:1 on ink

On dark backgrounds, primary buttons use ink text on rose. White on rose is only 2.9:1 and must not be used for text.

Typography

Bricolage Grotesque for headings

Figtree for body text and interface. Both are open-source (SIL OFL) and self-hosted. Body text is at least 16 px with lines of 60 to 75 characters. Poppins appears only inside the wordmark artwork.

Shape and motion

Rounded squares and 45-degree angles taken from the mark. Cards use 16 px radius; buttons and tags are pills.
Light and deep-ink sections alternate, separated by a 45-degree clipped edge, with a faint diamond lattice.
The three-dot typing indicator is the signature micro-interaction:
Motion is calm: 200 to 400 ms ease-out, and none at all when the visitor prefers reduced motion.
Focus rings are raspberry with a white gap on light and saffron on dark.

Voice

Plain, warm and specific. Say what the product does and make no claim we cannot show: no invented statistics, customer logos, awards or certifications. Mention WhatsApp and M-Pesa as plain text only.