# jules.google -- Design System Reference

## 1. Visual Theme & Atmosphere

Utilitarian developer-tool clarity. Roboto Mono anchors every element in technical precision, projecting a tool that is purposeful and distraction-free. An interface designed for getting work done, not for admiration.

The overall mode is **light**, with a monospaced, code-aesthetic typographic identity. Depth is entirely absent -- the composition is rigorously flat.

---

## 2. Color Palette & Roles

### Computed Roles

- **background (body)**: `rgb(29, 2, 69)`
- **border (a)**: `oklch(0.789 0.154 211.53)`
- **text (h1)**: `oklch(0.9464 0.022 302.93)`
- **text (code)**: `oklch(0.987 0.022 95.277)`
- **background (span.bg-[#09051c])**: `rgb(9, 5, 28)`
- **text (span.bg-[#09051c])**: `oklch(0.8824 0.051 301.8)`
- **border (span.bg-[#09051c])**: `oklch(0.2556 0.105 294.24)`
- **surface (div.bg-white)**: `rgb(255, 255, 255)`

**Key observations:** No token layer exists. Colours emerge from context and browser defaults. Light-mode-first palette.

---

## 3. Typography Rules

**h1** -- Roboto Mono Variable, 15px, weight 400, line-height 22.5px

**code** -- ui-monospace, 14px, weight 400, line-height 24px

**Hierarchy principle:** Roboto Mono Variable carries the primary voice. Scale and weight -- not typeface changes -- create hierarchy.

**What is absent:** No proportional serif or display face. The monospaced system is intentional -- do not introduce decorative type.

---

## 4. Component Styling

**Border radii:** No border radii detected -- corners are sharp throughout.

**Interactive states:**
- `a[href]`: tag: a.inline-flex "Plans", default: [object Object], hover: null, focus: [object Object]
- `a[href]`: tag: a.inline-flex "Try Jules", default: [object Object], hover: [object Object], focus: [object Object]
- `a[href]`: tag: a.underline "CLI", default: [object Object], hover: [object Object], focus: [object Object]

**Buttons & controls:** Match the typographic register -- monospaced labels, minimal padding, high-contrast borders.

---

## 5. Layout Principles

Common padding values: 16px. 

The dominant padding rhythm (16px) suggests a fixed-pixel grid.

Avoid introducing grid lines, dividers, or decorative rules unless absolutely necessary. Let whitespace do the structural work.

---

## 6. Depth & Elevation

No box shadows detected. Depth is achieved through colour contrast and spacing alone -- the design is intentionally flat.

Maintain the flat aesthetic throughout. If you must indicate overlapping layers (modals, tooltips), use border outlines or background tints rather than shadows.

---

## 7. Do's and Don'ts

**Do:**
- Respect the monospaced, code-aesthetic typographic voice -- every element should speak the same typeface language.
- Use whitespace as a primary design tool. When in doubt, add space rather than elements.
- Stay within the established colour range -- no additional palette colours.
- Keep interactions subtle: micro-transitions at 150-200ms maximum.

**Don't:**
- Do not introduce proportional or display typefaces. The monospaced grid is the identity.
- Do not add drop shadows, gradients, or decorative textures unless they are already present in the system.
- Do not use colour to communicate hierarchy -- size and weight do that work here.
- Avoid centring body text. The layout has a strong left-anchored reading rhythm.

---

## 8. Responsive Behavior

No explicit CSS breakpoints extracted. The layout relies on fluid units, CSS Grid auto-fit, or a single-column mobile-first approach.

Build mobile-first. Use fluid type and spacing where the existing CSS suggests it (clamp(), vw units). Avoid rigid pixel breakpoints if the system uses fluid scaling.

On small screens, collapse multi-column layouts to a single column without compromising the typographic scale. The type should remain readable -- never below 14px rendered size.

---

## 9. Agent Prompt Guide

When generating UI components, extensions, or page sections for **jules.google**, instruct the agent as follows:

> "Build in the style of jules.google: utilitarian developer-tool clarity. Use Roboto Mono Variable as the primary typeface. Light background, dark text. No shadows or elevation. Minimal palette, no custom tokens. No animations -- immediate state changes only. Generous whitespace, strong typographic scale. Sharp corners throughout."

---

*Generated by Sparkbites -- extracted from live CSS analysis*