Raio-X Câmara · Public data for city councillors

BrandCenter

The mark, colours, type, icons and components of the app that opens official municipal data to city councillors, compiled from the logo files, the icon set and the screens.

● Brand center v1 · 2026

11Colours

4Splash colourways

16Icons

4Illustrations

01 · Identity

A ring, a building, one flag.

The mark is a yellow ring that opens at the bottom like a magnifier, with a city hall and a flag inside. It lives next to a bold “RAIO-X CÂMARA” wordmark: white on dark, purple on light.

vertical · on ink

horizontal · on white

app icon

splash

colourway · blue / aqua

colourway · burgundy / gold

colourway · black / orange

colourway · black / aqua

Clear spaceKeep the ring's stroke width free on every side of the mark.

Minimum sizeMark 32 px. Lockup 120 px wide.

ColourwaysYellow-on-purple is the default. Blue, burgundy and black are alternate splash themes.

02 · Foundations

Purple at night, yellow for the mark.

Purple carries the interface; yellow marks what matters. Cyan lives only in the onboarding. Three alternate splash themes keep the same mark.

Brand

Purple#56318E--rx-purple-600Primary surface · buttons' halo

Deep#40246E--rx-deep-700Headers · cards

Ink#2B1B49--rx-ink-900App bar · dark surface

Accents

Yellow#FFCE17--rx-yellow-500Mark · icons · primary button

Cyan#18D4EA--rx-cyan-500Onboarding gradient

Surfaces

Lavender#DBD3F4--rx-lav-200Light screens

Grey#E8E8E8--rx-grey-100Menu panels

White#FFFFFF--rx-whiteCards

Colourways

Blue#002373--rx-cw-blueAlternate splash

Burgundy#602121--rx-cw-burgundyAlternate splash

Black#232323--rx-cw-blackAlternate splash

Hex values were sampled from the logo files and the screens. Colourway accents (aqua, gold, orange) are sampled from the splash variants.

Ramps · 100 to 900 (derived)

Primary · Purple--rx-purple-500 #56318E

100

200

300

400

500

600

700

800

900

Accent · Yellow--rx-yellow-500 #FFCE17

100

200

300

400

500

600

700

800

900

Accent · Cyan--rx-cyan-500 #18D4EA

100

200

300

400

500

600

700

800

900

Steps 100–400 mix the base with white; 600–900 with a dark shade.

03 · Foundations

One geometric face, four weights.

Montserrat Light
Montserrat Regular
Montserrat ExtraBold

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ÁÉÍÓÚ Ç ÃÕ

The screens set interface text in a geometric sans in capitals with open tracking; Montserrat matches it. The wordmark is custom lettering and is only ever used as artwork.

Selecione uma das opções abaixo

display
300 · 26/32 · caps

Licitações

app bar
800 · 15/20 · caps

Prefeitura Municipal de Betim

header
700 · 16/22 · caps

10/20 maiores valores estimados das licitações em andamento

body
400 · 14/21

Secretaria · Exercício · Modalidade

label
700 · 11/16 · caps

R$ 1.250.000

figure
800 · 30/34

Space · 4 pt grid

1 · 4

2 · 8

3 · 12

4 · 16

6 · 24

Radius

pill

Elevation

card-1

card-2

device

04 · Icons & illustration

Bold glyphs, isometric stories.

Licitações

Contratos

Receitas

Despesas

Investimentos

Gestão de frotas

Pessoal

Convênios

Início

Prefeitura

Relatórios

Notificações

Sair

Licitações

Investimentos

Gestão de frotas

Fiscalização · onboarding 1

Dados oficiais · onboarding 2

Gestão da Câmara · onboarding 3

Inteligência de negócio · onboarding 4

05 · Components

Built from the screens.

Buttons

Acessar Filtrar

yellow pill 44 · Ink label · 800 / 12 caps · outline variant

Field

425.XXX.XXX-XX

•••••••••••

translucent white 14% · radius 8

Option card

Monitoramento

Prestação de contas

Drawer menu

Prefeitura Municipal de Betim

Robson da Silva
VEREADOR

Início

Licitações

Relatórios

Table

Ano	Mês	Nome	Valor
2020	FEV	Nome da pessoa	R$ 1.200
2020	MAR	Nome da pessoa	R$ 980
2020	ABR	Nome da pessoa	R$ 1.450

Municipality tiles

Licitações

Contratos

Licitações

dark tile: Ink + yellow glyph · light tile: white + purple glyph

06 · Tokens & accessibility

Tokens in code, contrast on paper.

:root {
  /* colour · brand */
  --rx-purple-600: #56318E; --rx-deep-700: #40246E;   --rx-ink-900: #2B1B49;
  --rx-yellow-500: #FFCE17; --rx-cyan-500: #18D4EA;  --rx-cyan-200: #9DFFFF;
  --rx-lav-200: #DBD3F4;      --rx-grey-100: #E8E8E8;
  --rx-gradient-splash: linear-gradient(135deg, #5A3494, #391F65);

  /* colourways (alternate splash themes) */
  --rx-cw-blue: #002373; --rx-cw-burgundy: #602121; --rx-cw-black: #232323;
  --rx-cw-aqua: #00F8D0; --rx-cw-gold: #F8C810;     --rx-cw-orange: #F84010;

  /* type */
  --rx-font: "Montserrat", system-ui, sans-serif;  /* Light · Regular · SemiBold · ExtraBold */

  /* shape */
  --rx-radius-card: 28px; --rx-radius-pill: 999px; --rx-radius-field: 8px;
  --rx-shadow-card: 0 12px 28px rgba(43, 27, 73, .35);
}

What the audit says. White on Yellow is 1.5:1 and white on Cyan is 1.8:1. Labels on yellow and cyan use Ink (10.4:1 and 8.6:1). Yellow works for icons and small type on Ink (10.4:1).

Contrast audit · WCAG 2.1

Yellow on InkIcons and labels on app bars

10.4:1AAA

Yellow on PurpleButtons' counterpart, links

6.3:1AA

White on PurpleBody text on purple

9.4:1AAA

Ink on YellowPrimary button label

10.4:1AAA

White on YellowAvoid for text

1.5:1Fail

Purple on LavenderText on light surfaces

6.6:1AA

Ink on CyanOnboarding labels

8.6:1AAA

White on CyanAvoid for text

1.8:1Fail