Nolen Chatbot UI — Brand & Styleguide. The reference for our conversational interface: input bubbles, chat backgrounds, progress indicators, and the full-page application shell. Built on the Warm Pop / Hybrid direction — Cream base, Teal reserved for CTAs and progress, Violet and Coral as measured accents.

01

User input bubble — Dawn

✓ Signed off

The sent user message uses the Dawn gradient: a cool blue to warm lilac wash, #E3ECFF → #EDE2F2, 135°, with Warm Charcoal text for AA legibility. Right-aligned, consistent 12px corners. Teal is deliberately not used here — it stays reserved for CTAs and progress.

Add a Chatbot UI section to our brand page and show me a full-page mockup.
Dawn gradient bubbleDEFAULT
linear-gradient(135°, #E3ECFF → #EDE2F2) · charcoal text · radius 12px
On it. I'll audit the brand page, generate the variants against our palette, then compose the full-page mockup.
Nolen reply
No bubble fill — blends with the canvas. No name or icon label before the message.
02

Chat window background

✓ Signed off

One approved canvas. Cream White #F5F0E8 is the default — the Nolen reply blends into it, so answers read as open text rather than boxed cards.

How's the round looking?
Three new investors in, majority of existing shareholders re-investing.
Cream WhiteDEFAULT
#F5F0E8 · reply blends with canvas
03

Progress indicator

✓ Signed off

Long-running agent work shows live progress. Two forms: a stepped checklist for multi-step tasks (numbered circles, teal checks, a "running" badge on the active step) and a determinate bar for measurable jobs. Teal → Soft-Teal fill signals active progress; for indeterminate tasks the same bar runs as an animated loop.

Stepped checklistMULTI-STEP
Request analysed
Data sources queried
3Building tablerunning
4Create visualisation
5Write summary
Stepped checklist
numbered circles · teal checks + numbering · running badge on active step
Generating reportStep 2 of 5 · 35%

Teal → Soft-Teal fill signals active progress.

Working…indeterminate

Same bar as an animated indeterminate loop for open-ended tasks.

Determinate & indeterminate bar
KOMPAKT · teal→soft-teal fill, percent + step counter, or animated loop
04

Full-page mockup

✓ Signed off — Variant B

The assembled application on the Cream White canvas. Single logo (top-left of the sidebar, with brand clear space ≥ 20px on all sides); collapse icon top-right, bottom-aligned with the wordmark; Temporary chat under New chat; search in the left bar; Profile & Settings in the sidebar footer. Top nav holds in-session controls only — model, reasoning, knowledge, plus the utility icons. No name/icon labels in the thread; pure-white composer with a Dawn-gradient border.

Variant B · Cream White (#F5F0E8)

Claude Opus 4.8
Deep Think
Knowledge
9+
Add a Chatbot UI section to our brand page, and show me a full-page mockup.

On it. I'll audit the brand page, generate the bubble + background variants against our palette, then compose the full-page mockup and wire it into /brand for preview.

Building Chatbot UI section

Audit brand page structure
Generate bubble color variants
Render background options
Compose full-page mockup
Wire into /brand & preview
Ask Nolen anything…
+

Nolen can make mistakes. Check important info.

Component specifications
Composer (input box)
Pure white #FFFFFF (padding-box) with a 3px Dawn-gradient border linear-gradient(135deg, #E3ECFF → #EDE2F2) (border-box). Radius 16px, padding 14px 14px 10px, floating shadow 0 8px 28px rgba(43,43,56,.20), max-width 720px, centered.
Send button
36×36 circle, Warm Charcoal #2B2B38 fill, white up-arrow glyph. Sits right of the composer bar.
Placeholder text
15px, Mid Grey #6B7280 — "Ask Nolen anything…".
Sidebar
Width 268px, Warm Charcoal #2B2B38 background. Thin rounded scrollbar (8px, radius 999px, transparent track).
Logo (sidebar)
Monochrome white wordmark, height 24px (matches nolen.ch). Clear space ≥20px all sides; container padding 18px top / 28px left (left ≥ top, as on nolen.ch). Never stretch, rotate, recolor, or add effects.
Collapse icon
28×30, radius 8px, top-right of sidebar header, bottom-aligned with the wordmark baseline.
New chat
White label, 14px/700, margin 14px 16px 8px. Primary entry at top of sidebar.
Temporary chat
Same muted treatment as Search — 13px, white at 55% opacity. No violet fill or accent (matches Search conversations).
Search conversations
13px, muted white. Lives in the sidebar (not the top nav). Equal 8px rhythm with New chat / Temporary chat.
Folders
13.5px, white at 82%. Folder icons #E3ECFF (open & closed), 17×17. Count pill .cnt 11px/700; teal activity dot for unread. No teal on the folder icons.
Profile & avatar (footer)
30×30 circle, Dawn gradient linear-gradient(135deg, #E3ECFF → #EDE2F2), charcoal initials 12px/700. Profile & Settings live in the sidebar footer.
Top nav bar
Height 60px, Off White #F9FAFB background, 1px bottom border. Holds in-session controls only: Model · Reasoning effort · Knowledge dropdowns, then utility icons (Files, Memory, Scheduled, Notifications, Trash). Equal 8px spacing between icons.
Nav icon buttons
38×38, radius 10px, white bg. Uniform charcoal glyphs (no teal). Notification badge: Coral #FF6B6B, 9.5px/700. Divider .nav-div 1×22.
Thread / messages
Content column max-width 768px (720px content + 24px gutters), edge-aligned with the composer. User bubble: Dawn gradient, 15px, 12px corners (all four equal). Nolen reply: no bubble fill, blends with canvas. No name/icon labels before messages.
App canvas
Cream White #F5F0E8 (Variant B, default), shell radius 16px, height 680px.
Disclaimer
11.5px, centered, Mid Grey — "Nolen can make mistakes. Check important info."