Arjuna

# Arjuna — Design and Motion Guide

Arjuna is a designer portfolio with a narrow, bordered reading rail floating in generous white space. Geist headlines, black actions, precise grey dividers, and project imagery do most of the visual work; the small green availability signal is the sole saturated accent. Its entrance sequence reveals words from the left, then draws the page rails and dividers around them.

## Typography

The primary family is **Geist**, bundled locally in the HTML package. It is used throughout the visible core pages; Inter exists in the source project but is not part of these page compositions. The site uses close tracking and firm 600-weight headings. Exact letterforms in the Library specimen depend on whether Geist is available in the browser; the portable package's font is the delivery reference.

| Element | Desktop | Tablet | Phone |
| --- | --- | --- | --- |
| Main heading | Geist `56px`, weight `600`, line-height `100%`, tracking `-0.06em` | Geist `56px`, weight `600`, line-height `100%`, tracking `-0.06em` | Geist `40px`, weight `600`, line-height `100%`, tracking `-0.06em` |
| Section heading | Geist `48px`, weight `600`, line-height `100%`, tracking `-0.06em` | Geist `48px`, weight `600`, line-height `100%`, tracking `-0.06em` | Geist `32px`, weight `600`, line-height `100%`, tracking `-0.06em` |
| Smaller heading | Geist `32px`, weight `600`, line-height `100%`, tracking `-0.06em` | Geist `32px`, weight `600`, line-height `100%`, tracking `-0.06em` | Geist `24px`, weight `600`, line-height `100%`, tracking `-0.06em` |
| Hero supporting copy | Geist `18px`, weight `400`, line-height `120%`, tracking `-0.02em` | Same source preset | Same source preset |