The site reads like an engineer's sheet that a designer drew. Black ink on near white paper, hairline wires, numbered stages, and a single orange mark that shows what is moving or where you are. Nothing is decorated. The page earns attention through scale: an 80px headline beside an 11px uppercase label, a full width case study cover beside a quiet facts column. That jump in size is the brutalism here, not boxes, rules or heavy borders.
The drawing metaphor is literal on the home page. The process diagram is an animated system figure in the same ink and the same orange, built from the IEEE 1016 design description model and the SyRS data flow shape. The candidate home at /next turns the same figure into a small isometric model in three.js: same topology, same 12 second signal, same tokens. Everything else on the site borrows its restraint: monochrome neutrals with zero chroma, flat surfaces, pill actions, and photographs as the only full color on the page.
Density is low and the rhythm is generous. One shell width aligns every section. Light mode only: there is no dark theme and no dark: variant anywhere in the shipped components.
none, no blur, no gradients.7 tokens, oklch
A greyscale drafting palette with one fired orange held in reserve.
primary · signal
oklch(0.646 0.184 45)
(--chart-1, exposed as --color-signal): the only warm color on the site. It marks three things and nothing else: what moves in the process diagram (the travelling dot, the drawn segment, the lit stage), keyboard focus on every page (2px outline, 3px offset), and position (the active nav underline and the case study Next arrow). It sits in a chart slot so a tweakcn theme paste can never leave the diagram colorless.
neutral · ink
oklch(0.1908 0 0)
(--foreground, also --primary): headlines, body text, diagram wires, primary pill fill, text selection background.
neutral · paper
oklch(0.9911 0 0)
(--background): the page, input fields, and the knockout discs inside the diagram.
neutral · vellum
oklch(0.9601 0 0)
(--secondary and --muted): the contact form panel, empty image tiles, and the hover fill of outline pills.
neutral · graphite
oklch(0.4386 0 0)
(--muted-foreground): taglines, secondary copy, FAQ answers, inactive nav labels, footer links. Roughly 7.5:1 on Drafting Paper.
neutral · hairline
oklch(0.9189 0 0)
(--border): section dividers, the footer rule, FAQ row rules, outline pill borders.
neutral · field-stroke
oklch(0.62 0 0)
(--input): input and textarea borders only. Set at 0.62 lightness so a field edge clears 3:1 on both Drafting Paper and Vellum.
The One Signal Rule
Signal Orange covers 5% of any page at most. It marks motion, focus or position. It never fills a button, never colors body text, never decorates.
The Zero Chroma Rule
Every neutral is pure grey (chroma 0). Warmth comes from photographs and the signal, never from tinted paper or tinted text.
The One Block Rule
Colors change only inside the TWEAKCN BLOCK markers in src/styles/global.css. No component hardcodes a color.
Inter, nine sizes
Display Font: Inter Variable (with ui-sans-serif, system-ui, sans-serif)
Body Font: Inter Variable (same stack)
Label Font: Inter Variable, uppercase and tracked
Character: One neutral grotesque doing every job, so hierarchy has to come from size, tracking and case. Display sizes run tight (negative tracking down to -0.035em, line height under 1); the tagline runs wide (0.14em) and small.
Class merging. cn in src/lib/utils.ts declares the nine tokens as font sizes. Without that, the merge reads text-h6 as a color and drops it beside text-primary-foreground.
Director of Design.
page openers, the home hero, case study titles, the mobile menu items, CTA headings, stat values.
Container Alliance
section headings, the featured work card title, essay rows, photo series names.
Tânia, 50 anos
work card titles, the footer email, case study summaries, h2 inside long form text.
How long does a project take?
FAQ questions and blockquotes.
Approach
h3 inside long form text.
See the work
every pill label, hero collage rows, company names.
Lucas Teixeira is Director of Design at Fetchly Labs, leading 14 designers across Brazil and Latin America.
intros, long form case study and essay text (held to max-w-3xl, about 48rem), form field text.
Case studies in product design, discovery, DesignOps and Webflow.
default text, FAQ answers, service lists, case study facts.
Brasília
meta rows under a heading, field and fact labels, nav links, badges, figure captions.
The Nine Sizes Rule
Only these nine tokens exist. Each one carries its own size, line height, tracking and weight, so text-h2 is the whole decision. No arbitrary text-[...] sizes, no font-bold.
The Semibold Ceiling Rule
Weights stop at 600, and the shipped tokens use only 400 and 500. font-synthesis-weight: none keeps the browser from faking anything heavier.
The Scale Jump Rule
Emphasis is a jump in size, never a box, a rule or a color. An h1 beside a tagline is the signature contrast.
The Bare Heading Rule
Nothing sits above a heading: no eyebrow, no kicker, no section label. Meta goes below the heading, beside it in a facts column, or into the copy.
One shell, 86rem
One container governs every section: the shell, centered, 86rem wide at most, with a 1.25rem gutter that grows to 2rem from 768px. Sections stack with 3.5rem of vertical padding, 5rem from 640px; the closing CTA band gets 6rem, then 8rem. The sticky header is 5rem tall, and anchor scrolling leaves the same 5rem of room.
Grids are simple and content led. Work cards run one column, then two from 768px, under a full width 16:9 feature card. Services run one, two, then three columns. Case studies split into a 16rem sticky facts column and a reading column from 1024px. The home hero puts copy beside a three column photo collage that stretches to the copy height from 1024px. Breakpoints are the Tailwind defaults: 640, 768, 1024, 1280px.
The process diagram keeps a 900px minimum width and scrolls sideways inside its own frame on narrow screens, with the scrollbar hidden. That is a known gap: on a phone the right half of the figure is cut off with no cue that it scrolls, and the frame is not keyboard reachable. The 2026-10-07 audit tracks it for /impeccable adapt. The /next model has no such problem: it scales inside a 4:3 box at any width.
0.25rem1.25rem2rem3.5rem5rem6rem8rem5rem86rem640pxsm768pxmd1024pxlg1280pxxlThe One Shell Rule
Every section uses the shell utility. Nothing sets its own max width or side padding, so every left edge lines up.
Flat
Flat. Every shadow token in the theme resolves to none, and there is no blur or backdrop filter anywhere. Depth comes from tone and content: Vellum panels and tiles sit on Drafting Paper, photographs carry their own depth, and the sticky header separates from content by being opaque paper, not by a shadow.
The Flat Sheet Rule
Surfaces never lift. A state change is a fill swap, an opacity step or a 2px nudge, never a shadow.
Three radii
Three radii and nothing else. Actions and badges are full pills (9999px). Image tiles, case study covers and the form panel use a soft 14px corner (rounded-xl, the 10px base radius plus 4px). Input fields and the small photo grid tiles use the 10px base (rounded-lg). Diagram inputs and the output node are pills too, so the figure and the page share one silhouette. Rules are 1px hairlines, drawn with the Separator component or a Hairline border; the only thicker line is the 2px signal underline on the active nav link and the 2px rule beside long form blockquotes.
The Three Radii Rule
Pills for anything you press or tag, 14px for anything you look at, 10px for anything you type into.
10 live samples
Quiet and exact. Flat ink pills, hairline borders, motion only as a small nudge. Nothing competes with the headline.
button · button-primary
Ink pill for the one main action of a section.
button · button-outline
Hairline pill for secondary actions; fills with Vellum on hover.
button · button-round
Circle with an arrow that jumps to the process section; fills with ink on hover.
input · input
Paper field with a Field Stroke border and a tagline label; border turns ink on focus.
nav · nav-link
Tagline links; the active page gets a 2px Signal Orange underline.
chip · badge
Vellum pill with tagline text for services; no border, so it never reads as a button.
card · image-tile
Photo in a Vellum tile over an h3 title and a tagline year; photo zooms 3% and title underlines on hover.
On the About page, newest role first.
Yes, remotely from Brasília.
custom · label
Native details row between Hairline rules; the plus turns into a cross when open.
custom · signal
Two stages of the signature diagram: ink rings and wires, the active stage lit in Signal Orange.
custom · signal
The /next hero before WebGL loads, copied from SystemsScene.astro: three input blocks, five stage blocks, one output block, a dashed feedback arc, and the signal in Signal Orange. The three.js model fades in over it on idle.
Button in src/components/ui/button.tsx, restyled to the pill system. React blocks use <Button asChild> around an anchor; Astro pages put buttonVariants() on the a or button directly, because asChild cannot wrap Astro children.variant="round" size="icon"): a 3.5rem circle with a Hairline border and a 20px arrow; hover fills it with ink and turns the arrow paper. Used once, in the home hero, to jump to the process.outline-none, so the global Signal Orange outline always shows.Badge in src/components/ui/badge.tsx, restyled.The shadcn Separator: a decorative 1px Hairline rule. It opens the footer and sits above the case study Next link.
required validation.Native details rows between Hairline rules. The question is h4 with a 20px plus icon at 1.5 stroke that turns 45 degrees into a cross when open. The answer is Graphite body text, 42rem wide at most. It opens without JavaScript.
A value at h1 over a tagline label, built as dt/dd pairs. One column, then two from 640px.
An inline SVG system figure: three pill inputs wire into five numbered ring stages, ending in a pill output, with a dashed feedback loop back to the start. Wires are 1px ink. One 12 second linear loop sends a Signal Orange dot along the spine. Each stage lights orange and pulses as the dot arrives, and a return dot rides the loop. No JavaScript. Under reduced motion every segment shows drawn and nothing moves. A background variant drops the labels and sits at 50% opacity behind copy.
/next hero)src/components/three/SystemsScene.astro (poster and loader) and src/components/three/systems-scene.ts (the scene). No framework runtime.MeshLambertMaterial faces with ink edge lines; one ambient and one directional light. No textures, blur or gradient fills.--foreground, --secondary, --muted-foreground, --chart-1), so a theme paste reaches the scene.requestIdleCallback (2s timeout, setTimeout fallback), then imports three.js and the scene as their own chunk. The poster fades out over 700ms once the canvas has drawn, and stays if WebGL is missing.IntersectionObserver), and the pixel ratio is capped at 2.role="img" with a label that describes the figure; the poster and canvas are hidden from assistive tech.src/components/Img.astro for Astro pages and src/components/Image.tsx for React blocks, both built on sized and imgProps in src/lib/img.ts./public/images so the CMS can write to them. In production every URL goes through the Netlify Image CDN (/.netlify/images?url=...&w=...&q=72) with a srcset of 480, 768, 1080, 1440 and 1920px and a sizes hint. There is no fm parameter: the CDN picks AVIF or WebP from the Accept header. In dev the original file is served.sized for that host's resizer, in one place.eager with fetchpriority="high": the first home collage tile, the first two cards on /work, the case study cover, the first photograph. Everything else is lazy with decoding="async". A component never decides this for itself; the page passes it.width and height or sits in a fixed aspect box.alt doubles as its figure caption in tagline style./next model on the same clock. Nothing else animates on its own.Inline links in long form text and contact details are ink with a 40% ink underline at 4px offset; hover darkens the underline to full ink.
The Poster First Rule
Anything heavy draws a real HTML or SVG poster first and loads its script on idle. The site ships no framework runtime.
The Position Priority Rule
The page, not the component, decides image priority. Only the first viewport loads eager with fetchpriority="high".
shell utility (86rem max, 1.25rem gutter, 2rem from 768px).text-h2, not a size plus a weight plus a tracking.Button or buttonVariants: a 3rem pill with an h6 label; ink fill for the primary, Hairline outline for the rest.Img.prefers-reduced-motion.TWEAKCN BLOCK in src/styles/global.css.alt as a caption.none on purpose.dark: variant. The site is light mode only.font-bold, or use any typeface other than Inter.outline-none or a ring to a control.fm) on CDN image URLs, or mark an image eager inside a shared component.