Digital Identity System — Rafael Belchior

Digital Identity System — Rafael Belchior

A concise design-system proof of concept for Rafael Belchior’s personal website. This documents and clarifies the existing identity; it does not redesign or rebuild the site.

  • Status: Proof of concept
  • Basis: Existing website (rafaelapb.github.io)
  • Version: 0.1 / 2026

01 — Identity

Rafael’s identity should read like his work: specific, technically grounded, and open to scrutiny.

Principle Rule
Technical Use exact language and concrete fields of work.
Direct Lead with the point; remove ornamental phrasing.
Credible Support statements with affiliations, work, or links.
Understated Let evidence carry authority; avoid self-promotion.

02 — Color

Reuse the current palette. Blue is reserved for links, active states, and useful emphasis.

Role Value Usage
Canvas #FFFFFF Page background
Charcoal #363636 Content surfaces, hero blocks, dark sections
Ink near-black Primary body text on canvas
Soft grey mid grey Secondary text, captions, metadata
Rule grey #A8A8A8 Borders, separators, hairlines
Link blue #1595C6 Links, active navigation, emphasis only

Rules:

  • Blue is a signal color — never decorative backgrounds or large fills.
  • Charcoal blocks pair with near-white text; grey rules stay thin and functional.
  • No gradients, no tinted cards, no accent color beyond blue.

03 — Typography

Use one neutral sans-serif family (system sans / Arial-Helvetica class). Weight, size, and spacing establish hierarchy without changing the site’s voice.

Use Size / Line height Treatment
Name 28 / 34 Semibold
Section title 20 / 28 Semibold
Body 15 / 24 Regular
Navigation 12 / 16 Medium, uppercase
Metadata 11 / 16 Regular

Rules:

  • One typeface everywhere; hierarchy comes from size and weight.
  • Sentence case for headings; uppercase only for short labels and navigation.
  • Generous paragraph line-height; compact headings.

04 — Layout

A narrow navigation bar frames a centered reading surface. Content uses one main column, with two-column splits only for portraits, affiliations, or short reference material.

  • Width: readable, centered, consistent (single content column).
  • Rhythm: generous gaps between sections, compact spacing inside paragraphs.
  • Composition: biography text beside a portrait; affiliation grids; thin separators between sections.
  • Mobile: stack content; keep order and hierarchy unchanged.

05 — Interface

Links and actions

  • Prefer text links, in link blue, with an underline on hover.
  • Use a simple bordered action only when a clear next step needs emphasis (e.g. “Contact Rafael”, “Book a meeting”).

Interaction

  • Active navigation is blue or underlined, never boxed.
  • Keyboard focus uses a visible blue outline.
  • Motion is limited to short color and underline transitions (~150 ms).
  • Borders are thin, square, and functional — no rounded card grids, no shadows.

06 — Voice

Write in the first person. State the role, the work, and its context. Link evidence at the point where it matters.

Biography pattern

I am a research engineer working on security and privacy, distributed systems, blockchain interoperability, and interoperability for AI agents.

Consulting call to action

For research, technical review, or implementation support, get in touch.

Examples demonstrate structure and tone. Final wording should always be checked against Rafael’s current biography and CV.

07 — Guardrails

Keep

  • Charcoal identity
  • Direct biography
  • Blue text links
  • Real affiliations
  • Compact navigation

Refine

  • Reading width
  • Spacing rhythm
  • Heading hierarchy
  • Mobile stacking
  • Visible focus

Avoid

  • Marketing claims
  • Decorative gradients
  • Rounded card grids
  • Multiple typefaces
  • Animation for effect

Proof of concept — based on the existing personal website.