# maxro.me

Source: https://www.maxro.me/
Captured: 2026-09-20
Tags: portfolio, landing, dark, both, minimal, dark-techno, calm, mysterious, confident, technical
Colors: #111014, #4a494d, #757479, #908f94
Type (body): Inter · 24px/36px · 600 — "I am Max’s AI. Mind telling me who you are?"
Type (button): Inter · 16px/24px · 400 — "I'm a friend"
Button: "I'm a friend" — fill #7b738c, text #a1a1a1, radius 16px, border 0px, padding 16px 0px, height 78px, type 16px/400
Radii: 16px (4), 24px (2), 9999px (1), 32px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/maxro-me/hero.webp?v=595eae41
- Hero (mobile): https://media.lvly.design/library/maxro-me/mobile-hero.webp?v=b663ebc9
- Full page (desktop): https://media.lvly.design/library/maxro-me/full.jpg?v=87a5d2c9
- Full page (mobile): https://media.lvly.design/library/maxro-me/mobile-full.jpg?v=d8be97ee
- Clip preview (mp4): https://media.lvly.design/library/maxro-me/video-itjiqj.preview.mp4?v=4daf9f1e

A personal site that has replaced its home page with a chat prompt. The ground is a near-black #100f13 that fills 99% of the frame, and the only lit objects are a two-line question in 24px/600 Inter, four hairline intent cards and a wide composer field — all of it parked in the bottom 40% of a viewport that never scrolls. It works because the contrast budget is spent in one place: the headline is the sole near-white, labels drop to a mid gray (#908f94 territory), and every surface is separated from the ground by a 1px white-at-~7% border plus a fill barely two percent lighter, so the interface reads as etched rather than stacked. The composer carries a faint top-lit gradient that makes it the brightest rectangle on the page, which is the whole navigational instruction — there is no menu, no hero image, no scroll cue, just a question and somewhere to answer it. The result is quiet and slightly uncanny in the right way: a portfolio that behaves like a terminal prompt with very good manners.

## Steal-worthy details

- Two lines of copy are the entire hero — 24px/600 Inter at 36px line-height, centered, near-white, with no kicker, no subhead and no image; the second line is a question, so the page reads as an utterance rather than a banner
- The primary CTA is a text field, not a button — an 806x80 composer at 24px radius with a placeholder in mid gray and a top-lit inner highlight (#7b738c at low alpha along the upper edge) that makes it the brightest surface on the page
- Four intent cards pre-write the visitor's first message — friend, founder, recruiter, designer — each a 193x79 tile at 16px radius with the speech-bubble icon on its own line above a 16px/400 label, so the card is a two-row stack rather than a crowded pill
- Surfaces are defined by a hairline, not a fill: card ground sits roughly 2% lighter than the #100f13 page and the 1px white-at-~7% border does all the separating, which is why nothing on the screen looks like a floating panel
- Everything is anchored low — the top ~45% of the viewport is empty ground, the headline lands at 46% and the controls run 58–78%, which reproduces a chat window that has not started yet
- Chrome is two objects: a 14px/600 two-initial wordmark at top-left and one circular outline help icon at top-right, both in muted gray with no bar, no border and no links between them
- On mobile the four cards become a horizontally scrolling row of full-round pills with the icon inline before the label, and the composer pins just above the home indicator — the desktop grid is not squeezed, it changes shape
- The page is exactly one viewport tall and does not scroll, so there is no content to browse until the visitor answers; the radius set stays tight at 16 / 24 / 32 / full so the shapes feel like one family

## Style recipe

Build a conversational dark interface where the page asks a question and the answer field is the only call to action.

Color: ground #100f13 (keep it at 99% coverage — no section bands, no gradient washes). Surfaces one step up at ~#17161a. Borders 1px rgba(255,255,255,0.07). Primary text near-white #f2f1f4, secondary #908f94, placeholder #757479. Allow exactly one lightened accent, a desaturated lavender-gray #7b738c, and spend it only on an inner top highlight or a focus ring — never as a filled button.

Type: Inter everywhere. Headline 24px/600 at 36px line-height, normal tracking, centered, two lines maximum, phrased as a sentence or a question. Labels and placeholders 16px/400 at 24px. That is the whole scale — resist a third size; hierarchy comes from color, not from point size.

Shape and space: radii 16px for tiles, 24px for the input, 32px for any large container, full-round for icon buttons and for mobile chips. Gap 16px between tiles, 24px between the tile row and the input. Tile padding 16px with the icon on its own line above the label. No shadows; separation is border plus a two-percent fill lift. Center the whole cluster on a max width of ~810px and anchor it to the lower 40% of the viewport, leaving the upper half deliberately empty.

Motion: fade the headline in first, then stagger the option tiles by ~60ms each, 200ms ease-out. Hover lifts a tile's border to rgba(255,255,255,0.14) and its fill by one step — no transform, no glow. Focus on the input raises the top highlight to full strength.

The two moves that make it recognizable: replace navigation with a single question plus a text field, and offer three to five pre-written identity chips that fill that field for the visitor. Keep the page one viewport tall so there is nothing to scroll past the prompt.