Isaac D'Césares — Design System Showcase

01 — Color System

The Membrane Palette

Colors are organized across three registers — human (warm), digital (cool), and the membrane where they translate. Every color carries semantic meaning rooted in the brand essence.

Primary Colors

Terracotta

#B35530

--color-terracotta

Deep Teal

#1B756D

--color-teal

Warm Cream

#FAF6EE

--color-cream

Rich Charcoal

#1A1B1F

--color-charcoal

Accent Colors

Amber Gold

#D49A3A

--color-amber

Burgundy

#7A3345

--color-burgundy

Sage Green

#5A8A6E

--color-sage

Neutral Scale

100

200

300

400

500

600

700

800

900

Every gray is warm-tinted — no achromatic neutrals in this brand.

Gradients

--gradient-membrane · The brand's signature: Human → Digital

--gradient-warmth · Ambient warm glow for section backgrounds

--gradient-depth · Dark mode hero depth

02 — Typography

Three Voices, One System

Fraunces (the Researcher), Instrument Sans (the Educator), JetBrains Mono (the Builder) — a typographic triad that mirrors the brand's identity.

Display · Fraunces 700 --text-display

Where cognition meets code

H1 · Fraunces 700 --text-h1

Humanized innovation for the future of learning

H2 · Fraunces 600 --text-h2

Researcher. Educator. Builder.

H3 · Fraunces 600 --text-h3

Making technology meaningful for learning

H4 · Instrument Sans 600 --text-h4

The bridge from headline to body — precision takes over

Body Large · Instrument Sans 400 --text-body-lg

Isaac D'Césares is a researcher, educator, and builder working at the convergence of education, artificial intelligence, digital transformation, and human cognition — translating emerging technologies into meaningful experiences, tools, and frameworks that transform how people and institutions learn.

Body · Instrument Sans 400 --text-body

He researches, builds, and teaches at the frontier between technology and human cognition. His work exists at the membrane where those two worlds meet — and translate each other. The question is never can we? but should we, for whom, toward what end?

Small · Instrument Sans 400 --text-small

Published March 2026 · Rio de Janeiro, Brazil

Code · JetBrains Mono 400 --text-code

const translator = new Membrane({ human: true, digital: true });

Overline · Instrument Sans 600 --text-xs · uppercase

Research · Education · Technology

03 — Spacing

Rhythm & Breath

A 4px base unit creates consistent rhythm. Generous spacing reflects the brand's hospitality — the design breathes, like the person behind it.

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-6 · 24px

--space-8 · 32px

--space-12 · 48px

--space-16 · 64px

--space-20 · 80px

--space-24 · 96px

--space-32 · 128px

Border Radius

4px

8px

12px

16px

pill

Shadows

--shadow-sm

--shadow-md

--shadow-lg

--shadow-glow-warm

--shadow-glow-teal

04 — Components

Building Blocks

Reusable patterns that carry the brand's warmth and precision into every interface.

Buttons

Tags / Pills

Artificial Intelligence Blockchain Multi-Agent Systems Education Pedagogy Constructionism Builder Growth Research

Cards

Technology

Multi-Agent AI Systems

Exploring how autonomous agents can collaborate to solve complex educational challenges — from adaptive learning to institutional assessment.

Research · PPGI/UFRJ · 2026

Education

Creative Computing Networks

Building and sustaining communities of practice where educators learn to integrate computational thinking into their pedagogical repertoire.

Community · RBAC-Rio · Ongoing

Featured

Digital Transformation at Scale

Leading the strategic integration of AI, data systems, and learning platforms across a national educational network — balancing innovation with institutional reality.

Institutional · Sesc DN · 2024–present

Input Fields

Name

Subject

Blockquote

"I research, build, and teach at the frontier between technology and human cognition — because that membrane is exactly where transformation happens."

"Technology amplifies human potential. Unless it doesn't. My work is about the difference."

Code Block

// The Translator — where human meets digital
const translate = (humanInsight, digitalTool) => {
  const membrane = createMembrane({
    warmth: 0.95,
    precision: 0.95,
    ethics: true,
  });

  return membrane.bridge(humanInsight, digitalTool);
};

// "Making technology meaningful for learning."
translate('pedagogy', 'artificial-intelligence');
        

Section Divider

Fading-edge divider — more intentional than a full-width rule.

Navigation

dc Brand

Active Research Teaching Contact

Sticky navigation with backdrop-blur, 64px desktop height. Logo left-aligned, links uppercase with 0.08em tracking. Active state in terracotta.

05 — Motion

Purposeful Movement

Every animation communicates something. The brand is not in a rush — warm pacing at 250ms, not 150ms. Hover over the cards to see each effect.

Lift

translateY(-4px)
+ shadow upgrade

Warm Glow

box-shadow
glow-warm

Teal Glow

box-shadow
glow-teal

Spring Scale

scale(1.03)
ease-spring

Timing Tokens

--duration-fast · 150ms --duration-normal · 250ms --duration-slow · 400ms --duration-slower · 600ms

07 — Data Visualization

Metrics Made Meaningful

Data visualization uses the brand palette to maintain warmth even in analytical contexts. Primary data in terracotta, secondary in teal, tertiary in amber.

Primary Data

--color-terracotta

Secondary Data

--color-teal

Tertiary Data

--color-amber

Grid / Labels

--neutral-200 / Instrument Sans

Sample Bar Chart

Photography Treatment

All photos receive a subtle warm filter via --photo-warmth — adding sepia(0.05), saturate(1.05), and brightness(1.02). Natural light, warm tones, never stock.

Photo without filter

Photo with --photo-warmth

Illustration Style

Organic line quality (2px, slightly imperfect), minimal flat fill from brand palette at reduced opacity. Abstract representations of translation, connection, and growth. Simple enough to work at small sizes, never more than 2 colors.

06 — Brand Marks

Identity in Context

The wordmark and monogram adapt to their context while maintaining the brand's dual-register nature — terracotta (human) and teal (digital).

Monogram

Wordmark

Isaac D'Césares

Handle Variations

Isaac D'Césares D'Césares idcesares dcesares.dev

The Core Truth

Human intelligence, amplified with technological intentionality.

This design system is the visual expression of that conviction. Every token, every component, every animation carries both warmth and precision.

Vamos cocriar? View on GitHub