BON Architects — Magenta Teal WorkspaceLegacy format
A warm, workmanlike Korean-language workspace: signature magenta for identity and primary actions, teal for secondary actions and status, pale beige for anything selectable, and a dark plum code panel for machine output.
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
A warm, workmanlike Korean-language workspace: signature magenta for identity and primary actions, teal for secondary actions and status, pale beige for anything selectable, and a dark plum code panel for machine output.
Components
Buttons
Chips
Version pill
default
default
Inputs
Toast
default
Do's & Don'ts
Do
Don't
Principles
1. Two-tier hierarchy — the main flow (guide → output type → start) uses large, bold headers; detailed options live inside a collapsible fold with uniformly smaller type. Big where users decide, dense where users tune.
2. Magenta = identity & action. One brand hue carries the logo, section eyebrows, selected states, and the primary Start button. Never dilute it across passive surfaces.
3. Teal = counterpart. Reset/secondary actions, version badge, fold arrows, and success states. Magenta and teal never compete on the same element.
4. Beige = "you can pick me". Every selectable chip sits on pale beige so affordance reads at a glance against white panels.
5. Dark panel = machine voice. Generated output lives in a dark plum code panel with its own syntax palette, clearly separated from the human-input side.
Color Tokens
```css
:root {
/ ground /
--ink: #29222E; / primary text — near-black with plum bias /
--mut: #7A6F78; / muted text, labels /
--paper: #FAF8F9; / app background — warm white /
--panel: #FFFFFF; / cards, inputs /
--line: #E6DEE3; / borders, dividers /
/ brand /
--acc: #993366; / BON signature magenta — logo, primary action, selected /
--acc-deep: #7C2A54; / magenta hover/active /
--acc-soft: #F5E9F0; / magenta tint — highlight cards, tags /
--teal: #3E7C7B; / secondary action, version badge, fold arrow /
--teal-deep:#2F6362; / teal hover /
/ selectable surface /
--chip-bg: #FBF8F2; / pale beige chip fill /
--chip-line:#EAE2D4; / beige chip border /
/ machine output panel /
--code-bg: #241D28; / dark plum /
--code-line:#3A3040;
--code-fg: #E8DFE6;
--code-key: #D48AB0; / JSON keys — soft magenta /
--code-str: #9FD0C7; / JSON strings — soft teal /
}
```
Layout
• Two-pane workspace: form minmax(0,1fr) + output minmax(380px, 46%), output sticky below the header. Single column under 980px.
• Sections stack with 28px gaps; rows are flex with 12px gaps; fields flex: 1 1 200px.
• Header is sticky, white, 1px bottom border.
Interaction
• Transitions 130–150ms on color/border only; prefers-reduced-motion disables all animation.
• Focus-visible: 2px magenta outline, 2px offset.
• Buttons compress slightly on press (scale(.99)).
Use with MCP
Don't have the MCP? Install it here