@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/styles/design-system.md

@@ -0,0 +1,136 @@
+# OmniVideo design system (copied from ElevenLabs)
+
+Extracted on 2026-10-13 from the app (`elevenlabs.io/app`, logged-in account, light theme) and the
+landing page (`elevenlabs.io`). The raw values live in `tokens.css`, layer `--el-*`;
+the identity adjustments in `theme/identity/` (see "Where styles live").
+
+## Where styles live
+
+`web/index.html` links one stylesheet, `index.css`, which only `@import`s the rest; Bun
+inlines them into a single CSS file. **The import order is the cascade.** The partials
+are the former `global.css` cut into contiguous runs and imported in the original order,
+so rules with the same specificity still meet in the same order. That is why the folders
+interleave in `index.css` instead of being grouped.
+
+| folder | what |
+|---|---|
+| `tokens.css` | design tokens (`--el-*` raw, then the studio names), light and dark |
+| `base/` | reset, element defaults, text helpers (`.subtle`, `.hint`, …) |
+| `layout/` | app shell, side menu, page frame |
+| `components/` | one file per shared piece from `web/components` (`components/ui/` for `web/components/ui`) |
+| `pages/<page>/` or `pages/<page>.css` | rules only one page uses (`video/` is VideoPage, `video-list/` is VideosPage; not `videos/`, which the repo `.gitignore` drops) |
+| `theme/identity/` | the ElevenLabs identity layer: restyles the pieces above it |
+| `theme/no-borders/` | the no-borders layer: restyles everything above it |
+
+Some pages have more than one partial (VideoPage, VideosPage, SchedulePage, SettingsPage,
+AnalyticsPage) because their
+rules sat in several places of the old file, before and after the theme layers; each
+partial keeps its place. A few files carry a small rule of another area where moving it
+would have changed the order (each file's header says so).
+
+Adding a rule: put it in the partial of its area. It loses to any later partial with the
+same specificity, so a rule that must beat a theme layer goes in a partial imported after
+it. A new partial goes in `index.css` at the point where its rules should start winning.
+
+## Our decisions
+
+| | ElevenLabs | OmniVideo |
+|---|---|---|
+| Font | Inter (app), Waldenburg 300/400/700 (landing), Geist Mono, JetBrains Mono | **Schibsted Grotesk** 400–700; mono Geist Mono |
+| Icons | line, 16 px | **Hugeicons** (`@hugeicons/react` + `@hugeicons/core-free-icons`, rounded stroke), bundled in `web/components/icons.tsx` |
+| Brand | its own wordmark | icon = the blurred ring, no background: `web/assets/logos/omni-black.png` in the light theme (the default) and `web/assets/logos/omni-white.png` in the dark one, also as the favicon, + "Omni" in Schibsted Grotesk 700 (`BrandLogo.tsx`) |
+
+## Color (light theme)
+
+| token | value | use |
+|---|---|---|
+| background | `#ffffff` | page background, cards |
+| background-alt | `#fcfcfc` | log background |
+| foreground | `#0f0f10` | text, **primary button** |
+| secondary (alpha 500) | `#00000087` | secondary text, inactive menu item |
+| subtle (alpha 450) | `#00000070` | tertiary text, placeholder |
+| muted (alpha 100) | `#0000000b` | soft background, hover |
+| border (alpha 150) | `#00000013` | default line |
+| border-control (alpha 200) | `#0000001a` | outline of button, chip, field |
+| active nav | `rgb(0 0 0 / .043)` + text `#171717` | selected sidebar item |
+| sidebar | `#fafafa`, text `#3f3f46`, border `#e5e7eb` | |
+| destructive | `#ef4444` | error |
+| chart-success | `#00cc44` | ok (in the studio, text in `#00a336` for contrast) |
+| chart-primary | `#0548ff` | running |
+| toast | `hsl(0 0% 13% / .85)`, title `hsl(0 0% 98%)` | always dark |
+
+Gray scale `--el-gray-50…950` (HSL with no hue, 98 → 9 %) and alpha scale
+`--el-alpha-50…900` (black on white; in the dark theme it is the same step in white).
+
+**Amber (warning):** the app only has the `toast-warning` tone (pastel). The studio's
+`#c2610c` is derived from that hue, darkened for text. It is not from ElevenLabs.
+
+### Dark theme
+
+Values from the app's `.dark`: background `#0f0f10`, sidebar `#18181b`, accent
+`#1f2937`, destructive `#7f1d1d` on destructive backgrounds; secondary, tertiary and
+border mirror the alpha scale in white (`lighten-N`, confirmed by
+`toast-divider #fff2` = alpha 250). **Not checked visually**: the account was on the
+light theme.
+
+## Landing
+
+| | |
+|---|---|
+| background | `#fdfcfc`; surfaces `#f5f3f1`, `#ebe8e4` |
+| text | `#000`; secondary `#44403b`; border `#e5e5e5` |
+| accent | orange `#ff4704`, blue `#0447ff` |
+| buttons | pill (`9999px`), 36 px, 14/21, weight 400; primary black, secondary white |
+| H1 | 48/52, weight 300, `-0.96px`; H2 36/42 weight 300 |
+| column | 720 px centered, gray container `#f5f3f1` with radius 24 and pill tabs |
+
+The landing did not become a screen: the studio has no public page. The `--el-land-*` tokens
+stay around for a thumbnail or an outside page, if one is ever needed.
+
+## Typography (app)
+
+| role | size/line | weight |
+|---|---|---|
+| hero ("what do you want to create") | 28/36, `-0.21px` | 400 |
+| card title | 24/30 | 400 |
+| section header | 16/24 | 550 |
+| UI: button, menu, tab | 14/20 | 500 |
+| small button, Feedback | 13/20 | 500 |
+| label, table header | 12/16, `0.03px` | 400 |
+
+Tabular numbers on (the studio already had them).
+
+## Shape
+
+| | |
+|---|---|
+| radius | 2 · 4 · 6 · 8 · 12 · 16 · 24 · full |
+| menu item, tab, 36 button | 10 |
+| 40 action button, chip, filter, field | 12 |
+| small button | 8 |
+| promo card | 24 |
+| shadow | none; hierarchy through a 7.5 % border |
+| switch | 36 × 20, on `#0f0f10` |
+| table row | 36 px, bottom border alpha 75 |
+
+## Layout
+
+- Sidebar 255 px (231 × 32 items, 12 px of breathing room), "Pinned" section in 12/500
+  secondary, footer with Developers / Upgrade / workspace.
+- Top bar 40 px with no border: sidebar button, breadcrumb ("Voices › Explore"),
+  central search (⌘K), Feedback / Docs / Ask on the right.
+- Page: central 706 px column (Home, Voices, Developers); tool screen
+  in two parts (text on the left, ~290 px settings panel on the right,
+  fixed footer with credits and the "Generate" button).
+- List pages: title, tabs (30 px, radius 10, the active one outlined), 40 px
+  search, filter chips, list/table.
+
+## What the studio copied and what it didn't
+
+Copied: sidebar, top bar with breadcrumb, buttons, fields, tabs, chips/badges,
+tables, switch, borders, radii, state colors, black focus.
+Kept from the studio, with no ElevenLabs equivalent: pipeline stepper, sound
+timeline, schedule calendar, results drawer, voice carousel. These use
+the same tokens and radii, but the design is ours.
+Not copied: the central 706 px column (the studio is dense: two columns, timeline),
+global ⌘K search, top banner, plan/credits footer.

package/studio/web/styles/index.css

@@ -0,0 +1,116 @@
+/* OmniVideo studio stylesheet entry, linked from web/index.html. It copies the
+   ElevenLabs interface (app and landing): alpha neutrals over white, black #0f0f10 as
+   action, 255 px sidebar, 32 px items with radius 10, buttons and chips of 12, 7.5 %
+   borders. Schibsted Grotesk font. Tokens live in tokens.css (raw ElevenLabs value in
+   --el-*) and the docs in design-system.md.
+
+   The import order IS the cascade. The partials are the old global.css cut into
+   contiguous runs, imported in the same order, so rules of equal specificity keep their
+   relative order. That is why folders interleave (a page file can sit between two
+   component files) and why theme/ comes late: identity and no-borders adjust the pieces
+   above them. A rule added to a partial loses to any later partial with the same
+   specificity: one that must win over a theme/ layer goes after it. Map of the
+   partials in design-system.md ("Where styles live"). */
+
+@import "./tokens.css";
+
+/* Pieces by area, in the order they were written: base, shell, then components and pages. */
+@import "./base/elements.css";
+@import "./base/utilities.css";
+@import "./layout/sidebar.css";
+@import "./components/status-signals.css";
+@import "./layout/page.css";
+@import "./components/human-banner.css";
+@import "./pages/video-list/list.css";
+@import "./components/badge.css";
+@import "./components/stepper.css";
+@import "./components/panel.css";
+@import "./components/queue.css";
+@import "./pages/video/layout.css";
+@import "./pages/video/result.css";
+@import "./components/controls.css";
+@import "./pages/video/publish.css";
+@import "./components/platform-card.css";
+@import "./pages/video/publish-when.css";
+@import "./components/data-and-image.css";
+@import "./pages/video/scenes.css";
+@import "./pages/video/narration.css";
+@import "./components/table.css";
+@import "./pages/video/timeline.css";
+@import "./pages/video/frames.css";
+@import "./components/tabs.css";
+@import "./components/markdown.css";
+@import "./components/results-drawer.css";
+@import "./components/lightbox.css";
+@import "./pages/new-video/form.css";
+@import "./components/forms.css";
+@import "./components/claude-session.css";
+@import "./pages/references.css";
+@import "./pages/video/voice-picker.css";
+@import "./pages/settings/usage.css";
+@import "./pages/analytics/dashboard.css";
+@import "./components/ui/chart.css";
+@import "./pages/analytics/insights.css";
+@import "./components/reference-picker.css";
+@import "./components/reference-actions.css";
+@import "./pages/settings/shell.css";
+@import "./pages/video/captions.css";
+@import "./components/segmented.css";
+@import "./pages/video/caption-controls.css";
+@import "./pages/settings/models.css";
+@import "./pages/video/export.css";
+@import "./pages/video/sound-timeline.css";
+@import "./pages/video/editor-chat.css";
+@import "./pages/video/sound-toolbar.css";
+@import "./pages/video/thumbnail.css";
+@import "./pages/video/fullscreen-stage.css";
+@import "./components/omnichat.css";
+@import "./pages/schedule/calendar.css";
+@import "./components/voice-profiles.css";
+@import "./components/clone-voice.css";
+@import "./components/provider-card.css";
+@import "./components/clone-voice-save.css";
+@import "./components/modal.css";
+@import "./components/voice-carousel.css";
+@import "./components/voice-editor.css";
+
+/* Identity layer (ElevenLabs): restyles the pieces above, so it stays after them. */
+@import "./theme/identity/shell.css";
+@import "./theme/identity/titles-and-buttons.css";
+@import "./theme/identity/surfaces.css";
+@import "./theme/identity/details.css";
+
+/* ui/ primitives, written in the identity's terms. */
+@import "./components/ui/slider.css";
+@import "./components/side-panel-tab.css";
+@import "./components/ui/select.css";
+@import "./components/ui/tooltip.css";
+@import "./components/ui/checkbox.css";
+@import "./components/ui/switch.css";
+
+/* No-borders layer: restyles everything above, so it stays after it. */
+@import "./theme/no-borders/blocks.css";
+@import "./theme/no-borders/controls.css";
+
+/* Later additions, written against both layers above. */
+@import "./pages/video-list/card-link.css";
+@import "./pages/video/captions-grid.css";
+@import "./components/voice-grid.css";
+@import "./pages/video/processing-notice.css";
+@import "./pages/video-list/active-row.css";
+@import "./components/claude-running.css";
+@import "./components/claude-walking.css";
+@import "./components/ui/accordion.css";
+@import "./pages/video/take-player.css";
+@import "./components/ui/date-picker.css";
+@import "./pages/getting-started.css";
+@import "./pages/video/preview-overview.css";
+@import "./components/ui/skeleton.css";
+@import "./layout/sidebar-groups.css";
+@import "./pages/not-found.css";
+@import "./pages/studio-offline.css";
+@import "./pages/schedule/chip-states.css";
+@import "./pages/video/instagram-carousel.css";
+@import "./pages/agent.css";
+@import "./components/omni.css";
+@import "./components/omni-cards.css";

package/studio/web/styles/layout/page.css

@@ -0,0 +1,41 @@
+/* Page frame: main, the page .header and its action; also the .videos-page header layout. */
+
+/* --- pages ------------------------------------------------------------------------ */
+main {
+  max-width: 1520px;
+  margin: 0 auto;
+  padding: 24px;
+}
+.header {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+.header .subtle {
+  font-size: 15px;
+}
+.header-action {
+  margin-left: auto;
+  flex: none;
+}
+
+.videos-page {
+  --panel-w: 420px;
+  transition: margin-right 0.2s ease;
+}
+
+.approval-notice {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 16px;
+  align-items: baseline;
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  border-radius: var(--radius);
+  background: var(--warning-bg);
+  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
+}
+.approval-notice strong {
+  color: var(--warning);
+}

package/studio/web/styles/layout/sidebar-groups.css

@@ -0,0 +1,39 @@
+/* Sidebar.tsx: voice profile icon and the menu groups. */
+
+/* "Perfil de voz" in the menu: two overlapping 14 px avatars, 20 px wide like the other icons */
+.menu nav a .avatar-group-icon {
+  display: inline-flex;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  flex: none;
+}
+.menu nav a .avatar-group-icon .voice-avatar {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1.5px var(--el-sidebar-bg);
+}
+.menu nav a .avatar-group-icon .voice-avatar + .voice-avatar {
+  margin-left: -8px;
+}
+
+/* menu sections: the name in mono uppercase, like the Settings groups; Settings alone at the footer */
+.menu .menu-group {
+  gap: 2px;
+}
+.menu .menu-group + .menu-group {
+  margin-top: 8px;
+}
+.menu-group-name {
+  padding: 0 8px 4px;
+  font: 500 11px var(--mono);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-3);
+}
+.menu .menu-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}

package/studio/web/styles/layout/sidebar.css

@@ -0,0 +1,111 @@
+/* App shell and side menu (AppShell.tsx, Sidebar.tsx): grid, content panel, menu, brand, footer, the .signals strip, mobile. */
+
+/* --- side menu and top ---------------------------------------------------------- */
+.app {
+  display: grid;
+  grid-template-columns: var(--menu-width) minmax(0, 1fr);
+  align-items: start;
+}
+/* the content is a muted panel detached from the window: margin 8 (m-2), radius xl, and flush with the
+   menu on desktop (ml-0) */
+.content {
+  min-width: 0;
+  align-self: stretch;
+  margin: 8px;
+  border-radius: var(--el-radius-xl);
+  overflow: clip;
+  background: var(--muted);
+}
+/* on desktop the app is window-high and the panel scrolls: the margin does not push the page
+   past 100vh, and content that overflows gets internal scrolling (sticky elements stick to the panel) */
+@media (min-width: 901px) {
+  .app {
+    height: calc(100vh - var(--banner, 0px));
+    overflow: hidden;
+  }
+  .content {
+    margin-left: 0;
+    height: var(--content-height);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+}
+.menu {
+  position: sticky;
+  top: var(--banner, 0px);
+  height: calc(100vh - var(--banner, 0px));
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 20px 16px;
+  border-right: 1px solid var(--border);
+  background: var(--bg);
+}
+.brand {
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  font-size: 15px;
+  white-space: nowrap;
+}
+.brand span {
+  color: var(--text-3);
+  font-weight: 500;
+}
+.menu nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.menu nav a {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  color: var(--text-2);
+}
+.menu nav a svg {
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+.menu nav a:hover,
+.menu nav a.active {
+  background: var(--surface-2);
+  color: var(--text);
+}
+/* Getting started: at the menu footer, only while setup is missing */
+.menu .menu-footer {
+  margin-top: auto;
+}
+.menu-footer .tab-count {
+  margin-left: auto;
+}
+
+.signals {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+@media (max-width: 900px) {
+  .app {
+    grid-template-columns: 1fr;
+  }
+  .menu {
+    position: static;
+    height: auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 16px;
+    padding: 12px 16px;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+  .menu nav {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}

package/studio/web/styles/pages/agent.css

@@ -0,0 +1,26 @@
+/* AgentPage (/agent): Omni's measurements. Omni itself is components/omni.css. */
+
+.agent-page {
+  max-width: 820px;
+}
+/* --- measurements -------------------------------------------------------------------------------- */
+.omni-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 10px;
+  margin-top: 20px;
+}
+.omni-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 12px 14px;
+  border-radius: var(--radius);
+  background: var(--muted);
+}
+.omni-stat strong {
+  font-size: 20px;
+}
+.omni-stat .hint {
+  font-size: 12px;
+}