Brand
Everything you need to use this brand correctly: the name, the seven rooms, the type, the mascot, the texture and the way it speaks. Nearly every value below is read out of the product at the moment you load the page, so it cannot be out of date.
Reading the palettes from the stylesheet.
It’s Shorts by Slice. The old internal name was Caption Shorts and it still appears in code comments and file paths, which is fine; it must not appear in anything a person reads.
Right
Shorts by Slice
Shorts
Slice
Full name on first mention. After that, Shorts on its own is fine inside a piece about Slice. Slice on its own is the company and the wider product family.
Wrong
Caption Shorts
Slice Shorts
SliceShorts
slice shorts
Shorts By Slice
Sentence case on by, always. Caption Shorts is the internal name and Slice Shorts is nothing at all.
Captions by Slice is a different product and shares a subscription with this one. Podshare is a third. They are siblings, not versions of each other, so never write Slice Shorts Captions or treat one name as short for another.
A room is a whole palette, not a light and dark toggle. Three are near-black, three are coloured grounds and one is white. Mono is the default everywhere: the /shorts page, the dashboard, every step of an upload, not only the editor.
The accent means NOW and nothing else. The playhead, the spoken word, the live segment, a primary action. Four places. A palette that spends its accent on decoration has no accent left for meaning, and the moment it is used for a nice border nobody can find the playhead again. Anything needing a second colour takes a quieter one.
There are exactly two signals beyond the accent. Warn is advisory: nothing has failed and nothing is blocked. Danger means something failed or is about to destroy work. Neither is the accent's understudy and neither may be used for emphasis.
data-slice-theme="mono"DefaultGreyscale and one colour. The default.Reading.
data-slice-theme="oxide"Warm near-black and sand.Reading.
data-slice-theme="draft"Graphite, amber over steel.Reading.
data-slice-theme="turmeric"A mustard room. Oxblood for now.Reading.
data-slice-theme="clay"Warm terracotta, deep green.Reading.
data-slice-theme="pool"Pale aqua, burnt orange. The cool one.Reading.
data-slice-theme="studio"A white room. The footage is the dark thing.Reading.
The other six are a preference offered in the editor, where a person is settled and looking at one clip. Everywhere else in the product is Mono, because a product that changes character between its front door and its workbench does not read as one product.
Geist for everything you read in the interface. Geist Mono for timecodes, durations, file sizes and any other number a person scans while cutting.
Six steps, and they replaced fourteen. Half-pixel sizes were 51% of every font size in the editor and existed only as a nudge away from the neighbouring integer. If a new piece of text does not fit one of these six, the answer is to pick the nearest, not to add a seventh.
Heights
chip 24 · compact 28 · control 32 · primary 40
Spacing, on a 4px grid
xs 4 · sm 8 · md 12 · lg 16 · xl 24
Radii
sm 8 · md 12 · lg 16 · pill 999
Motion
instant: 0ms quick: 120ms cubic-bezier(0.2, 0, 0, 1) settle: 200ms cubic-bezier(0.2, 0, 0, 1)
Frequency graded. Things done constantly get none, occasional things get a short ease-out, and nothing bounces.
Elevation
floating: 0 18px 44px -16px rgba(0, 0, 0, 0.82)
One shadow for "this floats", because there was only ever one idea and six spellings of it.
A different thing entirely from the interface type above. These are what gets burned onto somebody's video, so they are the person's choice rather than ours, and the job of the brand is to offer a library that is findable rather than a wall.
98
families in the menu
98
installed on the worker, so offerable
14
with a real italic
9
categories
Only a family the render worker has installed may be offered. Everything else exports as a fallback face, which the person does not find out until the file arrives.
Only a family with a REAL italic may be italicised. This can never be inferred. Where the italic file is absent the worker falls through to the upright file of the same weight and renders silently upright, while the browser synthesises a slant, so the preview leans and the export stands up straight. Italic is a per-family fact, verified against the built image, not a style you can apply to anything.
Hebrew sits fourth in the order rather than last. It was appended to the end once, which put the only families that can draw עברית below eight groups of families that cannot, so the person who needed them most had the longest scroll to find out they existed. The layout still runs left to right: these make the glyphs right, and a multi-word Hebrew line reads in the wrong order until the renderer learns RTL.
The piece your edit leaves behind.
Slice's promise is subtraction: it drops the false start, the tangent, the throat-clearing. So the character is not a helper who makes things for you, it is the bit you chose to lose, and it is perfectly happy about that. It is a piece of film: one corner cut off, one clean angled slice across the bottom, and perforations punched down the left edge. The perforations say this is footage and the slice says it was trimmed off something longer, which is the whole name in one shape. It survives at 16px with no face at all, which is the test of a real mark. Everything else is parametric, which is why a new reaction costs a row in EXPRESSIONS rather than an illustration.
24px
48px
96px
160px
105 expressions exist. Six are shown.
Never
Where it may appear
Waiting, arrival, emptiness, and quietly alongside the work. It is filled with the room's accent and knocked out in the room's ground, so it is correct in all seven rooms without being redrawn. It is the only illustrated thing in the product allowed to hold the accent.
The full expression sheetThe woven ground. It’s the difference between a dark app and a made one.
Every surface carries two layers. The weave is two fine hairlines crossing at 89 degrees, one light and one dark: a single set of parallel lines reads as stripes, two crossing sets read as cloth, and it is the dark counter-thread that gives the over-and-under. The grain is a fractal-noise tile at very low opacity. Panels get both, the page gets the weave only, and the light rooms flip the arithmetic so the grain multiplies instead of screening. The effect is that a panel separates from the page by texture DENSITY rather than by another step of lightness, which is how the palette gets away with spending so few greys.
It never goes over footage. Grain and weave on somebody's picture is not texture, it is noise on their footage, and it gets judged as our export quality rather than as a page decoration. The video frame and the caption preview carry slice-clean, and any <video> is clean by default as a backstop.
A surface opts in with the class slice-surface and nothing else. The textures ride on pseudo-elements, so an inline background shorthand cannot wipe them out, and the positioning uses :where() so a floating menu keeps its own placement.
slice-surface
Weave and grain. Every card on this page is one, including this one.
slice-clean
Pristine. Put it on the container rather than the media, so the frame, the caption canvas and the safe-area guides all come up clean together.
The weave, as resolved
not read
The most important section on this page. Everything else can be rebuilt from a stylesheet. This can’t.
Plain, direct, first person where it’s honest. The reason this product exists is that the person who built it posts clips and wanted a better tool for it, and that’s more persuasive to the people using it than any adjective. It’s also the only claim on the page a competitor can’t copy. Write the way you’d explain it to someone sitting next to you, then take out the part where you were selling.
Write it the way you would say it out loud. Contractions, always.
Yes
That didn’t save. Try again in a moment.
No
That did not save. Please try again in a moment.
Say what happened, not that something happened.
Yes
The upload didn’t finish. Please try again.
No
Oops. Something went wrong.
An error explains the fix and doesn’t apologise for itself.
Yes
Couldn’t copy that automatically. Select the link and copy it.
No
Sorry, we were unable to complete your request at this time.
A control says exactly what it does.
Yes
Send it to render
No
Let’s go
A destructive control says what goes with it.
Yes
Delete this short? Its captions go with it.
No
Are you sure? This action cannot be undone.
Answer first, then explain.
Yes
Yes, and you’ll need to. Double-click a line to rewrite it on the video.
No
Great question. Editing your captions is a breeze.
Concede the limit rather than talking around it.
Yes
It doesn’t replace an editor. It just starts a lot closer to one.
No
Everything you need, all in one place.
First person where it’s honest, because the reason this exists is a person.
Yes
What took me longest to learn is that a good clip is almost never one unbroken stretch.
No
Slice empowers creators to unlock their best content.
They’re a person making a clip. Never a creator.
Yes
Pick a style, then fix whatever is wrong. A word at a time if you want.
No
Creators can effortlessly customise their captions.
Words we don’t use
None of these currently appears anywhere in the Shorts source. Keep it that way. The worst of them is creators: it turns a person making a clip into a market segment, and they can hear it.
Punctuation and spelling
There’s no logo file yet. That’s a genuine gap rather than an omission from this page, and inventing one here would create a second version of the truth for somebody to find later.
Shorts by Slice
Geist · 500 · letter-spacing -0.025em
The rule until there’s a file
The wordmark is the words "Shorts by Slice" set in Geist at weight 500 with the display tracking. No lockup, no icon beside it, no custom letterforms. Set it in the room's text colour on the room's ground.
Once Offcut is drawn properly
The Offcut mark may stand alone, without the words, because it already survives at 16px with no face. Use the component from the expression sheet and don’t redraw it by hand. Offcut is Shorts’ mascot only — the company’s own mark is a separate drawing, in public/mark.svg.
Open questions this page cannot answer yet: no social card template, and no printed or merchandise guidance. Ask rather than invent. (Favicon and app icon are settled — they use the company mark, not Offcut; see the Slice brand page.)
Palettes, type scale, font counts and mascot are read from the product at load. If this page and the product disagree, the product is right and this page has a bug.