Agent Lexe · Hipson × Agent Luci · Brand standards, first edition
The rulebook, read for you.
Agent Lexe is the HR assistant that Hipson and Agent Luci build and own together. It shares Agent Luci’s design system: the same toggle, type and night-to-day pages. It speaks in its own blue and its own calm, plain HR voice. This book is the single reference for people and agents making anything with the Lexe name on it.
Lexe comes from lex: the rule.
Latin lex, legis: law, the written rule. Every company runs on rules nobody has time to read: the handbook, the plan summary, the leave policy, the I-9 instructions. Lexe reads them, answers from them, and shows its source. Then a person says yes.
Your people. Your policies. Handled.
Always in this order: people first, then the rules, then the promise. Never shorten it.
Asked at night. Answered by morning.
The one-line product story. Use it where the slogan already appears, never in place of it.
Lexe drafts. People decide.
The non-negotiable. If a layout, a line of copy or a feature suggests that Lexe hires, fires, pays, disciplines or decides eligibility on its own, it’s off-brand.
Who we’re talking to
An owner, office manager or one-person HR team at a company of 10 to 200 people. They’re good at the people part of HR. The repetition and the deadlines are what wear them down. They want to know what was asked, what Lexe drafted and what needs their yes.
How it should feel
Calm, exact and on your side. Like the colleague who always knows which page of the handbook it’s on, and never makes you feel slow for asking. Never legalistic, never alarmist, never salesy.
The switch is on, and there’s a person in it.
The Lexe mark takes the Agent Luci toggle, a switch thrown to yes, and turns the knob into a person. The yes is always about someone. It’s one idea drawn once, and it ties Lexe visibly to the Agent Luci family.
Primary lockup on night. The switch outline takes the ink color. The person is always Lexe blue #3d8bff.
On day. The outline and wordmark switch to ink #121722. The person stays #3d8bff, which is fine at mark size (a graphic object needs 3:1 contrast, and it gets 3.03:1).
Sizes
724024 min
16 dotThe person mark is used at 24px and up. Below that, including the favicon, use the dot mark, a plain blue knob, because the person can’t be read that small.
Clear space
Leave clear space equal to the height of the switch on every side. Never weld a tagline to the lockup.
Two states
On means active or signed in: the person is on the right and blue. Off means available but not set up: the person is on the left and grey. There is nothing in between.
Rules
- Wordmark: AGENT LEXE in Archivo 800, uppercase, tracking +.04em. The descriptor, when used, is JetBrains Mono 500 at .16em, uppercase:
HR · BY HIPSON × LUCI. - The person is never recolored, never outlined, never doubled, and never swapped for an emoji or a stock icon.
- Files: lexe-mark.svg · lexe-mark-dot.svg · lexe-logo-dark.svg · lexe-logo-light.svg.
The source chip is the brand.
Luci’s signature is the .luci tag. Lexe’s is the source chip: every answer carries the page it came from and whose turn it is. When a design needs something bold, it goes here. Everything else stays quiet.
Anatomy
JetBrains Mono 500 at 13px, a 1px hairline, a 5px radius and a white card background. The source chip uses a 📄 glyph and a short name with the section number. State chips use color only to show state.
Three states
Drafted by Lexe, with a lit blue dot: waiting for a person. Needs your review: flagged as sensitive. Approved by…: a person said yes and it went out.
Never
Never show an answer without a source chip. Never show “Approved” before a person approves. Never put a person’s name on a Lexe draft. Never label a legal opinion as a source.
One blue. Four chapters.
Lexe inherits Luci’s night-to-day page structure and swaps Luci’s gold sun for a clear, steady blue. It’s the blue of a page that has been checked. The neutrals are tinted cool so the blue reads as light, not as a sticker.
#06101f (5.75:1).card #151b28
ink #eef2f8
mut #9aa6b8
line #27303f
acc #3d8bff
card #151b28
ink #eef2f8
mut #9aa6b8
line #27303f
acc #3d8bff
card #ffffff
ink #121722
mut #5b6577
line #d6dde8
acc #1c5fd4
card #ffffff
ink #121722
mut #5b6577
line #d6dde8
acc #1c5fd4
Brand pages travel from night to day, in the order the product works: questions asked at night, approved in the morning. Product surfaces pick one chapter and stay in it. HQ lives in day.
Blue is for one thing per screen
Pick one: the primary action, the lit dot, or the emphasis word. On light backgrounds, Deep Blue replaces Lexe Blue for text. Lexe Blue on paper is only 3.03:1, so it’s allowed for large graphics and the mark, never for body text.
Status (reporting only)
#2e9e6e approved / live
#c2872a needs review
#c2372c blocked / overdue
#6d5dd3 done by an agent
Status colors report state. They never decorate.
| Pair | Ratio | Use |
|---|---|---|
#eef2f8 on #0b0e14 | 17.19 | AA/AAA body text on night |
#9aa6b8 on #0b0e14 | 7.84 | AA/AAA muted text on night |
#3d8bff on #0b0e14 | 5.83 | AA blue text on night |
#06101f on #3d8bff | 5.75 | AA button label |
#121722 on #f2f5f9 | 16.39 | AA/AAA body text on day |
#5b6577 on #f2f5f9 | 5.38 | AA muted text on day |
#1c5fd4 on #f2f5f9 | 5.28 | AA blue text on day |
#3d8bff on #f2f5f9 | 3.03 | graphics only mark, icons, 3:1 UI |
Never
No pure black, no untinted grey, no second accent color, no blue-to-purple gradients, no gradients on buttons, and never Luci gold on a Lexe surface.
A plain-spoken grotesque. A serif that explains.
Lexe uses the same three families as Agent Luci, so the two brands read as one family. Archivo speaks. Source Serif 4 explains, like a patient HR letter. JetBrains Mono marks what the machine wrote: sources, timestamps, IDs and states.
Grow your team. Get your hours back.
800 for H1 and H2, with tracking of −.02 to −.03em. 700 for H3. 600 for buttons and nav. One blue emphasis phrase per headline.
Under your handbook, up to 40 hours of unused PTO carries over to next year; anything above that expires on December 31. Your current balance is in the payroll portal.
17–19px, line height 1.55–1.65, lines no longer than 72ch. Bold is 600. Emphasis is true italic.
9:41 PM · drafted · Handbook §5.3 · request #a41f2c · approved by J. Boulet · 8:00 AM
Use it for sources, timestamps, IDs, eyebrows, captions, table numbers (tabular) and state chips. If the machine wrote it, the mono face says so.
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
One file. Every surface.
The tokens live in /assets/lexe.css as CSS custom properties. They’re mirrored in tokens.json for agents and tools. Components read tokens and never hard-code hex values.
| Group | Token | Value | Use |
|---|---|---|---|
| Brand | --blue / --blue-deep / --blue-soft / --blue-glow | #3d8bff · #1c5fd4 · #e3edff · rgba(61,139,255,.35) | Primary action, blue text on light, chip backgrounds, the lit dot |
| Night | --night · --night-2 · --night-card · --night-line · --night-ink · --night-mute | #0b0e14 · #111621 · #151b28 · #27303f · #eef2f8 · #9aa6b8 | Hero and dusk chapters |
| Day | --paper · --paper-2 · --card · --line · --ink · --mute | #f2f5f9 · #e8edf4 · #ffffff · #d6dde8 · #121722 · #5b6577 | Day and morning chapters, HQ |
| Type | --fd · --fb · --fm | Archivo · Source Serif 4 · JetBrains Mono | Display · body · machine |
| Radius | button · chip · card · film | 8px · 5px · 12–14px · 18px | Buttons are rectangles. Round pills are only for tabs and filters. |
| Space | --gut, section padding | clamp(16px,4vw,40px) · clamp(64px,9vw,120px) | Page gutter (16px on phones); vertical rhythm between chapters |
| Layout | --max | 1180px | Content width; body text is capped at 72ch |
| Elevation | button · film · dialog | 0 10px 30px -10px glow · 0 40px 80px -40px rgba(0,0,0,.8) · 0 30px 80px -20px | Three levels only. Cards are flat, with a hairline border. |
| Motion | fast · base · slow | 150ms · 200ms · 600ms, ease-out | Opacity and small movements only. prefers-reduced-motion turns all motion off. |
| Focus | focus ring | 3px solid #3d8bff, offset 3px | Every interactive element; touch targets are at least 44px |
Plain words. Exact sources. No legalese.
HR copy is read by people who are worried: about a paycheck, a leave, a warning. Lexe writes like the most patient person in the office. It says what the rule is, where it came from and what happens next, and it never pretends to be a lawyer.
Say
- “Under your handbook…”, then the rule, then the section
- “Here’s a draft. Please review before it’s shared.”
- “A person confirms this.” · “Your HR contact decides.”
- “Talk to your attorney about this one.”
- Real dates and deadlines from the actual plan documents
Never
- “Compliant”, “guaranteed”, “legally safe”, “100% accurate”
- “AI-powered”, “seamless”, “revolutionary”, “unlock”, “game-changer”
- “Human capital”, “resources” for people, “terminate” in employee-facing copy
- Any invented number, client, quote or testimonial
- Scare tactics about lawsuits or fines
Rewrites
Buttons say what they do
“Ask about the pilot”, “Approve and send”, “Send to HR for review”. Never “Submit”, never “Learn more”.
One emphasis per headline
One blue phrase. The rest of the headline stays in ink. Headlines are short sentences with full stops.
Always carry the disclaimer
Every page footer and customer-facing surface says: Lexe provides information and drafts, not legal, tax or benefits advice.
Components that show the record.
Every component here is live and uses the real tokens. Show the draft, the source and the approver. Avoid stat-card grids, cards inside cards, and an icon tile above every heading.
Button
| Primary | One per view. Blue fill, #06101f label, 48px tall (40px small), 8px radius. |
| Secondary / ghost | Supporting actions. Hairline or current-color outline. |
| States | Hover lifts 1px and deepens the glow · focus shows a 3px blue ring · disabled at 45% opacity, not clickable · loading shows a spinner and keeps its label. |
| A11y | Use a real <button> for actions and <a> for navigation. Enter and Space activate it. The label is the action. |
Input
| Anatomy | Label above (Archivo 600, 13px) · 16px serif input (never smaller, so iOS doesn’t zoom) · helper text below. |
| States | Focus shows a Deep Blue border and a 3px soft ring · error shows a red border and a message that says how to fix it. |
| A11y | <label for> always · errors use aria-invalid and aria-describedby · never rely on placeholder text alone. |
Draft card
Up to 40 hours carries over; anything above that expires on December 31.
This is Lexe’s core pattern: the question, the draft with a blue rule, the source chips, then one clear approve action. It’s used in the product, on the site and in emails.
Tabs & status
| Tabs | Pill shape, 44px tall, scroll sideways on phones. Selected = ink fill. Arrow keys move between tabs, and the ARIA roles are tablist, tab and tabpanel. |
| Status dot | 8px dot plus a mono label. The label is always present, so color is never the only signal. |
Patterns
- Page: a sticky header with the mark (a menu button below 1180px), then a night hero with a photo film, day chapters, and a night footer carrying the disclaimer.
- Hero: eyebrow with a lit dot → H1 with one blue phrase → a serif lead → one primary button plus a play-link → a mono note “Lexe drafts. People decide.” On phones the image goes above the headline.
- Feedback: inline messages under the control (green for OK, red for a problem). Toasts are only for confirmations. Dialogs are native
<dialog>and close with Escape. - HQ (product): day chapter, a PandaDoc-style layout (status tabs, document tables with signer avatars, a timeline rail), Deep Blue primary, and the red “!” only for things that need a person.
Real people, mid-task.
HR is about people, so Lexe uses real photographs of people doing real work. On night surfaces they’re shown through the film: a dark gradient from the text side and a faint Deep Blue wash. Every photo is credited.
✓ Choose
- Attention on the task: a form, a screen, a conversation
- Real offices with things on the desks and window light
- Small and mid-size workplaces: shops, clinics, offices, crews
- Landscape crops that keep faces whole (object-position around the eyes)
- A credit line: Custom for Agent Lexe (or photographer name)
✕ Reject
- Handshakes, high-fives, thumbs-up, arms folded in front of glass towers
- People pointing at charts or whiteboards
- Posed “diverse team” line-ups smiling at the camera
- Robots, glowing brains, gavels, scales of justice
- Fake “customer” headshots claimed as real clients
Icons use the Lucide line set at a 2px stroke, in currentColor or Deep Blue. Diagrams are hand-drawn inline SVG in the brand tokens.
The short list.
✓ Do
- Show a source on every answer and an approver on every sent item
- Use one blue thing per screen
- Write for a worried employee reading on a phone
- Keep “Lexe drafts. People decide.” true on every surface
- Label examples as examples (“your handbook”, “a sample policy”)
- Check contrast; pages must not scroll sideways at 390px
✕ Don’t
- Claim Lexe decides hiring, pay, discipline or eligibility
- Promise compliance or legal outcomes
- Use Luci gold, a second accent or gradient buttons
- Recolor, outline or animate the person in the mark
- Invent numbers, customers or testimonials
- Show employee data in marketing, even blurred
Two owners. One product.
Agent Lexe is a joint venture, owned 50/50 by Hipson and Agent Luci LLC. Lexe leads on every Lexe surface, and the owners appear as an endorsement: equal size, in the same order, never merged into the Lexe mark.
Built and owned byHipsonAgent LuciOrder
“Hipson × Agent Luci”, or “Built and owned by Hipson and Agent Luci”. Hipson comes first because it brings the HR and benefits expertise; Agent Luci brings the platform.
Owner logos
On Lexe surfaces, owners appear in the wordmark type (Archivo 700), not their own logos, so there’s one visual system. On a partner’s own site, follow that partner’s brand and add “Powered by Agent Lexe” with the mark.
Legal name
In footers: “Agent Lexe, a joint venture of Hipson and Agent Luci LLC”. “Lexe” is the product name. Product spelling is Lexe (e). Older drafts may say “Lexi”; final naming is covered in the JV agreement.
Agents read the same rules.
Luci, the Grok bot and Claude sessions that draft anything with the Lexe name read the agent guide first. They log their work in the HQ Change log with the purple agent badge.
Files
- /brandbook/agent-guide.md: the rules in plain text
- /brandbook/tokens.json: machine-readable tokens
- /assets/lexe.css: the one stylesheet
- The mark and lockups in
/assets/
Before anything ships
- Does every answer have a source chip?
- Is there exactly one blue thing on the screen?
- Could anyone read it as Lexe deciding for a person?
- Is every number real and sourced, or labelled as an example?
- Is the disclaimer present?
<a class="brand" href="/"><svg><use href="#mark"/></svg>AGENT LEXE</a> <a class="btn primary" href="#start">Ask about the pilot</a> <span class="src">📄 Handbook §5.3</span> <span class="src draft"><i></i>Drafted by Lexe</span>