# Julius — Marketing Site Design Spec

> Source: julius.ai (live DOM, computed styles), 2026-07-27 (desktop 1512px).
> Coverage: home page. Full product is behind login (`needs-dashboard`). 0 stylesheets blocked. Note: the page hydrates late — a first extraction returned zero type roles because text had not painted; values below come from a re-run after render.
> Reality check: hint ("clean light, chart-dense") is **half right, and the product has repositioned.** Clean light is correct — canvas `#fafafa`, ink `#404040`, a single Inter family, one blue `#2563eb`. But **"chart-dense" is wrong for the landing surface**: Julius now sells itself as "Excel, Slides, Tasks with AI" and, like Bolt.new, **has no marketing hero at all** — it opens straight onto the product composer ("What can I do for you today?") with a persistent left icon rail. The signature the hint misses: **ink is warm-neutral `#404040`, never black**, and the display is deliberately SMALL at 30/36 weight 500 — the largest text on the page — while the **heaviest text is the 24px/700 wordmark**, which is also the only blue text.

## 1. Visual Theme & Atmosphere

A quiet, app-first AI workspace — the landing page *is* the product, so there is no hero, no marketing photography and almost no chrome. Everything sits on a near-white `#fafafa` field with a warm-neutral `#404040` ink that never hardens to black, and the entire interface is one Inter family at small sizes. A single blue carries the wordmark, the Sign Up button and the send arrow; every other control is a transparent pill or a 6px ghost button. Depth is almost absent — one soft composer shadow and a `blur(24px)` — so the composer reads as the only object on the page. Feels: calm, light, app-first, unfussy.

## 2. Color Palette & Roles

### Text
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#404040` | Primary text (133 uses — warm neutral, never black) |
| grey-73 | `#737373` | Secondary (64 uses) |
| grey-54 | `#545454` | Tertiary / capability pills (34 uses) |
| near-black | `#090909` | Rare strong text |
| white | `#ffffff` | Text on blue |
| slate-64 | `#64748b` | Muted slate label |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#fafafa` | Page background |
| white | `#ffffff` | Composer, cards |
| grey-f5 | `#f5f5f5` | Inset fill |
| slate-1f | `#1f2937` | Dark chip / tooltip fill (8 uses) |
| slate-f8 | `#f8fafc` | Pale panel |
| border-blue-25 | `rgba(37,99,235,.25)` · `.2` | Blue-tinted hairlines on active pills |
| border-slate | `rgba(100,116,139,.2)` · `rgba(17,24,39,.1)` | Neutral hairlines |

### Accent
| Token | Hex | Role / usage |
|---|---|---|
| blue | `#2563eb` | THE accent — wordmark, Sign Up fill, send arrow, "New" badge (the `--primary-50…900` ramp resolves to this one value) |
| tron-blue | `#00aaff` | Published `--tronBlue` token |

Rule: one blue does everything interactive; all other controls are transparent pills with neutral or blue-tinted 1px hairlines. Ink stays `#404040`, never `#000000`.

## 3. Typography Rules

- Stack: **Inter only** — the sole family on the page (426 uses). No mono, no serif, no display face.
- Body: 16px / 400 / `#404040`.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 30 / 36 | 500 | -0.75px |
| Wordmark / nav brand | 24 / 24 | **700** | -1.2px, `#2563eb` |
| Section (h2) | 16 / 19.2 | 400 | -0.32px |
| Sub (h3) | 14 / 24 | 600 | -0.28px |
| Button | 14 / 20 | 600 | -0.14px |
| Eyebrow / pill label | 12 / 16 | 500 | -0.3px |
| Nav link | 16 / 24 | 400 | normal |

Patterns: **everything carries slight NEGATIVE tracking** (-0.14px at 14 up to -1.2px at 24), including small text — the opposite of the usual open-at-small-sizes convention. The display is small (30px) and mid-weight (500); the only weight-700 text on the page is the wordmark.

## 4. Component Stylings

### Buttons
- **Primary**: bg `#2563eb`, text `#ffffff`, radius 6px, h 36px, Inter 14/500, no shadow.
- **Ghost / nav**: transparent, text `#404040`, radius 6px, h 36–40px, Inter 14/600.
- **Capability pill**: transparent, text `#545454`, **radius 9999px**, h ~32px, 1px `rgba(37,99,235,.2–.25)` when active/new, neutral hairline otherwise; carries a small superscript "NEW" tag.
- **Announcement pill**: transparent, text `#404040`, radius 9999px, h 28px, with a blue "New" chip and a chevron.

### Inputs
- **Composer**: white fill, 12px radius, generous padding, one soft multi-layer shadow; a `+` attach, a Reasoning toggle, model selector ("Julius 1.2") and a circular blue send button.

### States
| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary | `#2563eb` / `#ffffff` | `background-color .15s ease-out` (dominant, 23×) | no explicit brand ring captured | — | — |
| Ghost / pill | transparent | background-color fills | — | border goes blue-tinted `rgba(37,99,235,.25)` | — |
| Composer | white, soft shadow | — | — | — | — |

**Anti-pattern: no brand focus ring captured.** Recommended replacement: `0 0 0 3px rgba(37,99,235,.25)`.

### Cards / panels
- White fill, 6–12px radius, 1px neutral hairline, essentially no shadow. Left rail is a 48px icon strip with no labels.

## 5. Layout Principles

- Persistent **48px left icon rail** (new chat, history, library, files, connectors, plus explore/help pinned bottom) — the app shell is present before login.
- Top bar: blue "Julius" wordmark left, centered dropdown nav (Product ▾, Use Cases ▾, Resources ▾, Pricing), Log In / Sign Up right.
- Centre column ~770px: announcement pill → 30px question headline → composer → a row of capability pills (Browser Agent, Video, Image, Build Website, Excel, Slides, More ▾).
- Vertically centred, generous empty space; no sections below the fold on first paint.

## 6. Depth & Elevation

- Radius scale: **6px** (dominant, 23× — buttons) · **9999px** (17× — capability/announcement pills) · 8px (9×) · 12px · 24px · single-side `24px 24px 0 0` sheet.
- Borders: 1px `#000000` (6×), 1px `rgba(37,99,235,.25)`/`.2` (blue-tinted, 4×), 1px `rgba(100,116,139,.2)`, 1px `rgba(17,24,39,.1)`.
- Elevation: near-flat — 11 transparent placeholder shadows and **one real soft multi-layer composer shadow**; plus a single `backdrop-filter: blur(24px)`.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| background-color | 0.15s | ease-out | buttons, pills (dominant, 23×) |
| opacity | 0.15s | cubic-bezier(0.4,0,0.2,1) | reveals (12×) |
| color, background, border, fill, stroke | 0.15s | cubic-bezier(0.4,0,0.2,1) | links |
| all | 0.1s / 0.075s | cubic-bezier(0.4,0,0.2,1) | fast micro-states |
| transform | 0.3s | cubic-bezier(0.4,0,0.2,1) | panels |

House transition: **background-color 0.15s ease-out** — fast and unshowy. A large 24-name keyframe library backs the app shell: `bounce`, `pulse`, `spin`, `enter`/`exit`, `fadeInTop`/`fadeIn`, `cycle`, `shine`, `blink`, `pingPulse`, `slideUp`/`slideDown`, `slide-in-bottom`/`slide-out-bottom`, `accordion-up`/`accordion-down`, `swipe-out-left`, `loop-scroll`/`scroll-up`, `blob`, `g-container-move`/`g-container-liMove`, `conversation-feedback-dismiss`. Easings include `cubic-bezier(0.8,0,1,1)`, `cubic-bezier(0,0.1,0.8,1)` and `cubic-bezier(0.4,0,0.6,1)`. No animation library detected. Ships **1 `prefers-reduced-motion` block**.

## 8. Backgrounds, Effects & WebGL

- **Exactly one gradient on the page**: `linear-gradient(to right, rgba(37,99,235,.15), rgba(37,99,235,.1), rgba(37,99,235,.1))` — a faint blue wash behind the announcement pill.
- One `backdrop-filter: blur(24px)`. **No canvas/WebGL, no video, no grain, no raster background layers.** The surface is otherwise flat.

## 9. Do's and Don'ts

### Do
- Keep the canvas `#fafafa` with a warm-neutral `#404040` ink — never pure black.
- Use Inter as the only family, at small sizes; keep the display at 30/500.
- Apply slight NEGATIVE tracking at every size, including 12–14px text.
- Reserve blue `#2563eb` for the wordmark, primary button and send action.
- Make secondary controls transparent 9999px pills with 1px hairlines (blue-tinted when active).
- Lead with the composer — this landing surface is the product, not a marketing page.
- Keep elevation to one soft composer shadow.

### Don't
- Don't harden the ink to `#000000`.
- Don't scale up or bolden the display — 700 belongs to the wordmark alone.
- Don't open tracking at small sizes; it closes.
- Don't add a second accent, gradients or imagery — there is one faint blue wash and nothing else.
- Don't add drop shadows to buttons or pills.

## 10. Responsive Behavior

- Breakpoints (from stylesheets): 600 (max), 640 (min & max), 768, 1024, 1280, **1400** (bespoke), 1536px — 8 seams, a Tailwind ladder plus a custom 1400 and a 600 max.
- The left icon rail collapses; the centre column and capability-pill row wrap.
- `darkSchemeBlocks: 1` — one dark-scheme block, no visible toggle (light by default). **4 container queries, 1 reduced-motion block.**

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#fafafa` · Text `#404040` · Muted `#737373` · Border `rgba(17,24,39,.1)` / `rgba(37,99,235,.25)` · Accent `#2563eb`
- Font: `Inter` only · Body 16px · Display 30/36 w500 -0.75px · Radius: 6px buttons / 9999px pills / 12px composer · Control height: 36px
- Focus: none captured — use `0 0 0 3px rgba(37,99,235,.25)` · Hover: `background-color .15s ease-out`

<julius_design_language>
Use the Julius design language: a calm, app-first AI workspace where the landing page IS the product — there is no marketing hero, just a persistent 48px left icon rail and a centred composer asking "What can I do for you today?". Canvas `#fafafa`, and the ink is a WARM-NEUTRAL `#404040` that never hardens to black, with `#737373` and `#545454` beneath it. Inter is the ONLY family, used at small sizes: the display is a modest 30/36 at weight 500, and the single piece of weight-700 text on the page is the 24px blue wordmark. Every size carries slight NEGATIVE tracking (-0.14px at 14 through -1.2px at 24), including small text — the opposite of the usual convention. One blue `#2563eb` does all the interactive work: wordmark, Sign Up fill, circular send arrow and the "New" chip; every other control is a TRANSPARENT 9999px pill with a 1px hairline that turns blue-tinted `rgba(37,99,235,.25)` when active, or a 6px ghost button at 36px. Depth is near-absent — one soft multi-layer shadow on the white 12px composer and a single `blur(24px)`, nothing else — and there is exactly ONE gradient on the page, a faint `rgba(37,99,235,.15)` wash behind the announcement pill, with no imagery, canvas or video anywhere. Motion is a fast `background-color 0.15s ease-out`. Feels: calm, light, app-first, unfussy. Avoid: pure-black ink, a large or bold display, opening tracking at small sizes, a second accent colour, and shadows on buttons or pills.
</julius_design_language>