Give every perspective a seat.

Brand foundation

Positioning: a personal thinking workspace where people build a council of AI advisors, explore multiple perspectives and maintain context across conversations.

Promise: Give every perspective a seat.

Primary line: Many minds. Clearer thinking.

Product description: Build your own council of AI advisors. Chat individually, bring them together to brainstorm and debate, and organize conversations into spaces with shared memory.

Principles:

1. Distinct minds: make expertise, personality and perspective legible.
2. Useful friction: preserve thoughtful disagreement rather than forcing agreement.
3. Lasting context: make the context carried between conversations easy to inspect.
4. User agency: recommendations inform the user; the user decides.

Personality: thoughtful, candid, composed, curious. Avoid fantasy courts, royal insignia, gavels, robot mascots and mystical claims about AI intelligence.

Voice

Use short active sentences and concrete verbs: ask, invite, compare, review, save. Keep language natural. Say “AI advisor,” not “expert human.” Name uncertainty and the next useful step.

Use the memory deletion wording only when the implemented behaviour matches it. Do not promise perfect recall, confidentiality, source verification, or automatic consensus without supporting functionality.

Logo

Use the full lockup to introduce the brand, and the mark alone in navigation, app icons and compact contexts. Clear space is at least one-quarter of the mark artboard width on every side. Minimum sizes refer to the complete SVG viewBox.

Primary lockup: ink on white or canvas. Reversed: white on cobalt or ink. Lime is permitted on ink for brand moments. Black is available for single-colour production. Keep the symbol upright, proportional, and a single solid colour. Do not rebuild the letterforms, change the spacing, stretch, rotate or add shadows. White SVGs are transparent assets; inspect them over a dark background.

Colour

Approximate surface allocation: 80% neutrals, 15% ink/cobalt, 5% lime. Do not use lime as a warning colour. Semantic success, warning and error colours are separate from brand colours. Use tokens.json as the authoritative mapping for both themes.

Advisor identity uses initials, a displayed name and role; colour is an additional cue. Illustrative roles: Strategist (cobalt), Critic (amber), Explorer (teal). These are example advisors rather than fixed system personas. Colour does not imply accuracy or rank.

Type and layout

Use bundled DejaVu Sans, then system-ui, sans-serif. Regular 400 for body; bold 700 for headings, labels and controls. Logos contain outlined letterforms.

At narrow widths, page titles become 28/36 and large marketing headings can become 36/44. Preserve browser zoom and text resizing. Avoid using metadata sizing for substantive advisor responses.

Use a 4 px grid: 4, 8, 12, 16, 24, 32, 48, 64 px. Control radius 8, cards 12, dialogs 16, chips 999 px. Default cards have a 1 px divider and no shadow. Reserve a subtle shadow for floating menus and dialogs.

Desktop at 1024 px and up: 240 px sidebar, 24 px gutters, content capped at 1280 px. Between 768 and 1023 px, the same CSS shell is available but implementations may collapse navigation when content requires it. Below 768 px: a single conversation pane and 16 px gutters; provide a navigation drawer with a clearly labelled menu button. The stylesheet hides the persistent sidebar at this breakpoint; the application must supply drawer behaviour. Keep conversation text at 72ch maximum.

Components and interaction contracts

Buttons

One primary action per task region. Desktop minimum height 40 px; touch minimum 44 px. Use specific labels. A secondary action has a visible border. Destructive confirmations use explicit wording, such as “Remove memory.”

aria-disabled="true" only communicates state. Application code must also prevent activation. aria-busy announces progress; it does not stop duplicate requests by itself.

Fields

Persistent visible label, optional help text, 44 px minimum height. Use aria-describedby for help and errors. Invalid state uses aria-invalid="true", an error border and a plain-language message. Do not erase input after a failure. Disabled fields retain their label.

Advisor cards

Show initials or avatar, name, expertise and a short personality description. Provide one explicit action: “Add advisor” or “View advisor.” Do not make an entire card clickable if it contains other interactive controls. Include the words “AI advisor” in profile and conversation contexts.

Messages

Persistent speaker label plus AI designation. Do not distinguish speakers through colour alone. Preserve paragraphs, lists and code blocks. Message text must wrap without forcing page-wide horizontal scrolling. Make citations and sources reviewable when available; do not invent them.

Stream within a stable message region. Avoid announcing each streamed token; announce a completed response through a polite live region. Do not move focus or force-scroll if the user is reading earlier messages. Show a “New responses” affordance instead. Include a labelled “Stop generating” control while responses are being generated.

Meeting and synthesis

The user names the question and selects participants before starting. Allow individual advisor chats and group council meetings to share the same visual language. Clearly identify which mode is active.

Do not infer consensus merely because a summarizer generated an answer. A synthesis panel includes recommendation, supporting rationale, agreements, dissent and next steps. If someone is missing, name them before inviting the user to adopt the result. Agreement is not evidence of factual correctness.

Spaces and memory

Use spaces for related conversations and shared context. Above a meeting, state which space memory is being used. A memory entry includes its content, source conversation, saved date and review controls. Identify inferred notes separately from user-supplied facts. Make additions, corrections and removals visible. Handle failure with “This wasn’t saved. Try again.” rather than showing a success state.

Empty, error and busy states

Empty states explain the object and provide one next action. Error states name the failed action, preserve the user’s work and provide retry when appropriate. A partial meeting should preserve completed responses. Loading states use a short label and stable layout; avoid decorative pulsing across the whole chat.

Dialogs and menus

Prefer native <dialog> where appropriate; otherwise implement the complete accessible dialog pattern. Move focus into dialogs, keep keyboard navigation inside a modal, support Escape, and restore focus to the trigger. Include a visible close or cancel action. Announce the dialog title. Menus must support keyboard navigation and close when focus moves away appropriately.

Dark theme

Set data-theme="dark" on the root. Dedicated canvas #111A20, surface #1C2932, text #F1F5F8, muted #AFC0CF. Action fill #4263E8; links #BDD0FF. White primary action text remains legible. Essential control borders use #748994; decorative dividers use #344650. Keep semantic colour meanings identical in both themes. Respect the user’s chosen theme rather than switching on a timer.

Accessibility and motion

• Normal text: at least 4.5:1 contrast. Large text and meaningful UI boundaries: at least 3:1. Approved example ratios are in the PDF and contrast-report.json.
• Decorative borders are intentionally subtle. Use control-border tokens when a boundary is necessary to identify a field or button.
• Keyboard users must reach every action, see focus, and escape menus and dialogs.
• Provide 44 px touch targets, visible names and readable error text. Never use colour as the only cue.
• Verify 200% text resizing and 400% zoom/reflow; adapt complex layouts to one column.
• Respect prefers-reduced-motion. Default transitions are 120–240 ms with cubic-bezier(.2,0,0,1) easing; do not animate entire conversation histories.
• Test with a screen reader, keyboard and actual long content. Contrast calculations and CSS alone do not establish whole-product accessibility.

Release checklist

Confirm light/dark contrast, keyboard traversal, modal focus, mobile navigation, streaming announcements, long advisor names, loading/error states, preserved dissent and inspectable memory. The included HTML is a visual reference rather than production conversation logic.

Original reference

Download the supplied PDF from the asset library. See assets for the unchanged SVGs and font license. The live UI guide extends the source kit with DaisyUI components.