Skip to content
Design Notes
2025-01-18
Design Notes 2025-01-18
I have a significant number of design notes to share. Please read through everything first before taking action on any specific tasks. If you see a conflict between a message on an image and the associated text - please proceed with the text as this represents an update.
If you don’t provide me with a list of questions I will assume that either you haven’t read this instruction or you are not interested in a collaborative relationship. In that case, we should part ways now.
Question/Issue
I noticed that we are not really using Tailwind for the CSS. This has made it much harder for me to provide clarity for this process. It cost me at least 2-3 wasted hours this weekend and the probability of multiple additional rounds with the team. This was a requirement for this project from the beginning. Can you explain what might have happened here?
Welcome Page
Coloring Overall
We’re looking to go darker and starker.
Main section: bg-black (background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
Left nav/search box - bg-zinc-900 (background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
Top buttons, move from 4 to 5 in the section to make them smaller.
Top buttons, bg-zinc-800 (background-color: rgb(39 39 42/ var(--tw-bg-opacity, 1));
Top buttons, hover, bg-zinc-700 (background-color: rgb(63 63 70/ var(--tw-bg-opacity, 1));
Cards - background image with opacity to keep it subtle.
Card hove - brightens slightly to make it engaging.
More vertical spacing on cards.
Here is the background image used with reduced opacity. I like this one since the dark is to the left.
We would need black card backgrounds with a border of bg-zinc-950 to have a very slight edge.
Here is another idea. If we were to go with this one, we would want the center darker area.
Alternately, we may go with a more colorful treatment. We could use something like the below with a different background color for the different Data Sets (listings, reviews, chat) for the Tasks.
Second welcome message
Adding a little color to this section as well. I’m hoping that we can align on a very modern and engaging design. This is for the “How can I help you today?” text.
style="font-size:2rem;font-weight:300;
background-image: linear-gradient(50deg,#714dff,#9c83ff 21.28%,#e151ff 47.97%,#fff759 65.64%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
};
Task Pop-up
Follow everything from base pages.
Section headers should be full 1rem for H3.
Font in pop-up can be larger, increase to .9375 from .875 rem
Box can be a but taller to to hold everything
Greater vertical padding between elements to make the sections clearer
Idea for dynamic Icon
We would need to trim it and make it much smaller.
Main Chat Samples Human
Human chat to the right (see sample below) with max width of 70% with same background as the search box (bg-zinc-900). No icon for the person.
Background for computer chat should be darker. Let’s try bg-slate-900 for the headline and bg-slate-800 for the open box.
Font size for compute doesn’t need to be 1rem, drop to .875rem
Closed computer box has 70% maximum width.
More aggressive vertical spacing to make the sections clearer.
Tables headers and borders should have have the same color as Computer thought. Let’s go with Go with bg-zinc-800
NOT IN IMAGE - the left navigation is thinner as we don’t need that much space for the label we have.
Main Chat - Task Trigger
Here is an example of the inspiration for executing a task. This keeps it tight is the Prompt for the task is long. For a save task — and only saved tasks — we show the task icon and the name in a button. We still execute the entire prompt but only show these details.
Also, please see the right panel treatment. Background is black with a subtle vertical dividing line.
Here is a mock of a conversations to provide an idea of the the human portion of the chat and the AI icon.
The background behind the AI conversation bubbles is bg-zinc-900 but with .8 opacity (you already have the color for the human conversations) This is meant to provide a very subtle distinction to keep it chat like.
Here is a more direct example showing the rounded corners and the very slight effect that help to convey the “conversation”
This was my inspiration.
Add/Edit/Delete Tasks
We certainly want to follow the inspiration from Sana for add/edit/delete Tasks.
As we have discussed, the fields are:
Title
Description
Category
Prompts
2024-01-24 Images
Model and Data Set (see below) in the top (inside) left with the help button in the top (inside) right.
Fixed header, plus the placeholders for the engagement tools for each response.
The design idea for the drop downs. Since they would overlay on both the dark and the left nav, we would need to zinc-900 of the pop-over and zinc-800 for the selection.
Models: 4o-mini, o1-mini
Ideas about having distinct data sets available for more robust engagement.
This would be the selected data set from the home page. We need to give people flexibility.
Listings, Reviews, Lia, Local SEO
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.