# Style

Claude Chic uses basic visual design to deliver a Claude experience that is easy to visually scan and understand:

-  **Maximum Width**: Cap content at 100 characters to keep text easy to scan
-  **Colors:** to differentiate user (orange), agent (blue), and tool use (grey)
-  **Collapsible Elements:** to keep noise down while providing you access to more information
-  **Markdown Rendering:** because layout and tables are nice
-  **Streaming support:** so that you get results immediately, rather than wait minutes while Claude is "Thinking..."

## Comparison

=== "Claude Code"

    ![Claude Code](https://github.com/user-attachments/assets/e6caa10a-0696-43f3-a1f3-10d9f620a389){ style="width: 100%" }

=== "Claude Chic"

    ![Claude Chic](https://github.com/user-attachments/assets/229f3904-4dee-4f97-8fc7-d65fb78ac9cd){ style="width: 100%" }

Notice how you can easily tell when Claude is speaking vs when there is a tool use. Also notice that there is a lot more tool use than is apparent in Claude Code (Claude Code has to omit information to not drown you in data).

Each line in Claude Chic is expandable, so you can drill in if you want to. Additionally, Claude Chic has nice rendering in Markdown.

=== "Claude Code"

    ![Claude Code expanded](https://github.com/user-attachments/assets/c09c35af-8f62-417e-b7d9-f9bc0f78070a){ style="width: 100%" }

=== "Claude Chic"

    ![Claude Chic expanded](https://github.com/user-attachments/assets/ebdee1a5-9700-4149-8e97-1fbe420852ca){ style="width: 100%" }

Notice how proper markdown rendering in Claude Chic (thanks Textual!) makes it easier to read this content.
