Small Business Tips

Dynamic Template

# Canva Sample — Small Business Tips A listicle reel recreated from a Canva screen capture: a cover, four pieces of advice, two minimal interstitials between them and a follow card. Eight scenes in all three ratios, over generic photography. The design is one idea repeated — a rounded indigo plate carrying every word in the scene, floating over a full-bleed photograph. Nothing is set on the picture itself, so the picture can be anything and the copy stays legible. What gives the reel its rhythm is that the plate MOVES: centred for the cover, then top left, bottom right, top right, bottom left, and centred again to close — with the two interstitials parked in the middle, holding still while the tips circle the frame around them. The card does not hold one colour. There are THREE card tones and the plate changes at every cut, with no two adjacent scenes carrying the same one. The two interstitials share a tone because they are the pauses; the four tips alternate the other two. Whether those tones are one hue or a complementary pair is the palette's decision, not the layout's. Roboto Condensed throughout, uppercase throughout — the cover and close headlines at 600, the tip headings at 700, everything small at 500 with tracking. Headlines are acid yellow, everything else white. ## Scenes | scene | plate | tone | carries | | --- | --- | --- | --- | | `cover` | centred | `plate` | tracked label, three-line headline, three-line standfirst | | `brand` | top left | `plate-alt` | one-line heading, four justified lines | | `statement` | centred | `plate-pause` | **header only** — two lines of the cover's headline type | | `trends` | bottom right | `plate` | three-line heading, five justified lines | | `content` | top right | `plate-alt` | two-line heading, four justified lines | | `aside` | centred | `plate-pause` | **subtext only** — five justified lines, no heading | | `service` | bottom left | `plate` | two-line heading, four justified lines | | `close` | centred | `plate-alt` | tracked label, two-line sign-off, a handle; `meta.silent` | The two interstitials sit between the tips rather than beside them, and they are the only cards that stop moving: both are centred in every ratio, so a reel that has been throwing its plate into corners pauses twice. `statement` is the loud one — the cover's headline size on a plate drawn to two short words a line, capped at the cover's own width so it stays a card rather than becoming a banner. `aside` is the quiet one — the tip body size and nothing else, on the smallest plate in the file. ## The motion Three mechanisms, each measured off the capture frame by frame rather than assumed: | beat | how | at | | --- | --- | --- | | plate | `scaleY` from the top edge, so the card unrolls downward | 0.10s / 0.34s | | label | opacity only | 0.38s | | cover, close + `statement` headline | per-LINE fade with a DESCENT (`yPercent: -50`) | 0.48s, 0.11 stagger | | tip heading | per-LINE fade with a RISE (`yPercent: 62`) | 0.44s, 0.11 stagger | | body copy | per-LINE fade with a rise | 0.68s (tips) / 0.80s (cover), 0.15 stagger | | `aside` subtext | the same rise, but at 0.50s — nothing sits above it to wait for | 0.50s, 0.15 stagger | | handle | one line, rise | 1.05s | `statement` takes the descent because it is a headline beat; `aside` takes the rise, like every other piece of body copy. The descent on the big headline against a rise on everything else is not a slip. The capture really does open its cover that way — its first headline line enters 24px ABOVE where it settles and drops in, while every tip line enters about 10px below and rises — and it is what makes the two centred cards read as a different beat from the four tips between them. Nothing is keyed to a scene's end. The reel cuts each scene by pushing the next up from the bottom, ported as `transition: slide / from-bottom`; its per-layer exits are not ported, because the narration will not be the length the placeholder is. ## Justified copy The body is set justified with the last line flush left. The wide, even word gaps are half of what makes these cards look the way they do. There is no `justify` value for `font.align`, so it lives in each tip scene's css against the layer's `data.attrs.id` and the line divs a text layer emits: ```css #brand-body [data-part="line"] { text-align-last: justify } #brand-body [data-part="line"]:last-child { text-align-last: left } ``` Justification is only as good as the lines it is given, and three rules keep it from tearing open. Each is here because the first pass broke it. **Every block gets its own column.** A justified line stretches to fill its column, so a heading and a body sharing one is the worst thing you can do to them: the heading is much bigger type, so its lines are far shorter in characters, and a twelve-character heading line asked to fill a column cut for a twenty-six-character body line opens a 40% gap. The capture sizes the two separately — its `trends` heading sets to 119px inside a body column of 140 — so each block is drawn to its own longest line and the card takes the widest. Both start at the same left margin, so the columns simply end at different places. **A block under three lines sets flush.** The last line of a justified block is always flush, so a two-line block has exactly ONE justified line and nothing to even it against — it just stretches to whatever the other line happened to measure. That is what put a 31% gap inside `Provide great · customer service`. The `brand`, `content` and `service` headings are flush left for this reason; `trends`, at three lines, justifies. **The last line is the shortest.** The column is sized to the longest line in the block, including the flush one — so a block that runs downhill (26, 23, 21 characters) makes its later lines stretch to reach the first, and one whose longest line is LAST stretches every line above it for nothing. Written the other way the gaps stay small: no justified line in the file now stretches more than 21%, and most are between 5% and 13%. Leading is looser than the capture's on the tip cards. It sets its heading at 18.2px pitch on 17.85px type — 1.02, tighter than the face's own content area, so the lines very nearly touch. That is faithful and it reads badly, so the heading is at 1.18 and the body at 1.44 against a measured 1.37, with the gap between them opened from 13px to 19px. ## Where the numbers came from The capture is 388x682. Cap heights read off type that small under-report by about a tenth, so no size here was read that way. Each is a least-squares fit over the lines the design did NOT justify — the only lines whose ink width is the face's own — solving for the px size at which real Roboto Condensed reproduces them: the tip heading fits `TRENDS` / `CONTENT` / `CUSTOMER SERVICE` / `BUILD A BRAND` to within 1.4%, and the tip body fits four closing body lines to within 2.3%. Leading is then the measured baseline pitch over that size. Every text box is CENTRED on its measured ink block (`alignY: middle`). All-caps ink sits within 1.5% of an em of its line box's centre, so that lands the type where the capture has it without leaning on the face's vertical metrics. ## The three renditions The whole design is expressed in the capture's own pixels, and a ratio is authored by choosing ONE number: how many canvas pixels a capture pixel is worth. `9:16` and `1:1` share the portrait canvas width so they share the scale and differ only in where the cards sit; `16:9` takes 7% more, which is what turns a plate that is 76% of a portrait frame into one that is 46% of a landscape frame — a card rather than a banner. `9:16` keeps the capture's own placements. `1:1` and `16:9` put the tip cards in the frame corners on a margin and centre the big ones. ## The palette Six roles: three card tones (`plate`, `plate-alt`, `plate-pause`), the headline `ink`, the `copy` everything else is set in, and the `ground` the photography covers. Eight variants, which is the format's maximum — Indigo Citrus is the authored one, then Ink & Ember, Forest Chalk, Plum Rose, Cobalt Lime, Oxblood Sand, Teal Amber and Slate Violet. The eight split in half, on purpose: **Four are single-hue.** Indigo Citrus, Ink & Ember, Forest Chalk and Plum Rose hold all three card tones within about ten degrees of each other, so the cards change weight across the reel rather than colour. Indigo Citrus is the authored one and is the capture's own indigo. **Four run a complementary PAIR** — and a pair, not a trio. Cobalt Lime is cobalt against rust (168 degrees), Oxblood Sand a true 180 (oxblood against teal), Teal Amber teal against magenta (135), Slate Violet violet against old gold (160). In each of them `plate-pause` is a deeper shade of `plate` rather than a third hue, so the reel shows TWO colours and the pauses read as the quiet end of the first one. Three separate hues on eight cards is a lot of colour for one reel; two plus a shade is the same idea without the noise. One rule constrains all eight: **every card tone stays dark, and inside one value band.** A single `ink` role has to carry on all three, so a light card would need a headline colour of its own, and a hue pair only reads as deliberate if the cards do not also jump in brightness. `ink` is also kept away from both card hues — which is why Slate Violet's headline is pale cyan rather than the yellow the other seven lean on. `ink` is always a saturated pastel and `copy` always a near-white, which is what keeps the headline distinct from the body on all eight. ## Legibility Every word sits on the opaque plate, so there is no type over photography anywhere and no scrim is needed. What has to hold is `ink` and `copy` against each of the three card tones, in every variant — 48 pairs. The worst is 5.87:1 (Oxblood Sand's headline on its teal `plate-alt`) and the best 15.39:1; none is below AA for body text, let alone for type this size. ## Filling it The photo slot is free — it is behind an opaque card, so any picture works. The four tip slots are marked `broll` because each is the scene's picture in a scene that narrates; the cover, the two interstitials and the sign-off are held, being title and pause beats. The copy slots are drawn around their own line breaks: `<br>` where the design breaks, three or more lines to a justified block, all of roughly equal length, and the shortest of them LAST — the three rules above are what keep the word gaps closed. The stand-in photographs are generic office stills; swap them for the subject before shipping anything made from this. Two of the eight currently show the same city block — the placeholder set had no eighth picture in the same tonal family, and the slots are separate files so either can be replaced on its own.