The visual system behind the Reblis suite: color, typography, layout, components, and voice. Design is the product: typography does the work decoration would do elsewhere, and two accents carry the whole brand.
What the brand is and what guides every decision. Reblis is the Design Engineer lane: design that ships as production code. Evidence, not decoration.
Typography does the work that decoration would do elsewhere. When in doubt, set it tighter, weight it heavier, and remove the box around it.
The full positioning lands in one viewport. Deeper attention is earned only if the visitor chooses to scroll.
Weight, scale, and tight tracking replace borders and boxes. 1px rules carry hierarchy where shadow would elsewhere.
Inter is the designer; JetBrains Mono is the engineer. Mixing both in a single title is the brand's defining move.
Every component renders correctly in both themes. The toggle persists; the print stylesheet targets light.
A live URL beats a Figma comp. Every section is built and deployed before it is polished.
Inline emphasis is white on pink, cloned across line breaks. Never an underline, never a gradient.
Skim-reading on a laptop. Decide whether to reach out inside 60 seconds.
Judge the craft of the portfolio itself as harshly as the work it shows.
Evaluating range, taste, and shipped revenue-bearing work.
Two families, nothing else. Inter carries display, lede, and body; JetBrains Mono carries every kicker, meta string, tag, button, and label. JBM weight 400 is intentionally not loaded, so any rule that omits font-weight is bumped to 500 by the closest-weight fallback. Brand-locked, not an oversight.
Body copy stays at sixteen pixels with 1.55 line-height, capped near 65ch for legibility.
A design engineer who leads design and ships the code. The only inline emphasis the brand accepts.
Banned: em-dashes in interface copy (use commas, colons, parentheses, periods) and background-clip: text gradient headings. Emphasis comes from weight and the accent-block, never a gradient.
A 1400px container, three side-gutter widths (24 / 40 / 64) and three section rhythms (64 / 80 / 112). The box model shows the spatial structure. Use the toggle to see how it scales across mobile, tablet, and desktop.
Restrained: tinted neutrals plus two accents, combined under 10% of any viewport. Every token has a light and a dark value (shown light / dark); the swatches below render in the theme you're viewing. Toggle the theme in the header to see them flip.
A calligraphic serif "R" glyph paired with the REBLIS.Ai wordmark in JetBrains Mono 600. The glyph is pink on light surfaces, ink on muted surfaces, and reverses to page on ink. Keep generous clear space; never recolor it off-brand.
The reusable building blocks. Flat, sharp-cornered, mono-labelled. The only interactive hover treatment on a card is a full pink border plus a tiny pink corner-flag: no transform, no shadow.
Outline by default; hover fills pink. The secondary action is a mono text-link beside it.
1px indigo border, mono uppercase, never filled. Pink is reserved for hover/active, never category labels.
Border --rule → --pink on hover, plus a 12×12 pink triangle in the top-right corner.
The kicker is a section ID in mono pink. The accent-block is the only inline emphasis.
Editorial-confident, not breathless. First-person but spare. Concrete verbs (ship, lead, build, wire), never aspirational filler. Brevity is the personality.
Say it once, plainly. No adjectives stacked for effect, no "Key takeaways," no bullet-point salad.
"Director of UX for 15 years. Now I lead design and ship the code, with Claude Code as primary collaborator."
Real screenshots over fabricated metrics. Problem / Approach / Outcome in plain prose, never "+247% engagement."
"Built and deployed in one session. 171 tests. Live behind basic auth."
The hard bans. These are brand-locked rules, not preferences: if a design includes any of the below, it is off-brand.
background-clip: text gradient headings