Diário dos Pequenos · School–family messaging

BrandCenter

The identity, colours, type and components behind the app that connects classrooms and families, from the original 2018 screens to the structure of the 2026 MVP.

● Brand center v1 · 2026
9Brand colours
4×9Colour ramps
7Type sizes
3Roles
02 · Foundations

Colour, sampled from the screens.

Purple and teal carry the interface; sun and book come from the logo and the message bar. Four of them grow into nine-step ramps.

Brand

Purple#6F0A68--dp-purple-600Primary · labels · app bar
Plum#4D0154--dp-plum-800App bar dark · login
Login plum#601167--dp-plum-700Login surface

Accents

Teal#00BAA2--dp-teal-500Actions · checks · FAB
Sun#FED952--dp-sun-500Message bar · highlights
Book#F7A201--dp-book-500Logo book · class tag

Neutrals

Ink#2B1B30--dp-ink-900Text
Paper#EFEFEF--dp-paper-100Page surface
White#FFFFFF--dp-whiteCards

Hex values were sampled from the 2018 screens and the logo. Ink and Paper are neutrals chosen to sit with them.

Ramps · 100 to 900 (derived)

Primary · Purple--dp-purple-500 #6F0A68
100
200
300
400
500
600
700
800
900
Accent · Teal--dp-teal-500 #00BAA2
100
200
300
400
500
600
700
800
900
Highlight · Sun--dp-sun-500 #FED952
100
200
300
400
500
600
700
800
900
Warm · Book--dp-book-500 #F7A201
100
200
300
400
500
600
700
800
900

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

03 · Foundations

Hand-lettered logo, plain Roboto UI.

Aa
Roboto Light
Roboto Regular
Roboto Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ÁÉÍÓÚ Ç ÃÕ

The 2018 screens use Roboto throughout; the logotype is custom lettering and is only ever used as artwork.

Bom dia, professora
titleXL
28 · 700
Atividades do dia
titleLG
22 · 700
Selecionar criança
titleMD
18 · 700
André da Silva
titleSM
16 · 500
Trabalho realizado com recortes de jornal
bodyMD
15 · 400
Fica de olho nele, por favor?
bodySM
13 · 400
Alergia
caption / label
12 · 700 · caps

Space

4
10
12
14
24

Radius

10
14
18
pill

Elevation

list
card
sheet
04 · Components

From the 2018 screens and the 2026 code.

Buttons

SalvarEntrar+
primary: radius 10 · pad 12 · 13/700
login: pill · Ink label · FAB: teal 52

Profile field

Nome
André da Silva
Alergia
Novalgina
label 12/700 caps Purple · value 17/500

Status badge

PendenteDiário enviadoEm andamentoRecado novo
tones from the MVP: neutral · success · warning · info
radius pill · 12/700

Child list item

André da SilvaMaternal II · Novalgina
Fernanda PessoaMaternal II
Diego DiasMaternal I

Message card

Bom dia, professora. O André apresentou febre durante a noite. Fica de olho nele, por favor?
04/05/2018

Date picker

‹SET 2018›
DSTQQSS2627282930311234567891011121314
FeriadoPrazoEvento

Child switcher (MVP)

bottom sheet · header shows avatar + active child · one tap to switch, same module (UX blueprint)
André da SilvaDiário enviado
Fernanda PessoaRecado novo
05 · Product

Three roles, one system.

Teacher

“Update the diary for several students in a few minutes without losing focus.”

TurmasDiárioRecadosPerfil
Guardian

“Understand in seconds how each child's day went.”

InícioRecadosPerfil
Manager

“Make sure the team is on board and see the quality of communication.”

PainelTurmasRecadosPerfil
SimplicityFewer free-text fields, more one-tap actions.
TrustClear history, timestamps and authorship.
EmpathyHuman, not bureaucratic, language.
ContinuityFull support for families with more than one child.
12
34
1 Child list item · coloured class bar2 Child avatar3 Message card · avatar overlap4 Sun message bar with tail
06 · Tokens & accessibility

Re-skinning the MVP with the brand.

:root {
  /* colour · brand */
  --dp-purple-600: #6F0A68;  --dp-plum-800: #4D0154;   --dp-plum-700: #601167;
  --dp-teal-500: #00BAA2;    --dp-teal-700: #0F8179;
  --dp-sun-500: #FED952;      --dp-book-500: #F7A201;
  --dp-ink-900: #2B1B30;      --dp-paper-100: #EFEFEF;

  /* type · from the MVP theme (px) */
  --dp-font: "Roboto", system-ui, sans-serif;
  --dp-title-xl: 28px; --dp-title-lg: 22px; --dp-title-md: 18px;
  --dp-title-sm: 16px; --dp-body-md: 15px;  --dp-body-sm: 13px; --dp-caption: 12px;

  /* shape · from the MVP components */
  --dp-radius-button: 10px; --dp-radius-card: 14px; --dp-radius-pill: 999px;
  --dp-pad-card: 14px;      --dp-pad-button-y: 12px;
}

MVP token to brand token (proposed)

primary#1F6FEB→#6F0A68
primarySoft#E9F0FF→#EEE2ED
background#F5F7FA→#EFEFEF
surface#FFFFFF→#FFFFFF
text#0B1220→#2B1B30
muted#5D6B82→#6B5E70
border#D6DEEA→#E4DCE6
success#11845B→#0F8179
warning#B06900→#85561B

Contrast audit · WCAG 2.1

Aa
White on PurplePrimary button, app bar
10.9:1AAA
Aa
Ink on TealLogin button label
6.6:1AA
Aa
White on TealAvoid for text
2.5:1Fail
Aa
Ink on SunHighlights, warning chips
11.7:1AAA
Aa
Purple on PaperField labels, links
9.5:1AAA
Aa
Teal 700 on WhiteTeal text / icons on light
4.7:1AA