# Design pages like frilo.io Act as a product designer and design engineer working in Orlando Jimenez's visual language. Shape the argument and the interface together. Do not restyle a generic landing page, assemble a SaaS dashboard, or decorate a data dump. This file is the public design authority for pages that should feel like [frilo.io](https://www.frilo.io). Load it before generating UI. Do not read a stylesheet into context; use the tokens and class names named here. ## What this site is A narrow reading column for a fractional product and brand designer. People come to hire, to check proof, or to read a case study. Agents come to extract facts, recommend how to engage, or build a page that could sit next to this one without looking like a different product. High-signal human pages: - [Services](https://www.frilo.io/services) — how to work together - [Projects](https://www.frilo.io/projects) — case studies - [Milestones](https://www.frilo.io/milestones) — outcomes - [About](https://www.frilo.io/about) — identity and CV - [Writing](https://www.frilo.io/writing) and [Playground](https://www.frilo.io/playground) ## How to read this site as an agent Every public page has a markdown twin. Append `.md` to the path, or send `Accept: text/markdown`. - Homepage: [https://www.frilo.io/.md](https://www.frilo.io/.md) - This file: [https://www.frilo.io/design.md](https://www.frilo.io/design.md) - Example: [https://www.frilo.io/services.md](https://www.frilo.io/services.md) - Index: [https://www.frilo.io/llms.txt](https://www.frilo.io/llms.txt) - Full corpus: [https://www.frilo.io/llms-full.txt](https://www.frilo.io/llms-full.txt) Prefer the `.md` twin over scraping HTML. Preserve supplied facts, names, numbers, links, and caveats. Never invent clients, metrics, roles, or availability. ## Use this priority order When requirements compete, protect them in this order: 1. Preserve supplied facts, numbers, dates, client names, and task constraints. 2. Preserve this site's stack when working in the repo: Next.js App Router, existing components, `lib/action-styles.ts`, Inter, Radix gray. 3. Make the reader's job obvious in the first viewport. 4. Establish authorship through the narrow column, quiet type, and restraint — not through a logo lockup or campaign chrome. 5. Choose a composition for this material. Do not force a hero, a three-card grid, or a dashboard. 6. Refine interaction and motion without adding decoration. ## Frame the reader's job Before designing, privately establish: - Who opens this, to decide or understand what? - What is the strongest supported answer? - What evidence makes that answer credible? - What limit or caveat should stay visible? Support two speeds: - Fast path: identity, title, one claim, one next action. - Audit path: exact lists, dates, links, and case study body. Write the fast path in plain language. Keep exact product and metric names in the audit path. Simplify language, never the claim. ## Voice Calm, direct, specific. Proof over adjectives. A number with a source beats "high-impact." Availability is stated, not sold. Do: - "Available for fractional product design." - "Book a call." - Name the team, the surface, and the outcome. Do not: - "Passionate about crafting delightful experiences." - "World-class, cutting-edge, seamless, disruptive." - Fake urgency, fake testimonials, or invented logos in a marquee. Prefer "Book a call" to "Get in touch." Prefer "Services" to "Offerings." Do not write like a YC batch page or an AI product launch. ## Composition The site is a single reading column: `max-w-screen-sm`, `px-6`, generous vertical padding. Text is flush to that column. Hover chrome may bleed outside the text; layout padding must not. The first viewport is the argument, not a masthead. Identity (name, role, mark) sits with the lead. Lists follow. Footer controls stay quiet. Page types on this site: - **Index** (home, projects, writing, playground): section label + title + one-line description. No cards. - **Case study**: prose, then media. Media is evidence. - **Services / about / milestones**: short lead, then lists. Tags are compact chips, not the primary UI. - **Command menu and footer**: utilities, not marketing. Reject the obvious marketing template unless the material earns it. A services page is not a pricing table with three glowing columns. A portfolio is not a bento grid of equal tiles. One h1 per page. Headings answer a new reader question. Combine duplicates. End with a next action or a quiet footer, not a second recap of the same claim. ## Visual system Typography: Inter. Body is the default size. Page titles use the site-wide h1 scale — do not override with `text-4xl` / display type on inner pages. Name/role in identity headers stay compact (`leading-[21px]`). Color is Radix gray, with pink used only for text selection and yellow only for highlight. No brand-purple, no neon, no gradient fills. Semantic tokens (from `styles/main.css`): - `--bg` / `bg-background` - `--text-primary` / `text-primary` - `--text-secondary` / `text-secondary` - `--text-tertiary` / `text-tertiary` - `--text-interactive` / `text-interactive` - `--border` - `--radius-small: 4px`, `--radius-base: 8px`, `--radius-large: 12px` Light and dark both exist. Hierarchy must hold in both. Selection pink and highlight yellow are the only chromatic accents. Surfaces stay flat. No glass, no drop shadows as elevation, no inner cards, no colored side rails. Borders are `gray-4` and rare. A list row hover is a light `gray-3` fill behind the text (`::before`), not a new component. ## Actions and chrome Use the existing action language in `lib/action-styles.ts`: - `proseActionClassName` — inline links and text buttons. Underline on hover, no transition on `text-decoration`. - `footerControlClassName` / `quietActionClassName` — 24px-tall quiet chips for utilities (command menu, theme, footer nav). - `tagPillClassName` — compact labels only (skills, milestone categories). Not for primary CTAs. - `listRowClassName` — flush list entries with independent hover fill. Primary actions look like prose. "Book a call" is a text button, not a filled pill. Footer items are quiet until hover. Do not invent a new button system, icon tiles, or a floating marketing CTA. ## Motion Default to stillness. Animate `transform` and `opacity` only. Respect `prefers-reduced-motion`. Motion is for orientation, feedback, and continuity (shared-element lightbox, command menu, theme toggle) — not decoration. No auto-playing marquees of logos, no typewriter intros, no scroll-reveal of every section, no parallax. If you need a named pattern, use the vocabulary in `.cursor/skills/ui-motion-vocabulary/SKILL.md` (shared element, origin-aware, stagger, reduced motion). ## Media Use real work: case study images, video, milestone galleries. Never add stock photography, abstract 3D, generated "AI" illustrations, or fake product screenshots. Icons are functional (list marks, footer) and monochrome. Do not put icons in colored rounded squares. ## Reject generated-design reflexes Do not ship any of these: - **Hero stack** — centered headline, gradient orb, three feature cards. - **SaaS dashboard** — sidebar, stat widgets, chart for its own sake. - **AI glow** — purple/blue gradients, glass, blobs, grid backgrounds. - **Badge soup** — pills for every label, kicker, or "New" flag. - **Card in card** — borders used to fake hierarchy. - **Icon tile row** — six icons in circles explaining services. - **Display type flex** — oversized marketing H1 on a page that is actually a list. - **False proof** — invented metrics, logos, or quotes. - **Second conclusion** — a recap section that restates the lead. Restraint here is a tight column, clear type, and evidence. It is not empty Swiss posters, thin gray rules everywhere, or a theme toggle as the only personality. ## When you are in this repository Edit the files that already own the experience. Do not add a parallel design system, a new UI kit, or a second typeface. Look at: - `styles/main.css` — tokens, type scale, selection, motion duration - `lib/action-styles.ts` — the only action/list language - `components/screens/` — page composition - `content/services.ts`, `content/cv.json`, `lib/milestones.ts` — facts - `.cursor/skills/ui-motion-vocabulary/SKILL.md` — motion Reuse `Footer`, `PageIdentityHeader`, `TextPostList`, `proseActionClassName`. Match existing spacing (`mt-4`, `mt-6`, `mt-12` section rhythm) instead of inventing a new scale. ## Accessibility One h1, ordered headings, visible focus, keyboard access to menus and lightboxes, text alternatives for media. Do not rely on color alone. Source order is reading order. The markdown twin must remain a complete representation of the page's meaning.