One job: make the site read senior, solid and trustworthy. Every token, size and rule on this page exists for that, and for nothing else.
Quality bar. Pixel-level correctness, in both themes, on every route. Close enough is not done: a hairline off by 1px, an olive accent in light mode or a sentence set in mono is a defect, not a nuance.
You redact a screenshot, structure a section, link to a home section or add a client logo.
app/design-system/page.tsx, lib/data/showcase.ts
Foundations
Values below are read from code, not from a spec. When code and this page disagree, code wins and this page gets fixed.
Color
Every token has two values. Dark is the default set on :root; light overrides it under html[data-theme="light"]. The site is currently locked to light (THEME_LOCKED in app/layout.tsx), so the dark column is the set that comes back when the lock is lifted: keep it correct. With the lock off the theme resolves from a cookie, or from the local hour when the cookie says auto (06:00 to 17:59 is light), before first paint. Click a value to copy it.
Surfaces
TokenDarkLightUse
--bgPage background. Light is one step off #ffffff, which stays reserved for elevation.
--bg-elevatedElevated panels: the ~/guilherme.json card, logo tiles, secondary buttons. Always bordered.
--bg-overlayButton hover fill and skill chips inside the card.
--bg-hoverHover plate on an unbordered surface (the side-project rows). Steps up in dark, down in light.
--panelTranslucent sticky subnav on case pages, behind a 20px blur.
Borders
TokenDarkLightUse
--border-faintFaintest rule: nav bottom, subnav frame, separators inside a list.
--borderDefault hairline: section rules, rows, chips, the timeline rail.
--text-mutePlaceholder row title and the # before a commit hash.
Accents
TokenDarkLightUse
--limeThe one living accent: active pills, italic accent words, primary button fill, HEAD node, margin notes.
--lime-dimPast nodes on the rail, the branch curve end, the settled pass chip.
--violetStar marker on leadership diff lines.
--greenPlus marker on added diff lines.
--orangePart-time chip, the transition callout rule, caution verdicts.
--redFail verdict chip. Rare.
Derived
--grid-line is not a color: it is the unitless rgb triplet of --lime per theme (197, 252, 77 on dark; 53, 122, 18 on light) for the two places that need an rgba() string: alpha borders such as the active pill, and the canvas grid drawn from JavaScript.
The light lime
#c5fc4d cannot be darkened in place. At the lightness small text needs, that hue reads as olive or mustard, and the first light-theme pass shipped exactly that. The light accent keeps the family by moving hue from about 80 to about 100 and holding saturation: #357a12, a leaf green, not an olive. Both values clear 4.5:1 against their --bg for small text.
Where lime is a fill (primary button, HEAD node, skip link, the text selection) the foreground is always var(--bg), so the pair stays legible in both themes.
Typography
Geist for everything, loaded through next/font (sans 300 to 700, mono 400 to 600). Headings at 500, never 700. Every sentence in Geist sans at 13px or larger. Geist Mono only on labels of about three words or fewer: nav items, chips, pills, dates, hashes, the clock. If it has a verb, it is not a label.
Hero headline.hero-headline
Engineering, as built.
clamp(48px, 9vw, 132px)
line 0.95
track -0.04em
w500
Section title.experience-title
Career, as a changelog.
clamp(36px, 6vw, 80px)
line 1
track -0.04em
w500
Page heading.showcase-heading
Projects
clamp(36px, 7vw, 64px)
line 1
track -0.03em
w500
Feature title.showcase-feature-title
A featured project title
clamp(28px, 3.2vw, 38px)
line 1.08
track -0.03em
w500
Row title.showcase-row-title
Coffee Delivery
clamp(20px, 2.2vw, 26px)
track -0.02em
w500
Version anchor.release-ver
v8.0.0
30px, 24px under 880px
line 1
track -0.03em
w500
Item title.process-item-title
Tokens before pixels.
18px
track -0.01em
w500
Reading column.about-body
A generous reading column beside the card. One idea per paragraph, strong for the words that carry it, no framing around the text.
17px
line 1.7
--text-dim
w400
Body.release-summary
The default body size across the site. Sentences are always set in Geist sans, at this size or larger, in --text-dim with emphasis in --text at weight 500.
15px
line 1.65
--text-dim
w400
Mono meta.release-meta
Jul 2026 → present · c1a94e6
12px
track 0.02em
--text-dim
w400
Mono label.showcase-pill
In pilot
11px
track 0.04em
uppercase
w400
Spacing
An 8pt scale from 4px to 192px in CSS variables --s-1 to --s-11. Layout uses the variables. The only raw pixel values in layout code are component-internal: chip padding, icon sizes, the 64px nav.
--s-1
4pxchip gaps, info-row gap
--s-2
8pxinline gaps, chip rows
--s-3
12pxnav-end gap, diff-line gap, stat value margin
--s-4
16pxnav padding on mobile, card header padding
--s-5
24pxabout card padding, text block gap, row gap
--s-6
32pxsection side padding, signal column gap
--s-7
48pxhero headline margin, release row padding
--s-8
64pxcase-page stack gap, signal band padding
--s-9
96pxabout grid gap, hero meta margin
--s-10
128pxsection vertical padding
--s-11
192pxCTA vertical padding
Surfaces and radius
A background is a claim that something is an object. Only real artifacts make that claim: product screenshots (a white card), brand logo tiles and the protected ~/guilherme.json card. Everything else is text on the page, separated by hairlines.
4pxchips, tags, the focus ring, the time bars
16pxartifact cards: screenshot card, logo tile, the protected card
999pxpills, buttons, dots, the lang and theme switches
Three radii, no others. 4px on chips, tags and the focus ring. 16px only on artifact cards: the screenshot card, the 64px logo tile (10px at the 40px size, 12px at the 48px mobile size) and the about card. 999px on pills, buttons and dots.
Shadow is reserved for the screenshot card, in two layers: 0 1px 2px rgba(23, 23, 26, 0.05) and 0 16px 40px -12px rgba(23, 23, 26, 0.18). Elevation anywhere else comes from --bg-elevated and a 1px border, not blur.
Current exceptions, kept on purpose and not to be copied: the case-page subnav is a translucent 16px panel (it is chrome, not content), and .cv-download and .skip-link sit at 8px.
Motion
Intentional, never decorative. Everything animates once, on entry, toward rest. No looping motion except the two status pulses (the availability dot and the nav mark ring, 2s ease-in-out).
--ease-out
cubic-bezier(0.16, 1, 0.3, 1), also aliased as --ease and --ease-brand. Soft on entry, decisive on exit. Every transition and keyframe that names an easing uses it. --ease-in-out (0.65, 0, 0.35, 1) and --ease-spring (0.34, 1.56, 0.64, 1) are declared and currently unused.
reveal
.reveal: opacity 0 and translateY(30px) to rest, 0.8s..reveal-stagger cascades direct children instead (translateY(20px), 0.7s, delays 0.05s to 0.55s for six children). Trigger: IntersectionObserver at threshold 0.12 with rootMargin 0 0 -10% 0, once. This page uses it on every block.
CountUp
0 to the value in 1600ms with cubic-out (1 - (1 - p)^3), starting at 40% visibility. The server and the first client render carry the final value, so crawlers and no-JS readers see the real number and hydration never mismatches. aria-label always exposes the final value. Locale-aware formatting.
diagram draw
Only connector paths animate: stroke-dasharray and offset 700 to 0, 1.1s, plus 25ms per fan path and 20ms per converge path from 300ms. Nodes and labels stay static. SSR defaults to fully drawn.
release reveal
Each .release fades in from translateY(16px) in 0.7s at 12% visibility. The rail fills in lime up to the reading position through --scroll-progress, computed from scroll (starts at 60% of the viewport).
nav entrance
translateY(-100%) to 0 in 0.8s, delayed 1.4s to match the Preloader fade. Routes without a Preloader pass immediate, which sets the delay to 0. This page does.
hover
Color and border-color in 0.2s. Buttons: all 0.3s, arrow translateX 3px. Row title to lime in 0.25s. Nothing scales, nothing bounces.
magnetic button
translate(x * 0.18, y * 0.25) relative to the cursor, fine pointers only. Off with reduced motion and on touch.
reduced motion
One global rule sets every animation and transition to 0.001ms, scroll-behavior to auto, hides the Preloader and the canvas, and forces revealed content visible. On top of that, each primitive checks prefers-reduced-motion itself: RevealOnScroll marks in-view at once, CountUp renders the final value, diagrams stay drawn, the timeline rail fills to 100%, MagneticButton and the grid canvas do not start. Test both paths before shipping motion.
Components
One entry per component the site renders. Every example uses the real classes and the real data. Where a component is fixed or sticky in production, the example shows its anatomy in flow.
Global nav
One fixed bar on every route: mark and name on the left, section links in the middle, language and theme switches on the right.
Static anatomy. The live instance is at the top of this page; the switches here do nothing.
Use
Every route, once. Routes without a Preloader pass immediate so the bar does not wait 1.4s off-screen.
Tokens
Height 64px. Background color-mix(in srgb, var(--bg) 60%, transparent) behind a 20px blur, bottom rule --border-faint. Mark: 24px circle, 1px --lime stroke, pulsing outer ring. Name and links in mono 13px, --text-dim to --text when active. Switches: 999px pills, --border stroke, 11px mono.
Rules
Section links carry the route (/#about) and render as plain anchors on the home page. Active state follows the last section whose top passed 100px. Links hide under 720px; the mark and switches stay.
Showcase row
The compact half of the project listing, under the Side projects label: logo tile in the rail, title, one hairline per row.
The side projects on /projects and on the home page. The three headline projects use the featured block instead.
Tokens
List top rule and row bottom rule --border. Row padding 20px 0, columns --rail plus 12 with a --gut gap. Title display clamp(20px, 2.2vw, 26px), weight 500, tracking -0.02em, to --lime on hover in 0.25s. Tile 40px, dropped under 720px. Hover fill --bg-hover. Placeholder title in --text-mute, no hover.
Rules
A row that goes somewhere is an anchor (internal Link or external target="_blank") and shows a pointer. A row with nowhere to go is a div. The tile sits in the rail so these titles land on the same vertical as the featured titles. Only the placeholder carries a status pill. Data lives in lib/data/showcase.ts, copy in the dictionary.
BrandMark
The logo tile: a real logo when one exists, otherwise a monogram tinted with the brand color.
CD
monogram + brandColor
logoSrc
logoSrc + logoBg
?
placeholder
size small
Use
Listing rows (64px) and case subnavs (40px). Never as decoration elsewhere.
Tokens
Tile --bg-elevated, 1px --border, radius 16 (10 at 40px, 12 at 48px). Logo object-fit: contain with 8px padding (5px at 40px). Monogram display 24px weight 600 in --brand-color, falling back to --text-dim. Placeholder: dashed border, --text-mute.
Rules
logoBg for marks that only exist in white: the tile and its border take the brand color in both themes. brandColor tints the monogram only and is ignored once logoSrc is set. SVG logos render unoptimized. The tile is aria-hidden; the row title carries the name. Assets live in public/brands/.
Status pills
Two visual states for five statuses: moving (active) and not there yet (neutral).
In pilotIn useLiveIn progressComing soon
Use
Project status in listing rows and the case hero. Not for tags, stack chips or verdicts, which use the 4px chip.
pilot, inUse and live are active; building and soon are neutral (STATUS_VARIANT). Never a filled pill. The border alpha uses the --grid-line triplet so it follows the theme.
Typographic numbers
Large numbers as plain type between two hairlines, like the Signal band on the home page.
5M+
users reached across live products around the world.
27K+
active customers supported on highly reliable platforms.
6yr
building reliable software, from startups to larger companies.
Use
Three to four real, owner-confirmed numbers. Never an invented or unverifiable metric.
Tokens
Value display clamp(48px, 5vw, 64px), weight 500, tracking -0.035em, line 1; unit at 0.5em, weight 400, --lime. Label sans 14px, line 1.55, --text-dim, max 28ch. Band rules and column rules --border; band padding --s-8.
Rules
CountUp on the value: 1.6s cubic-out from 0 at 40% visibility, final value server-rendered and in the aria-label. Never inside a box. The first column has no left rule; under 720px columns stack with a top rule each.
Line diagram
Dots and thin curves, no boxes. A source fans out into branches that converge into an output.
Static here. In production the connector paths draw on scroll; nodes and labels never move.
Use
Pipeline and flow explanations on case pages.
Tokens
Dots r 3.5 (--text at the origin, --lime on branches), r 2 converge points in --border-strong, r 4 to 4.5 target nodes. Paths stroke 1.2 in --border; the final step stroke 1.5 in --lime. Labels mono 12px --text-dim at x + 14 of their dot; node titles sans 15px weight 500; sublines mono 10px --text-faint.
Rules
Paths connect dots and never cross a label: fan paths end before the label column, converge paths start after it. All colors are tokens, so one set of coordinates serves both themes. Only paths animate (dasharray 700, 1.1s, staggered). SSR renders the diagram fully drawn.
Release-notes entry
One career release: the version as typographic anchor, hairline-separated from its neighbors, on a thin rail with a small node.
Tela builds AI agents and automation systems for large companies in Brazil, including Azul, B3, iFood, JusBrasil and Grupo Ultra. As a Forward Deployed Engineer, I work close to customers and own hard problems end to end, from understanding how their operation runs to shipping software that holds up in production.
+Build AI agent workflows, integrations and automations for real customer use cases
+Work directly with customers to understand their systems, processes and constraints, and turn them into software
+Ship production software, not demos, and keep it improving after the first go-live
Marker tones, all three:
+added
+shipped, highlighted
★led
The latest release, abridged: 3 of its diff lines and 6 of its stack chips. The rail is shown fully filled.
Use
The Experience changelog only. The metaphor (semver, diff lines, hashes, branches) belongs to the career section and nowhere else.
Tokens
Rail 1px --border at 24px, fading over its last 96px; progress in --lime. Node 10px, --bg fill, --border-strong stroke, --lime-dim once in view; HEAD is the only filled node. Version display 30px weight 500. Role sans 15px weight 500; company mono 13px lime with a 9px arrow. Status chip mono 10px uppercase, 1px currentColor, radius 4: lime for LATEST and CURRENT, orange for PART-TIME. Meta right-aligned mono 12px, date 13px in --text. Summary sans 15px line 1.65. Diff marker mono 12px: --green plus, --lime shipped, --violet star. Diff text sans 14px --text-dim, strong in --text weight 500. Stack chips mono 11px, 1px --border, radius 4.
Rules
No per-release card: releases separate with one hairline each. The date, not the version, carries the ordering. A side project is a branch: its node sits 12px right of the rail and a curve peels it off, always hollow. The part-time note is a 2px orange rule, no fill. .release-footer resets the padding the global footer rule would add. Under 880px the head stacks and the meta aligns left.
Editorial list
Principles as a two-column list of hairline-topped rows: a short display title and one paragraph each. The Process section.
Career as a changelog.
Each role becomes a semantic version. Bullets become diff lines. Companies become git tags. This metaphor runs through the whole experience section.
Tokens before pixels.
Palette, type scale, 8pt spacing and motion easing locked in CSS variables before a single layout was drawn. One source of truth: globals.css.
Movement with purpose.
Reactive grid, headline cascades, magnetic CTAs, scroll-linked timeline. Every animation guides attention or rewards exploration, never decoration.
Show, don't tell.
Real numbers (5M+ users, 27K+ customers) instead of adjectives. Short, direct CTAs. Code-comment markers as section dividers. No buzzwords.
Use
Principles, steps, criteria: any short list where every item deserves a sentence. Not for data, which gets a table.
Tokens
Two columns with a --s-8 gap; item top rule --border, padding --s-5 0 --s-6. Title display 18px weight 500, tracking -0.01em. Body sans 15px, line 1.65, --text-dim, max 52ch.
Rules
No numbers, no icons, no boxes. The title ends with a period. One column under 720px. Children reveal with a stagger.
Patterns
Ways of doing things that repeat across routes. They are rules, not suggestions.
Screenshot redaction
Sensitive data is blurred in the pixels before the image is uploaded, never with CSS on the public site. Per-term redaction uses a 4px typographic blur on each name, identifier or amount; whole-document redaction blurs the entire PDF page. The caption says what was blurred, so the reader knows the image is edited.
A CSS filter is not redaction: the original pixels still ship and are one devtools toggle away.
Hairline sections
Sections and rows separate with 1px rules in --border (or --border-faint inside a list). Hierarchy comes from type size, weight and whitespace. A box is reserved for artifacts.
No eyebrows
Nothing sits above a title. The title carries the section; the anchor nav or subnav carries the index. The old .eyebrow, .process-card, .latest-chip and .branch-chip classes were removed for this reason.
Prose between points
Numbered points do not stack. Between two of them there is a paragraph of prose that connects them. A wall of bullets reads as a slide; a sentence between points reads as thinking.
Route plus hash
Links to a home section always carry the route: /#about, /#projects, never a bare #about. They resolve from any route. On the home page itself the nav renders them as plain anchors, because next/link only scrolls to a hash after an actual route change. Back controls on case pages fall back to /#projects when there is no on-site history.
Dual-theme logos
A logo tile has to survive both themes. Marks that only exist in white get logoBg with the brand color, so the tile and its border take that color in both themes. Monogram fallbacks get brandColor. Lime borders at partial alpha use rgba(var(--grid-line), a), a triplet that mirrors --lime per theme, instead of a literal lime.
Common mistakes
Each row happened at least once during the build. The fix column is what is in code now.
Mistake
Fix
Olive accent in the light theme.
Darkening #c5fc4d in place lands on olive. The light lime shifts hue toward green and keeps saturation: #357a12. Never derive the light accent by lowering lightness alone.
White logo on a light tile.
Set logoBg on the showcase entry. BrandMark paints the tile and its border with the brand color in both themes.
Sentences set in mono.
Anything with a verb is sans at 13px or larger. Mono is for labels of about three words or fewer: chips, dates, hashes, nav items, the clock.
Numbers inside cards.
Numbers are typographic marks between hairlines (.signal). CountUp on the value, a sans label under it, no box.
Diagram lines crossing text.
Paths connect dots, and labels sit to the right of their dot, outside the path corridor. Fan paths end before the labels start; converge paths start after they end.
Decorative eyebrows above titles.
Removed. A title and a lead sentence. The section index lives in the anchor nav.
Default cursor on a linked row.
Rows that go somewhere render as <a> (Link or external anchor) and get cursor: pointer through a.showcase-row. Static rows stay a <div> with the default cursor and do not pretend.
next build corrupting the dev server's .next.
Dev and build write to the same folder. Stop the dev server before a build, or build from a separate checkout. After a build, rm -rf .next and restart dev.
Global footer selector leaking into component footers.
The site-wide footer { padding } rule also padded the release <footer>. .release-footer resets padding to 0. Prefer class selectors for chrome; an element selector reaches every semantic footer in the tree.
Review checklist
Run it before calling anything done. Every unchecked box is a defect, not a nuance.
