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.
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.
Monochrome white wordmark, height 24px (matches nolen.ai). Clear space ≥20px all sides; container padding 18px top / 28px left (left ≥ top, as on nolen.ai). 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.
11.5px, centered, Mid Grey — "Nolen can make mistakes. Check important info."
05
Model Selector — "Model-agnostic, no lock-in"
✓ Signed off
Nolen runs on Claude, GPT, Gemini, and open-weight models — choose the best model for any task, never locked into a single LLM. The selector lives in the top nav bar; the open dropdown overlays the canvas with a soft dim effect. Active model row uses a Teal left-border accent. Provider groups separated by labelled dividers.
Open dropdown state · Claude Opus Fable 5 selected
Claude Opus Fable 5
Deep Think
Knowledge
9+
Choose your model
Anthropic
A
Claude Opus Fable 5
A
Claude Sonnet 5
OpenAI
GPT-5.6 Sol
GPT-4o
Google
G
Gemini 3.5
G
Gemini 2.5 Pro
Open-weight
L
Llama 3.3 70B
M
Mistral Large
Nolen
Select the playbook to run or start a new chat.
🔍
Competitive Intel
Research a company or product and compile a report
Data Analysis
Cohort, churn, retention, and metric analysis on uploaded or connected data
Fundraising & Outreach
Agentic lead qualification, nurturing, and follow-up for fundraising or sales pipelines
🖥
Monitor Website
Check a website's status and take a screenshot
Reporting
Build board-ready, investor, management, or operations reports following Nolen's source-of-truth
🔍
Research Topic
Deep-dive research on any topic
Script Generator
Generate scripts for calls, demos, tutorials, and pitches
🖥
Website Update
Execute UI/UX and content edits on nolen.ch following the style guide
+
Ask Nolen anything…
Nolen can make mistakes. Check important info.
Mobile — open dropdown state
Nolen
Claude Opus Fable 5
Choose your model
Anthropic
A
Claude Opus Fable 5
A
Claude Sonnet 5
OpenAI
GPT-5.6 Sol
GPT-4o
Google
G
Gemini 3.5
G
Gemini 2.5 Pro
Open-weight
L
Llama 3.3 70B
M
Mistral Large
How can I help you today?
+
Ask Nolen anything…
06
Desktop — Agents & Playbooks
Model selector closed. Playbooks are the centrepiece. Visualises the Agents solutions box: Scheduled or triggered, agents work end-to-end across your systems. Pre-configured playbooks. Human oversight built-in.
Agents executing real work across your systems
Nolen
Claude Opus Fable 5 ∨
Playbooks
📋 All Playbooks
📁 CEO Digest
📁 Reporting
📁 Legal
📁 Financial Analysis
📁 Initiative Planning
JS
John SmithProfile & settings
2 agents running·3 scheduled·1 awaiting your review
Nolen
Agents executing real work across your systems. Scheduled or triggered – pre-configured playbooks, human oversight built in.
🎯
Fundraising
Agentic lead qualification, nurturing, and investor follow-up
Running · 67%
📊
Reporting
Board-ready investor and management reports
👁 Awaiting your review
☀️
CEO Digest
Daily briefing: email, calendar, pipeline, and metrics
⏰ Scheduled · Daily 07:00
🎨
Content Creation
Drafts, posts, and campaign copy across channels
✓ Done · 2h ago
💼
Sales Pipeline
CRM updates, follow-ups, and deal stage tracking
Running · 30%
📈
Data Analysis
Cohort, churn, retention, and metric analysis
⏰ Scheduled · Weekly Mon
📚
Research
Deep-dive research and synthesis on any topic
✓ Done · Yesterday
📝
Contracting & Legal
Contract drafting, review, and legal document preparation
