# 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.



Visit [/brand](https://nicholasadamou.com/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 [#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 [#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 [#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 [#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 [#asset-sources]

* Portrait and Onebrief logo: existing site identity assets.
* UI and GitHub icons: the site's Lucide icon package.
* Inter: [Google Fonts](https://github.com/google/fonts/tree/main/ofl/inter),
  bundled with its SIL Open Font License in `public/fonts/OFL.txt`.

## Homepage layouts [#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.