StudioOS is a considered project workspace for small creative teams. The first vertical slice focuses on the overview dashboard: project health, focus tasks, recent activity, review queue, search, notifications and project creation.
The interface follows Bright Pill OS: an iOS-inspired system of bright system colours, translucent materials, capsule navigation, pill controls, large rounded surfaces and restrained spring-like motion. Blue identifies primary actions, green confirms healthy states, orange carries attention, and purple adds creative emphasis while the content remains readable on a light canvas.
The frontend is intentionally framework-free: semantic HTML, layered CSS and one JavaScript application file. ios-pill.css is the current presentation layer; the older stylesheets remain underneath it so product behaviour and legacy component coverage stay intact. The interface keeps its data in local JavaScript state so the interaction model can be reviewed before adding persistence. Project imagery and the brand mark live in assets/.
Because this is a static site, you can open index.html directly or serve the folder with any static server:
python3 -m http.server 4173Then open http://localhost:4173 in a browser.
The included workflow copies index.html, styles.css, script.js and assets/ into a small static artifact, then publishes it to GitHub Pages. No Node.js, package installation or bundler is needed in CI.
The overview supports project search, responsive navigation, task completion, adding a focus task, project creation, project review dialogs and a notification popover. Navigation items that are outside the first vertical slice provide intentional feedback rather than dead ends.
The next product slice should add a project detail route with milestones, task filters, deliverable versions, comments and client-safe approval states. The data model should remain local until the information architecture is validated with real users.
The UI feedback tool is distributed as a single ESM file. Pull it from jsDelivr (pinned to a tag) so updates propagate by bumping the version in one place:
<script type="module">
import { createUIFeedback } from 'https://cdn.jsdelivr.net/gh/Ngh1aa/StudioOS@v0.4.0/ui-feedback.js';
createUIFeedback({
storageKey: 'my-app-feedback', // namespace per project
accent: '#f5a623',
githubRepo: 'your-org/your-repo', // optional, enables 1-click issue creation
});
</script>git tag -a v0.4.0 -m "UI feedback v0.4: edit/css markers, undo button, export fix"
git push origin v0.4.0jsDelivr picks up the tag within a minute. Bump the @v0.4.0 segment
in each consuming project to roll out the new version. Pinning to a tag
keeps production stable; use @main only for local previews.