--- name: sc-ui description: Build Small Council interfaces using Tailwind v4, DaisyUI v5, and the existing Rails UI conventions. --- # Small Council ui Small Council is a thinking workspace with customizable AI advisors, individual conversations, councils, spaces, and memory. Use “Many minds. Clearer thinking.” and the promise “Give every perspective a seat.” Advisors are AI; identify them clearly and preserve disagreement. Do not invent customer evidence, pricing, integrations, source verification, or security guarantees. Use supplied artwork, cobalt #3155D9, ink #172229, lime #D5F27D, and local DejaVu Sans 400/700. The light/dark semantic mapping is authoritative in tokens.json. Use ink text on lime. Never redraw the wordmark or change the logo proportions. ## Integrate The existing application uses Rails, ERB, Turbo, Stimulus, Tailwind 4.2.1 and vendored DaisyUI. Keep those conventions. Copy `brand/` and import `theme.css`, `daisyui.css`, `fonts.css`, and `components.css` after Tailwind. Add `@source` for your own templates and exclude `brand/vendor`. Replace any old DaisyUI plugin declaration to avoid duplicate loading. Use `data-theme="light"` or `dark` instead of the current wireframe theme when performing the separately authorized app integration. Use `btn`, `input`, `select`, `textarea`, `card`, `badge`, `modal`, and other standard DaisyUI classes. Use `sc-message`, `sc-prose`, `sc-dialog`, `sc-workspace`, and `sc-diff` for product compositions. Keep classes literal in ERB. Do not import the guide's JavaScript into Rails. Preserve font-relative URLs in static builds; adapt font logical asset URLs for Propshaft and verify production requests. Guide CSS is not a substitute for compiling application utilities. ## Interaction contract Give fields persistent labels and associated errors. Preserve input on failure. Disabled and busy controls must prevent repeated submission. Dialogs need names, Escape support, focus containment and restoration. Actions must be keyboard-accessible and visible without hover. Keep advisor identity and AI designation persistent. Treat pending, responding, error and partial completion separately. Announce completed responses politely; do not announce every streamed token or force-scroll someone reading older content. Keep memory attachments and sources inspectable. The synthesis/dissent specimen is a proposal, not proof of app behavior. Show clear empty/loading/error states for councils, forms, memory history, and model/provider settings. Never show actual credentials. Use native controls and respect reduced motion. Test mobile overflow with long names, messages, tables, and code. ## Resources - [Integration guide and coverage](https://brand.small-council.com/brand/ui.md) - [Tokens](https://brand.small-council.com/brand/tokens.json) - [Tailwind theme](https://brand.small-council.com/brand/theme.css) - [DaisyUI themes](https://brand.small-council.com/brand/daisyui.css) - [DaisyUI plugin](https://brand.small-council.com/brand/vendor/daisyui.mjs) - [DaisyUI theme plugin](https://brand.small-council.com/brand/vendor/daisyui-theme.mjs) - [Components](https://brand.small-council.com/brand/components.css) - [Fonts CSS](https://brand.small-council.com/brand/fonts.css) - [Regular font](https://brand.small-council.com/brand/assets/fonts/DejaVuSans.ttf) - [Bold font](https://brand.small-council.com/brand/assets/fonts/DejaVuSans-Bold.ttf) - [Font license](https://brand.small-council.com/brand/assets/fonts/LICENSE.txt) - [Interactive specimens](https://brand.small-council.com/components.html) - [Product specimens](https://brand.small-council.com/workspace.html) Check both themes, asset compilation, responsive reflow, labels, keyboard/focus, state transitions, and actual Turbo/Stimulus behavior if changing the app. Report gaps honestly. In a local toolkit use the same paths under `brand/`.