Logo Color Typography Radius & spacing Controls Icons

GoAccess Design System

Tokens, not opinions.

The marks, colours, type and controls that make up GoAccess — from the guardhouse kiosk to the resident app to a printed proposal. If it is not on this page, it is not part of the system.

Logo

Four marks: the horizontal lockup, the shield on its own, a compact shield-plus-Go lockup, and the square app icon. Each lockup has a color and a white variant. Color on light surfaces, white on brand blue or foreground. Nothing else — no recoloring, no effects, no rotation.

horizontal / color

horizontal / white

shield / color

shield / white

compact / color

compact / white

app icon

Download filenames do not match these names — the file labelled stacked is the shield on its own, and the one labelled icon is the compact shield-plus-Go lockup. There is no stacked wordmark. Go by the caption here, not the filename.

Color

One blue carries the brand; the greys are warm and stay in the background. Reach for the named token rather than a loose hex, so a change lands everywhere at once. Hex values are given for print and proposal work.

Brand

primary

--primary#0050B8

primary hover

--primary-hover#6292E1

primary active

--primary-active#00449B

primary highlight

--primary-highlight#CBDFFF

primary tint

--primary-tint#EAF2FF

primary foreground

--primary-foreground#FFFFFF

Status

success

--success#278733

warning

--warning#A66700

info

--info#0050B8

destructive

--destructive#C92F33

Surfaces

background

--background#F3F2F2

card

--card#FFFFFF

muted

--muted#EAE9E9

accent

--accent#EAF2FF

foreground

--foreground#201E1D

muted foreground

--muted-foreground#605D5D

Lines & focus

border

--border#D7D3D3

input

--input#D7D3D3

ring

--ring#0050B8

Brand blue ramp

100

200

300

400

500

600

Hover darkens, it does not lighten. Brand blue is 500. White text on 400 is 3.13:1 and fails accessibility contrast, so any text-bearing hover or pressed surface uses 600 (9.13:1). 400 is for tints, borders and large graphics only.

Typography

Roboto sets everything. Weight and size carry the hierarchy — there is no second display face. Roboto Mono is reserved for machine output: plates, codes, coordinates, timestamps.

displayRoboto76px6001.0-0.03em

Visitor access

section-headingRoboto44px6001.05-0.03em

Access control that holds up

titleRoboto20px6001.2-0.03em

Visitor management dashboard

bodyRoboto15px4001.55

GoAccess is the security operations platform for gated communities — visitor passes, license plate recognition, patrol tracking, and access logs in one system.

labelRoboto12px6001.40.08em

Resident · Vehicle · Checkpoint

machineRoboto Mono13px4001.40.06em

PLATE 736-95Z · FL · 2026-08-24T14:02:11Z · GATE 03

Radius & spacing

Six radii and an eight-step spacing scale. Controls are 8px, surfaces 12px and up. Nothing in between gets invented.

Radius

small · 6px

control · 8px

surface · 12px

large-surface · 16px

extra-large-surface · 20px

functional-circle · 9999px

Spacing

1 · 4px

2 · 8px

3 · 12px

4 · 16px

6 · 24px

8 · 32px

12 · 48px

18 · 72px

Controls

Buttons and inputs are both 44px tall with an 8px radius, set in body type. One primary action per view. Red is reserved for destructive actions that require confirmation.

Access granted Pending Access denied Active Offline

Primary buttons darken on hover, never lighten. Use the pressed blue, not the lighter tint — white text on the tint does not meet contrast.

Icons

Stroke only. 1.75px weight, rounded caps and joins, on a 24×24 grid. No filled or decorative icon sets.

access

visitors

security

patrol

location

time

report

gate

vehicle

verified

log

alert