Find your kind of story.
Films and series, connected by you. A personal recommendation companion for people who want more than another streaming service’s front page. This page is the living reference: every colour, size and component below is read from the app itself.
Personal
Connect mood, themes and storytelling. One taste profile spans movies and series.
Independent
Start with the viewer’s taste. Show where a title is available in Sweden.
Considered
Give quality and confidence context. Balance ratings with the number of votes.
One word. Two weights.
Cineora is always one word with a capital C. Manrope, “Cine” at 650 and “ora” at 400: the change of weight gives the name its rhythm. The lettering is outlined, so no font is needed.
Clear space
H is the height of the capital C. Leave at least half of it on every side, measured from the visible letters. The component has no padding of its own, so the layout provides it.
Cine / 650
Manrope Semibold. The stronger opening anchors the name.
ora / 400
Manrope Regular. The lighter ending keeps the wordmark open.
One continuous name
Same size, baseline and colour. No inserted space and no second capital: never “CineOra” or “Cine ora”.
Masters
Colour comes from the theme, not the file: in the app the wordmark is drawn in currentColor, so it is Chalk on dark and Ink text on light. These tiles are the live component; the files are the brand masters.
Minimum size
Never below 100 px wide. Set the width only; the height follows.
Optional lockups
The mark beside the wordmark, for places the name and the symbol must travel together (at least 140 px wide). The app itself uses the wordmark alone, so these exist only as files.
Keep the shape
Use the dark, light or mono master matched to the background, on a quiet surface or a scrim.
A small invitation to watch.
A softened cinema ticket with a clipped corner and a play-shaped cutout. One solid silhouette, clear at 16 px. It is the app icon, the favicon and the face of the assistant; the wordmark is for wherever the name must be read.
App icon
Dark tile, blue symbol. The 1024 px master is opaque and full bleed; platforms apply their own corner mask.
The live CineoraMark in --primary. Keep the cutout open; don’t redraw the ticket or add detail. The standalone mark’s minimum is a 16 px canvas.
Every size we ship
The real files, from favicon to PWA. Large ones are scaled down to fit and say so.
Maskable safe zone
Android and installed web apps crop the maskable icon to their own shape. Everything that matters sits inside the central circle (80 % of the width); the ticket stays well within it.
Masters: 1024 px app icon, 180 px Apple touch icon, 192 and 512 px PWA icons, a 512 px maskable icon, and favicons as SVG, 16/32/48 px PNG and a multi-size ICO.
The assistant
When Cineora speaks, the mark stands in for it: action blue on a soft tile. No sparkles, no robot. The chat header, its welcome tile, every message byline, the dock and ⌘K’s “Ask Cineora” row all use it.
Quiet surfaces. Clear signals.
Neutral surfaces let posters lead. Blue guides action, rose signals Love and warm yellow identifies IMDb scores. Click any swatch to copy its hex.
Dark · cinematic blackDefault
Light · soft white
Contrast
WCAG 2 ratios computed from the values above. Body text needs 4.5:1 (AA), large text 3:1; focus is a 2 px action-colour ring. Overlays on posters and backdrops stay dark in both themes, with white text on a scrim.
| Pair | Dark | Light |
|---|---|---|
| Primary text on canvas--text / --canvas | … | … |
| Primary text on surface--text / --surface | … | … |
| Secondary text on canvas--muted-text / --canvas | … | … |
| Secondary text on surface--muted-text / --surface | … | … |
| Action on canvas--accent-color / --canvas | … | … |
| On action on Action--on-accent / --accent-color | … | … |
| Love on canvas--love / --canvas | … | … |
| Love on love surface--love / --love-surface | … | … |
| IMDb score on surface--score / --surface | … | … |
| Caution on surface--caution / --surface | … | … |
| Caution on canvas--caution / --canvas | … | … |
One action colour
Blue is for things you can do: links, Like, Watchlist, focus. Don’t use it for decoration.
Rose is for Love
Rose marks Love, the strongest reaction. Keep it off decoration so a Love always reads as one.
Colour plus a label
Selection always shows text and icon shape as well as colour: a filled heart, a check, a strike-through.
Calm, precise and easy to read.
Geist carries the interface, at every size. Manrope belongs to the wordmark only. Geist Mono is for compact data.
Stories that stay with you.
IMDb 7.9 · 883K votes · 2h 56m · SE
Type scale
Rendered with the real utility classes; the sizes are measured in your browser. Phones use the text-mobile-* classes for display, page and section titles. (The manual lists the phone section size as 24 / 30; the tokens say 23 / 28, and the tokens win.)
Arrival
For you
Slow-burn Nordic noir
A linguist is recruited to talk to visitors, and time comes apart.
Add to watchlist
Because you loved Arrival
IMDb 7.9 · 883K votes
Fluid headlines
Headlines don’t jump between sizes: they grow from their 390 px size to their 1440 px size with clamp(), and display may shrink a little more so long titles fit a 320 px phone. Resize the window to watch the current sizes change.
Arrival
For you
Slow-burn Nordic noir
Sentence case
Headings, buttons and labels: “Add to watchlist”, not “Add To Watchlist”. Short eyebrows too; no all-caps labels.
Let scale do the work
Short headings, generous line height, weight 600 for titles and 400 for reading. No decorative treatments.
Numbers in mono
Use Geist Mono for compact data (scores, counts, codes), never for prose.
Space, shape and rhythm.
A 4 px base, soft radii and one grid that every edge lines up with, from 390 px phones to 1920 px screens.
Spacing
The 4 px scale: 4, 8, 12, 16, 24, 32, 48, 64. Section spacing is 64 on desktop and 40 on phones; touch targets are at least 44 px.
……………………Radii
Posters 12, controls are pills, panels 24, heroes and dialogs 28 (the chat dialog 30), the quiz panel 32. The phone chat has no outer radius.
…Posters…Controls…Panels…Heroes, dialogs…Quiz panelElevation and glass
Mostly flat: surfaces separate by tone, not shadow. Translucent glass is for chrome that floats over content (nav, dock, dialogs, toasts), always with a blur; with reduced transparency it turns opaque.
--shadow-soft--glass + blurGrid and breakpoints
Read from the stylesheets: the base values, each media query’s overrides and what applies at your width right now. Content stops at 1792 px; everything that spans the page uses --edge, which also keeps clear of a landscape notch. Bottom chrome adds the safe-area inset, and heroes stop above the Ask dock with --dock-clearance.
| Token | Base | Now |
|---|---|---|
| Gutter--gutter | · | … |
| Grid columns--grid-columns | · | … |
| Grid gap--grid-gap | · | … |
| Top nav--nav-height | · | … |
| Phone tab bar--mobile-nav-height | · | … |
| Touch target--touch-target | · | … |
| Content max--content-max | · | … |
| Dock clearance--dock-clearance | · | … |
Responsive rules
One set of breakpoints for the whole app. Use these, not new ones. The full rules and the audit method are in design-system.md.
| Query | What changes | Now |
|---|---|---|
| Compact nav(max-width: 1180px) | Icon-only search, no region label; heroes stop above the dock | … |
| Tablet(max-width: 1000px) | Gutter 40, 4 columns | … |
| Stacked detail(max-width: 900px) | Where to watch under the story; onboarding and Ask in one column | … |
| Tight nav(max-width: 820px) | Gutter 32, wordmark 108, tighter nav links | … |
| Phone(max-width: 640px) | Gutter 20, 2 columns, tab capsule, full-screen dialogs | … |
| Short(max-height: 500px) | Landscape phones: nav 60, compact chrome | … |
| Touch(pointer: coarse) | 44 px targets | … |
| No hover(hover: none) | Cards use the round Watchlist button | … |
Nothing in the nav wraps
It loses labels instead: icon-only search at 1180, tighter links at 820, the tab capsule on phones.
svh for first screens, dvh for sheets
Never vh. Subtract --nav-height and --dock-clearance instead of hardcoding 82 or 68.
44 px on touch
Under pointer: coarse every control gets 44 px, real or as an invisible hit box. Without hover, cards show the round Watchlist button.
Motion confirms intent.
Motion is short, physical and quiet. It answers a press, fills a Love and moves you through the quiz. Nothing loops or decorates.
- Press
- …scale .96 ·
--press-ms - Love fill
- …gentle overshoot ·
--love-fill-ms - Quiz advance
- …slide 60 px ·
--quiz-advance-ms - Overshoot
- …Love and selection ·
ease-overshoot
MovieMind-bending, Tense & dark
Reading your answer…
Reduced motion
The app runs inside Motion’s MotionConfig with reducedMotion set to “user”: when the system asks for less motion, transforms and slides are dropped and only opacity and colour change. The filter sheet fades in instead of rising.
…
Make taste easy to express.
The real components, on sample titles. Everything here works with local state only: nothing is saved and nothing needs an account.
Title card, every state
Posters are 2:3. The whole card opens the title; quick actions are separate buttons, revealed on hover or keyboard focus. Phones show a single 44 px Watchlist button. Try the actions.
MovieMovieMovieMovieMovieMovie
Series
MovieBecause you loved Blade Runner 2049
Movie92% matchSeriesOutside your limitsOff-limitsFeature card
One big title between rows, to break up a long page. The eyebrow says why it’s here: a member’s own reason, or “A Cineora pick” for everyone else. Never a title the page already shows, and each card on a page gives a different reason. On phones the poster drops, the backdrop sits on top and the reactions move to its corner.
Arrival
“When alien ships land across the globe, a linguist must decode their language before the world's militaries strike first, and discover what it truly means to understand time.”
Rating
Three honest reactions: Not for me, Like, Love. Exclusive and reversible: a second tap clears it. Watchlist is a separate action.
Quality chip
Show the original IMDb score, with the vote count where there is room. Ranking weighs votes internally; never label that number “IMDb”. Without an IMDb score, TMDB’s is shown and labelled TMDB.
Where to watch
Provider logos come from TMDB; names stay readable next to them. Availability always names the region (Sweden) and credits JustWatch.
How it feels
Continues the story card under the overview, with no heading of its own. The strongest moods and themes are chips styled like the search filter chips they open; pace, intensity and complexity are written out with dots beside them; who it’s good for and any content heads-ups close it as one sentence.
- Pace
- Measured
- Intensity
- Mild
- Complexity
- Demanding
Good for watching alone, talking about after and a rainy day.
Episode ratings
Under a series’ season cards, with no heading of its own, in the chart card the person page’s Career uses: four stat tiles, one line of verdict, then one row per season and one cell per episode, coloured by IMDb rating within the show’s own range (a five-step blue ramp that flips in dark). The cells stretch so the grid always spans the card (fixed height, at least 14 px wide; longer seasons scroll). Episodes with fewer than 10 votes are hollow. Hover, focus or tap a cell for the episode; arrow keys move between cells. Long seasons scroll inside the grid; after 12 seasons it folds behind “Show all 31 seasons”. Hidden under 6 rated episodes.
- Seasons rated
- 5
- Average IMDb
- 8.9
- Best season
- Season 5IMDb 9.3
- Best episode
- FelinaS5 E16 · IMDb 9.8
Best in season 5 (IMDb 9.3), weakest in season 1 (8.7).
Your match
Members with a taste profile see it in the title page hero on a title they haven’t rated, beside the IMDb score. The match is a percentile of their own taste, so 94% means it beats 94% of the catalog for them. One quiet line says why: the side of their taste, only as strongly as it holds (“Fits your …” when close, “Closest to your …” when near, no side when far), and the top two things it plays to. “Why?” opens the rest: what they go for as chips, what usually isn’t them, people they like. A title outside their limits shows the limit instead of a number; cards show the same as a small badge.
Fits your quiet, cerebral sci-fi · thought-provoking, measured pace
94% match
Fits your quiet, cerebral sci-fi. It scores higher for you than 94% of the catalog.
- Thought-provoking
- Measured pace
- Demanding
More melancholic than you usually like.
Denis Villeneuve
Inputs
Fields sit on the canvas tone with a hairline and the action-colour focus ring.
Chips and filters
The /search controls: tri-state chips, removable active filters, a segmented sort, a range slider and a searchable multi-select.
Dialogs and sheets
Dialogs are Radix (focus trap, Escape) animated with Motion. On phones, filters come up as a sheet you can drag down.
Ask
Ask Cineora beside a live board: the real chat sheet and board on a sample conversation. Each reply shows its steps as quiet lines and its search as chips you can remove; the picks land on the board, framed like Discover, where saving a card and Not this one steer the next reply. Cards only ever come from the catalog: the assistant never invents a title. Everything here stays on this page.
I loved Arrival. Give me a series with that same feeling.
The mystery is only half of it. You loved how Arrival made a big idea feel deeply personal. Start with Severance.
Picks
Best match first.
SeriesA controlled mystery about identity and memory.
SeriesTime folds in on itself; family holds it together.
SeriesPatient, Nordic and quietly devastating.
MovieA first contact of another kind.
MovieBig ideas at a slow, deliberate pace.
Toasts
One quiet confirmation style: a glass pill at the bottom, with a check. Short and warm; it confirms, it doesn’t celebrate.
Member pass
The top of /account: photo, name and status above a line, what the member has done below it (counting up once, each a link). Someone still on the list gets a pointer to the email card instead of numbers.
Alex Lindqvist
Member since October 2026
Sam
Member since October 2026
Cineora is invite-only for now. Invited under another address? Add it below and you’re in once it’s verified.
Empty states
Say what happened and offer one way forward. Here: a signed-in visitor without an invite.
Invite only, for now.
Your recommendations need an invite. You’re signed in, but this account isn’t on the list yet. Ask Markus to add you.
Keep browsingLoading states
Every page has a skeleton (its loading.tsx), so a click switches pages at once. A skeleton is the page’s real markup with text swapped for word-shaped bars: same classes, same line heights, words sized in em from the real copy’s length. It wraps where the real text would and lands on the exact frame at every width. Left: loading. Right: loaded.
MovieBecause you loved Blade Runner 2049
A thoughtful friend with good taste.
Cinematic, editorial and confident. Be specific about the experience, and leave room for the viewer’s judgment.
| Principle | Sounds like Cineora | Avoid |
|---|---|---|
| Invite curiosity | A familiar feeling. Something unexpected. | The ultimate AI-powered entertainment experience. |
| Explain the connection | Because you loved Arrival: patient storytelling, big ideas and an emotional payoff. | You like sci-fi. Here is more sci-fi. |
| Keep choices human | Not for me / Like / Love | Dislike / Approve / Highly approve |
Write short and concrete
Sentence case everywhere. Explain tone, themes and storytelling. No hype, no catalogue-pushing, no emoji.
Ratings
Say “IMDb 7.9” and the vote count; that is IMDb’s number. Our weighted rank stays internal and is never called IMDb. A rating is a reaction, not a grade.
The assistant
It is “Cineora”, shown by the mark, and it talks like the rest of the product. It only shows titles from our catalog, and it replies in the user’s language.
Availability
Always name the region: “Streaming in Sweden”, “Not streaming in Sweden right now.”
Attribution
Required, and always in the footer of every page.
This product uses the TMDB API but is not endorsed or certified by TMDB.
Ratings from IMDb. IMDb is a registered trademark of IMDb.com, Inc.
Streaming availability from JustWatch.
TMDB and IMDb data are licensed for non-commercial use, so Cineora is always non-commercial.Built to stay consistent.
Use the files as the source of truth, and keep this page in sync when a component or token changes.
Downloads
In the repo
- Tokens, patterns, brand rules
agent_docs/design-system.md - The tokens
packages/ui/src/styles/globals.css - Edition 2 styles
apps/web/app/design-v2.css - Wordmark component
packages/ui/src/components/cineora-wordmark.tsx - Mark component
apps/web/components/brand/cineora-mark.tsx - This page
apps/web/app/brand/page.tsx