Open Notebook's new UI ("Quiet Green") is live on v1-dev — help us refine it

Open Notebook grew a lot faster than its interface did. The product got multi-provider AI, podcasts, transformations, i18n, self-hosting — but the UI is still, honestly, a stock component library with default settings. Pale, generic, and in some screens (Models, we see you) genuinely hard to use.

We're starting a full redesign: visual identity first, then screen-by-screen restructuring, then navigation/UX. Before any code is written, we want your eyes on the direction.

What we made

We designed four aesthetic directions and executed each one as a high-fidelity mockup of the same screen — the notebook workspace — with hand-designed light and dark themes:

	Direction	Thesis
A	Warm Library / Editorial	Paper and ink. A calm, literate research studio — serif display type, parchment and espresso tones.
B	Refined Technical Tool	Linear/Raycast-grade precision. Dark-first, warm graphite, one electric accent, monospace doing real work.
C	Alive & Colorful	Color as protagonist. Each content type owns a hue; tinted panels; the joyful opposite of a gray dashboard.
D	Calm Clean / Soft Neutral	Maximum restraint with an identity: soft elevation instead of borders, quiet functional pastels, warm-neutral canvas.

Live mockups (open them, toggle the theme, zoom into details):

• Direction A — live demo
• Direction B — live demo
• Direction C — live demo
• Direction D — live demo

(Screenshots of each direction are in the first four comments below.)

What we're asking

This is not a vote. We're not going to tally reactions and ship the winner. The final direction will almost certainly be a hybrid, and the maintainers will make the call — what we need from you is the texture of your reaction:

1. Which of these feels like "Open Notebook" to you — and why?
2. For each direction that provokes a reaction: what specifically works, what specifically doesn't? Typography, color, density, dark mode, anything.
3. Which one would you want to look at every day, for hours? (Different question from "which is prettiest.")
4. What would you steal from one direction into another?

Please reply inside the comment thread of the direction you're commenting on (below) — general/cross-direction thoughts go directly in the main thread.

We'll keep this open for about two weeks, then post a synthesis of what we heard and the direction we're taking.

[lfnovo]

🅰 Direction A — Warm Library / Editorial · live demo

Paper-and-ink warmth, Fraunces serif display, chat answers set like a manuscript with a drop cap, source cards with colored "spines". Dark mode is candlelit espresso, not gray.

Reply here with what works / what doesn't in this direction.

[rumplestilzken]

This is an incredible design. very attractive. A bit artsy, but being a writer it hits hard. 1000%. Might be too artsy for your base audience, I'm not sure of your userbase demographics. But for me, this one is a total win.

[joecarpita]

In a positive and complimentary way, this feels like a role-playing game sourcebook aesthetic applied to a digital interface (probably the predominately serif typefaces with the warm-red color hues). While beautiful and easy to read, it doesn't scream LLM-enabled deep research tool from a look & feel perspective. Maybe that's not bad as there is a see of sameness in most of the chat interfaces for LLMs. In the demo, the subtle highlight hover effect is nice in that it invites interaction.

[fyshark]

I really like how clean and modern this design is. One small observation is that it reminds me quite a bit of Claude/Anthropic's website.

[freesearcher1st-cpu]

A nails it for me, 70 years old, tired eyes, not from age, just long hours. A not too busy layout and comforting color depth and balanced contrast keeps sanity and focus within range. Sensibly segmented topics placement permits consistent flow of thought. Easy focus and unhindered follow through helps maintain depth of thought . "C" is a nice layout but a bit stark with the color contrast .

[lfnovo]

🅱 Direction B — Refined Technical Tool · live demo

Dark-first warm graphite, electric-amber accent, JetBrains Mono for tokens, timestamps and model chips, a context-usage meter in the chat bar, visible keyboard shortcuts. Light theme is warm paper-graphite, equally hand-tuned.

Reply here with what works / what doesn't in this direction.

[joecarpita]

This feels like a more modern interface when compared with direction A, and the default size of the font makes this feel like there is more real estate on to be filled. The dark warm graphite clashes with the color accents where they exist, and feels like it could limit the color palette options. This feels like a repository of knowledge waiting to be filled that would become a dashboard once filled.

[rumplestilzken]

Probably the best middle ground between A and D. But does lack a little something. The chat window seems off, perhaps the font or representation of the response is not particuarly to my liking.

[mgmanzella]

the buttons to add notes and sources gets lost in the top right of the headings, your eye naturally goes top left so i feel like im fighting that what i look at a heading or a section and looking for a button

[TomLucidor]

Technical systems are good if it is used for automated research caching

[lfnovo]

🅲 Direction C — Alive & Colorful · live demo

Each content type owns a hue — sources coral, notes gold, chat teal — with softly tinted panels, Bricolage Grotesque display type, and a tri-color squiggle under the notebook title. Dark mode makes the hues glow on deep surfaces.

Reply here with what works / what doesn't in this direction.

[rumplestilzken]

This seems too flashy, looks like a Mac, when what we really want is Linux Mint. :)

[joecarpita]

The color accents are nice and make it clear where & how to interface with the objects in the interface. The friendly copy is also a nice touch (e.g. "This is where the thinking sticks"). The contrast of the colors for the chat panel feels a bit too drastic, like maybe the chat panel shouldn't have the tint in the panel? Overall has the fresh, approachable look & feel with color, typography, and layouts. Like a slightly irreverent SaaS brand.

[lfnovo]

🅳 Direction D — Calm Clean / Soft Neutral · live demo

The restrained candidate: warm greige canvas, borderless panels floating on soft layered shadows, fern-green accent, quiet functional pastels per content type, Hanken Grotesk carrying hierarchy through weight alone.

Reply here with what works / what doesn't in this direction.

[mgmanzella]

I really like this one and would appreciate something that continues the ethos of this option. Calm, scholarly, doesn't feel too "techy"

Maybe im missing something but it's not clear to me what the "multi notebook" view would look like? like in this screen "Notebooks" is selected but it looks like we're on a single notebook? like there should be a way to navigate between notebooks in the sidebar imo

this is the one i would wanna look at for hours, muted and easy on the eyes.

idea -- what does sharp corners look like for this one? does it make it more scholarly? 🤷

I LOVE how explicit the buttons are. Like "add source" and "write note" -- because this product is also for people who typically know about notebooklm, i like that it matches the paradigms of notebooklm but it's even more explicit

[lfnovo]

Like this ?

[mgmanzella]

yes yes, you might need a little more whitespace between components tho

note on buttons -- im not sure how this looks but the unique colors used for the source labels makes "write note" and "add source" get lost. if this is a primary action, those buttons should probably all be the same color (which looks like a forrest green in this mockup)

OR you can probably reduce the number of colors used for courses and then you have more options for colors for clickable actions. for example you're writing out "audio" in a label, does also need to have its own unique color?

(just food for thought 😌 )

[TomLucidor]

Soft neutral should be a separate mode where sources/notes are optional, and "pure" chatbotting is the main goal while RAG/backside things are fully hidden.

[Creepyrishi]

i liked this one. the only thing i think will be better is there are currently 4 columns (including the sidebar) i think sidebar and source can be combined (like collapsible) which will make it more cleaner.

[JuanSebastianOtalora]

Is there any ui rework towards the way document, notes and chat be presented. I think they take a lot of space. Also seems that is not properly repreaented in small devices. They overlap the text inside them.

[lfnovo]

This is phase 2 after the UI spirit is locked down. There will be plenty of news on that too

[joecarpita]

Reflecting on possible combinations of all of the above - it feels like there's a B & C Hybrid; or a C & D hybrid that I'd want to stare at all day, put my data into, and chat with an LLM to make the magic happen.

I also want to say I appreciate the breadth of exploration you're giving to the UI here, it's awesome to see such an incredibly engineered tool putting equal thought into the user experience as it continues to evolve!

[lfnovo]

There will be way more of these invites coming soon. Thanks for replying :)

[fyshark]

This is my favorite among the 4. The colors work really well together, and the overall tone feels just right. Really pleasant to look at!

[lfnovo]

The first hybrid :)

[ggrace519]

I like this one. Clean but still has character with the pops of color. Doesn't distract from the work.

[mgmanzella]

the orange is a little jarring 🙈 like red in UIs i feel like is associated with destructive actions so it makes me nervous to see things in red/orange

[drojo72]

I'm divided between A and D... Both work for me, thinking in hours of investigation on screen. I usually love me dark screen (like your B proposal), but for investigations and académico work i love paper flavor. Both A and D give that warm paper sensation. I also love the clean design of D, makes it easy to overview. The different color background in C, could be integrated in D, but with soft subtle color changes... It may make it even easier to overview... But is not at all a deal breaker for my D preference.

[FlorianHeigl]

I'm very much in favor of A) the Tufte-style book-editing presentation tends to work out well when really reading instead of organizing things. Though it might still have few too many visual impressions/colours.
I.e. the coloured bar on the left of each source - why is it there, what does it do, can it just not exist if it doensn't have a VERY VERY important meaning? so I'd try to be even more basic with things. Either it is a visual aid (i.e. borders, shadows if useful), or it is an information, or it probably is not needed.
In my other tools exporting always has been the final proving ground, currently I solve this by making mkdocs projects (in gitlab, with pages and PDF versions generated via CI) of the context. those are with weeks of brain-cracking now somewhat close to a book / binder collectable printout and still good markdown, but moving things over is a manual process because the exporting tools knowledge tools usually don't have any good structure for the notebooks, nor for the display.

So, as a basic idea, when you got a clean UI with no extra elements, try printing it and fold it like a book's pages, then open them and look what would need to change to fit better in there - that can be a good idea how it should look on screen as well. I.e. for a two-column format you'd see you don't need a 5" or 15cm wide "Source" icon and excerpt and the notebooks next to it but maybe something that better shows the connection or ... such

This immediately sticks out to me with your mockups, none show more items or text that would fit the screen. Matybe triple them and then start trying more. otherwise it's gonna change in meaning and information visbile vs not currently visible.

I can't ship you my Tufte visual design books easily (unless one of your design ppl would happen to be in Germany?) but maybe you can get the set for yourself. (I paid like $300 with a course back then). can you add a sponsor button so people can contribute financially?

Here some thoughts on the last version you posted

[lfnovo]

Thanks for the very thoughtful response. I got some ideas from this that I want to explain down below.

1. It's already possible to collapse some of the columns to improve real estate for the others. It is just that this wasn't in the original mock-up. See below.

2. Yeah, the original intention for the card colors is to demonstrate to the user whether those content items are currently engaged in the context for the LLM. In the following image, you will see this in action, where they change color based on their state, and there's also a clickable switch so that you can turn them on and off.

3. I agree the content type is taking too much space. It's taking a whole line for itself. I've put it together with the inside counter, and I am also showing a hover action on the insides so that you can inspect what's in there.

But, on the whole UX side of things, there will be many changes to the on all screens including this one. I will post about them shortly after the design discussion runs out. Thats why its been tied to the current screen here.

[FlorianHeigl]

the visual on/off/insights/full toggle is a great improvement over the little lamp, I now understand it. at the moment I'm still uncertain if it's good or bad to have more than visual cue for the same information (there's 3 as of now, bar colour, toggle button colour, grayed out or not). If i got anything useful to say after sleeping over it, I'll jump back here. a very motivating discussion!
For the hover: did you consider doing something like changing the hover display with a modifier key pressed (i.e. ALT)
Splunk had that many years ago and it was one of the 'power user' features that made it so much more rewarding to use compared to Kibana. Would be an easy way to toggle between various hover infos. (though it should only be an ALTernate option since the current layout is so extremely tablet friendly.

one thing that I still wonder about here... why no way to view the original file? I can see 10 versions and 1-2 years down the line you'll have that and above transparent overlay of the full text / highlights. at least I bet you will ;-)

edit: I just saw the collapse icons. they might need some emphasis. I'm a new user but was testing for multiple hours today and a friend also looked at it, we both didn't spot it. looking at it the most obvious thing I see is that if you compare it to the icon for sources/notes/chat which are like 25px the hide/fold arrow is probably like 8px (i didn't look at the html since it's late, so just guessing)

g'night :-)

[lfnovo]

If anybody wants to take a stab, here is the html for the last concept (i). Feel free

i-quiet-green.html

I also see a lot of people like direction A but consider it quite exagerated, here it is for you to play

a-warm-library.html

[lfnovo]

The new Open Notebook look is live on v1-dev — thank you 🌿

TL;DR: the redesign you helped shape is merged and building on v1-dev right now. Try it, tell us what feels off, and we'll fold your feedback in over the coming days.

How we got here

Three days ago we showed you four visual directions and asked for discursive feedback — not a vote. You delivered:

• D emerged as the strongest base for daily use ("easier on the eyes") but felt boring without more contrast.
• C's color-as-information idea was loved; its flashiness wasn't.
• A's readability set the bar; its costume didn't.
• Later rounds added: red reads as error, not identity; rounded corners felt toy-like; "are those color bars information or decoration?"

We built hybrids from your feedback, iterated them with more of your input, and made the final call: "Quiet Green" — neutral reading surfaces, color as information (every content type owns a hue), a confident green for actions, teal as the AI's voice, and red retired to destructive-only. Squarer geometry, hairline borders, almost no shadows.

Why we moved fast

We deliberately went from decision to shipped in days. Part of the redesign work was building a design token system — a single source of truth for every color, radius, font and shadow — plus a living styleguide. That's what makes iterating cheap from now on: most visual refinements land as a system-level tweak instead of being rediscovered screen by screen. The foundation and the app-wide reskin are merged in #1218 and #1220. Which matters, because…

Design was step one

There's a lot we want to build in Open Notebook in the next few weeks. Resetting the design language was the foundation for all of it — new things need a system to land on. Very soon we'll open a new Design conversation right here to shape the first real User Experience evolutions — together, same as this one. 👀

Try it and tell us

Mockups helped us choose a direction — they can't tell us whether it works during hours of real research. That part is yours:

• Run the v1-dev image (or build from main) and use it for your real work.
• Anything that feels off — contrast, spacing, a color that means the wrong thing, dark-mode weirdness, hierarchy getting in your way — drop it in this Discussion.
• We'll actively work through feedback over the next days while we keep refining the UI, then consolidate.

This direction was genuinely shaped with you. Thank you — the credit is shared. 🙏

[TomLucidor]

The Palette language looks very familiar (like GitHub ironically). If there is a "red mode" that would be even more cool

[rumplestilzken]

First class. Looks good, feels natural, is flashy enough to keep your eye and productive enough to sit at for awhile.

Just as a note, there should be a "minimum resolution" note left somewhere.

[rumplestilzken]

I've been using the new UI for a few days now, i can confidently say it is worth a few hours of sitting at. Might need a little polish on the text in the chat window. Seems tiny and a little bland.

[rumplestilzken]

Some color here would be nice.

[Willroy994]

Option C resonates to me!
Feels comfortable for daily use, with proper UX

[lfnovo]

Items from the older Discord UX thread that are still open as far as I can tell, for consideration in the redesign:

• Sort and group notebooks by name, date, category.
• Render tables in chat responses.
• Larger note popup in fullscreen.
• Resizable and reorderable columns in the notebook view.
• Multi-select sources to delete in bulk.
• A place for per-notebook system instructions for the chat.
• Link back to the source from an insight card.
• Onboarding: a visible indicator on first run that models still need to be configured, and clearer error messages when a model or key is misconfigured.

The Discord forum where this was discussed is now retired in favor of Discussions.