--- version: alpha name: Beto Muniz description: Visual identity for betomuniz.com — a near-black wall, monumental condensed type, and blue artwork seen only through the letters. colors: primary: "#08090d" secondary: "#f1f2f6" tertiary: "#a3a8ba" typography: display: fontFamily: Archivo fontSize: 380px fontWeight: 900 lineHeight: 0.8 letterSpacing: -0.02em headline: fontFamily: Archivo fontSize: 68px fontWeight: 800 lineHeight: 0.92 letterSpacing: -0.01em title: fontFamily: Archivo fontSize: 28px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0em body: fontFamily: Archivo fontSize: 20px fontWeight: 400 lineHeight: 1.65 letterSpacing: 0em caption: fontFamily: IBM Plex Mono fontSize: 14px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0em spacing: base: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px section: 80px pageGap: 128px column: 832px pageWidth: 1360px rounded: none: 0px components: page: backgroundColor: "{colors.primary}" textColor: "{colors.secondary}" typography: "{typography.body}" cutTitle: backgroundColor: "{colors.primary}" textColor: "{colors.secondary}" typography: "{typography.display}" menu: backgroundColor: "{colors.primary}" textColor: "{colors.tertiary}" typography: "{typography.body}" row: backgroundColor: "{colors.primary}" textColor: "{colors.secondary}" typography: "{typography.title}" rounded: "{rounded.none}" padding: 12px rowActive: backgroundColor: "{colors.secondary}" textColor: "{colors.primary}" typography: "{typography.title}" rounded: "{rounded.none}" padding: 12px mutedText: backgroundColor: "{colors.primary}" textColor: "{colors.tertiary}" typography: "{typography.caption}" --- # Design System: Beto Muniz ## Overview Brutalist, minimal, monumental. The page is a near-black wall. Headings are enormous slabs of condensed type, and the site's artwork — grainy illustrations of classical monuments and statuary, printed in black and white — is visible only through those letters, like windows cut in concrete. Everything else is quiet white text. 1. **Minimal.** One idea per screen. No ordinals, counters, clocks, badges, uppercase micro-labels, or ornamental rules. 2. **Monumental.** Scale replaces decoration. Titles fill the viewport; everything else is plain. 3. **Direct.** Every section is one click away, from every page, in the menu. 4. **Readable.** Body text is large, white on near-black, in a clean grotesque. Never set reading text in mono or below 17px. ## Colors The site is black and white, in two themes. Dark is the default; a small sun/moon switch (after RSS in the menu; top right on small screens) swaps the two inks for a light theme (#eeeef1 wall, #0b0c10 ink, #5a5e6c muted) and remembers the choice. The new theme is revealed in a circle growing from the switch. - **Wall (#08090d):** every background. - **Ink (#f1f2f6):** all text and fills. - **Muted (#a3a8ba):** dates, descriptions, and secondary text. There is no accent colour, with one deliberate exception: the Newsletter link is iridescent purple (`.chroma`). The artwork is drawn in blue but printed in greyscale inside the titles. Hover and selection invert wall and ink. Colour appears only on hover of media: video thumbnails and project recordings return to their real colours while hovered. Beto's illustration stays black and white. ## Artwork Four pieces in `src/assets/art/`, mapped in `src/config/art.ts`: the statue with headphones (home), the hand and tablet (Blog), the sculptor's models (Labs), the lone column (404). They are never shown as plain pictures. `` clips a piece to the letters of a heading; the heading shrinks to its text so the letters frame the image, and a very faint copy of the piece sits behind the word so the drawing still reads as a whole between the letters. New pieces must match: periwinkle duotone with heavy grain, deep indigo shadows, pale pink-cream highlights, subject on the right, 16:9, no text. ## Social previews Every page has its own 1200×630 preview, drawn at build time by `src/utils/og.ts` in the site's style: Home is a black-and-white photo of Beto on stage with his name and the site address; Blog and Labs show their title with the artwork inside the letters; posts show the post title large under a small "BETO MUNIZ". Nothing is hand-made, so new posts get one automatically. ## Language Interface text exists in English and Portuguese. A small "EN/PT" switch sits beside the theme switch. Both languages are rendered into the page with `` (or `` on home) and the stylesheet shows one, chosen from the saved preference, else the browser's language. Blog post titles and bodies are never translated. ## Typography - **Archivo** (variable width and weight): cut titles at weight 900 and 62% width; headings (`display`) at 800 and 68%, uppercase; list titles at 500; body at 400, normal width, sentence case. - **IBM Plex Mono:** the menu, dates, and keyboard hints only. ## Layout No header and no hero. A page is a cut title, then one reading column (`.column`, 52rem) on the left. Home is one screen: the name as its title, a short friendly introduction, and Beto's illustration standing on the bottom edge beside it, printed in black and white (one side of it drags out into a horizontal long-exposure smear while hovered). On small screens the illustration becomes a faint full-width backdrop pinned to the bottom of the window. There is no separate About page and nothing else on home. The **menu** is the only navigation: a plain vertical list fixed down the left edge (Home; the sections; Search; and the social profiles, including Email, at its foot), like a product sidebar. On small screens it is a single row of links fixed to the top, and the social profiles a slim bar fixed to the bottom; both are edgeless glass. It persists across client-side navigation. ## Elevation & Depth Flat. No shadows, glass, or gradients, with one exception: the small-screen social bar and the command bar are glass; the bar is edgeless, blurring and dimming the page behind it with a fade instead of a border. The only texture is a faint static grain. ## Shapes Square. No border radius, no borders, no cards. Separate with space. The one exception is media: recordings on Labs sit in a squircle frame lifted by a soft glow (no drawn border), like app windows. ## Components - **Cut title (``):** see Artwork. On home, hovering a menu link cross-fades the letters to that section's piece. - **Menu (``):** medium-weight sans, muted links that turn ink on hover or when current; Home is always ink. No background, no border. On hover, bullet time: five fading grey echoes of the word peel away behind it in a slow rising arc and fold back in on leave. - **Row (`.row`):** list primitive. On the blog, writing and videos share one list and a small glyph (`.row__kind`: text lines or a play triangle) tells them apart. No filters or tabs. No dividers; on hover it floods with ink from the edge the pointer came in by, drains towards the edge it leaves by, and the text inverts. - **Introduction (`.intro`):** home only. Muted text with the key phrases in ``: semibold, lit by a slow shimmer (a soft band of light, like an assistant's "thinking" label) that crosses each phrase once on load, in reading order, and leaves it white. The LinkedIn link carries the same shimmer constantly until hovered (`.shimmer`), the site's only looping animation. Use it sparingly, a few phrases at most per paragraph. - **Follow panels (`.follow`):** end of a post. A faint lifted panel with the pitch on the left and one outlined button on the right. - **Work tooltip (`.work`):** on home, the three highlighted company names have a dotted underline and open a small lifted panel listing what Beto worked on there (hover, focus or tap). Data lives in `src/config/work.ts`. - **Media (`.duo`):** project recordings and video thumbnails, greyscale until hovered. No contrast or blend tricks, so UI detail survives. - **Quiet control (`.key`):** search and filters; plain text, dimmed until hovered or pressed. - **Shortcuts:** links with a two-key shortcut show it beside their name in small mono capitals ("B B", "X X"), dim until hovered; typing the pair follows the link. The `Cmd/Ctrl + K` command bar is switched off for now (its code remains in `src/components/shared/cmd/`). - **Prose:** 20px Archivo, 42rem measure, underlined links that invert. ## Motion Only `transform` and `opacity`, eased with `--ease-monument`, so everything stays on the compositor at high refresh rates. Nothing loops except the LinkedIn shimmer and the title artwork's breathing (it and the introduction's shimmer animate a text gradient, the only motion that is not compositor-only; both are confined to a few words); no timers or `requestAnimationFrame`. Rows flood, the menu highlight glides, cut layers cross-fade, the title artwork breathes (a very slow zoom in and out, looping), post titles morph between list and article, and reading progress on posts is one short tick per heading in the margin beside the menu, the current section's tick longer and bright (hover for its name, click to jump); on small screens, a thin bar across the top. All of it is disabled under `prefers-reduced-motion`. ## Do's and Don'ts - Do use the tokens and utilities in `src/styles/global.css` (`--paper`, `--ink`, `--muted`, `wrap`, `column`, `display`, `link`). - Do keep reading text large and high-contrast. - Don't show artwork outside a cut title, or imitate it with CSS. - Don't use colour anywhere except on hover of media. - Don't add a header, hero, second navigation, borders, cards, or radii. - Don't use arrows (→ ← ↗ ↓) or em dashes in interface copy. Links are plain words. - Don't add a third typeface, or animate layout properties.