Brand resources

Visit /brand for the portrait identity, color palette, typography, icon guidance, and downloadable social cards. The page is linked from About and the command palette.

Identity

Use the full name, Nicholas Adamou, with the monochrome portrait. Preserve the portrait's proportions and keep space around it. Onebrief's logo identifies the current employer alongside the role; it is not the personal brand mark.

The core palette is ink #0c0a09, paper #fafaf9, stone #a8a29e, and surface #1c1917. Inter is the primary typeface. Use ink/paper for essential text; reserve stone for supporting labels on dark surfaces.

Typography and spacing

Shared page styles live in src/lib/styles/page.ts. Page titles use 30px text on mobile and 36px from 640px upward, medium weight, a 1.25 line height, and tight letter spacing. Introductions use 14px text with a 24px line height and a 12px gap below the title. Main section headings use 20px/24px; subsections use 16px/18px. Compact section labels use 14px medium text.

Page containers share a 672px maximum width, 20px side padding, and 24px/32px top padding. Major section stacks use 32px/48px spacing. Notes and case studies retain the shared reading typography in src/lib/styles/reading-prose.ts, with larger body text and a distinct H2–H4 hierarchy for long-form content.

Action buttons

Standalone calls to action use actionLinkClassName from src/lib/styles/action-link.ts: a rounded outline, 40px minimum height, 14px label, and 16px horizontal padding. Keep one Lucide icon after the label, with an 8px gap. The shared style sets icons to 16px, a stroke width of 2, and prevents shrinking. Mark these decorative icons aria-hidden="true".

Use a right arrow for internal destinations, an up-right arrow for external sites, a download icon for files, and directional arrows for scrolling. Compact page-action toolbars use their existing 32px controls and 12px icons. Footer actions also use 32px controls, with 12px labels and icons, a 6px gap, and muted text that becomes fully visible on hover or keyboard focus.

Social cards

Cards are generated at /api/og at 1200 × 630 pixels. Types include homepage, page, clients, brand, note, and notes. Both dark and light themes are supported. Main pages have their own card metadata; note images remain optional. Long titles and descriptions are bounded to preserve the layout. The root card uses the motto as its headline, an angled portrait panel, the current employer logo beside the role, and a footer explicitly identifying previous employers.

The renderer embeds the portrait and employer logo and reads bundled Inter fonts, so those assets do not depend on external requests. External article images are optional and fall back to the portrait if unavailable. Other cards share the angled photo panel and carry the motto in the footer. Cards omit the site URL.

Update src/lib/brand.ts and the downloadable public/brand/tokens.json together. The social URL includes a version parameter; increment it in src/lib/og.ts when changing the design to give sharing services a new image URL. Existing social posts may retain their own platform caches.

Asset sources

• Portrait and Onebrief logo: existing site identity assets.
• UI and GitHub icons: the site's Lucide icon package.
• Inter: Google Fonts, bundled with its SIL Open Font License in public/fonts/OFL.txt.

Homepage layouts

The homepage dock's Homepage layout button, Cmd/Ctrl+Shift+L, or the Homepage layout command in Cmd/Ctrl+K opens a picker for Hero and Two columns. Two columns is the default; an existing saved preference takes precedence. Selecting either option closes the picker and saves the choice in this browser. The command palette also offers direct Layout: Hero and Layout: Two columns actions. Hero keeps the centered scene card and content stack. Two columns uses a sticky 384px introduction and a 384px content column, with 24px outer gutters and the scene behind them. The top navigation and bottom dock stay centered in both layouts. Its introduction heading is 16px; the Hero layout keeps its larger heading. Above 1536px, both columns start 24px from the top alongside the centered navigation. Smaller screens retain the stacked arrangement.

To add a layout, add a typed option in src/lib/home/home-layouts.ts and a data-home-layout CSS variant in HomePage.module.css. The preference hook is src/hooks/use-home-layout.ts. Reuse the existing content tree and scene surface; layout changes should not duplicate content or remount the canvas.