A calm, app-first AI workspace where the landing page IS the product — like Bolt.new there is no marketing hero at all, just a persistent 48px left icon rail and a centred composer asking "What can I do for you today?". The canvas is a near-white #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 on the page and it is used small: the display is a modest 30/36 at weight 500, and the single piece of weight-700 text anywhere is the 24px blue wordmark. Every size carries slight NEGATIVE tracking, from -0.14px at 14px through -1.2px at 24px, including 12px labels — the inverse of the usual convention of opening tracking at small sizes. One blue #2563eb does all the interactive work, covering the wordmark, the Sign Up fill and the circular send arrow, while every other control is a transparent 9999px capability pill (Browser Agent, Video, Excel, Slides) whose 1px hairline turns blue-tinted rgba(37,99,235,.25) when active. Depth is nearly absent: eleven of the twelve recorded shadows are transparent placeholders, leaving exactly one real multi-layer shadow on the white 12px composer, and there is exactly ONE gradient on the whole page, a faint blue wash behind the announcement pill, with no imagery, canvas or video anywhere.
Browse Julius in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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 |
| 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.
#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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.