Brand guidelines · 2026

Every image begins as a pixel.

The Motivate Studios identity in one place — the mark, colour, type, the pixel graphic system, motion and every asset the website uses, with the rules for using them and the files to download.

Download the kit See the motion

Vector

Concept

Start with one pixel. Resolve to the idea.

A studio turns something imagined into something you can see. The identity does the same on every surface: shapes arrive as soft, rounded pixels and resolve into crisp vectors — the moment an idea becomes an image.

r = 0.36f = 0.361 cell
The rounded pixelOuter corners round at 0.36 × the cell. Inner corners fillet by the same amount.
  1. One grid. Every graphic is built on square cells. Nothing sits between them.
  2. One radius. Outer corners round at 0.36 × the cell and inner corners fillet by the same amount, so a cluster of cells reads as one soft object, never a staircase.
  3. One colour per layer. Graphics are single-colour vectors. Colour comes from the palette and is applied per layer.
  4. Resolve, don't decorate. Pixels are there to become something — the mark, a globe, a word. Don't scatter them as texture.
248163272Vector
From 1 to 72 cells across, then the vector.

Colour

Ink, ground and one blue.

The palette is small on purpose. Navy ink on a cool paper ground carries almost everything; azure is the one colour that means Motivate. Violet and cyan only ever appear as light — inside the liquid hero and the glow of the orb.

Ink

Ground

Azure

Light accents

Click a swatch to copy its HEX.

Proportion

Pairs that pass

Contrast ratios for text, measured to WCAG 2.2. AA needs 4.5:1 for text, 3:1 for large type.

Aa กInk 900 on Ground · 16.4:1 · AAA
Aa กWhite on Ink 900 · 18.3:1 · AAA
Aa กInk 500 on Ground · 7.0:1 · AA
Aa กAzure 600 on Ground · 5.1:1 · AA
Aa กWhite on Azure 600 · 5.6:1 · AA
Aa กWhite on Azure 500 · 4.3:1 · AA large
Aa กAzure 300 on Ink 900 · 7.4:1 · AAA
Aa กInk 900 on Azure 100 · 14.4:1 · AAA

Dark theme

After dark the website flips to a navy world. The roles stay the same; the values lift to stay legible.

Ground#070E1D
Ground lift#0D1A33
Ink 900#E9F0FB
Ink 500#A4B6D4
Azure 600#7FB2FF
Azure 500#5C9BFF
Azure 100#17325E

CMYK values are converted for coated paper (FOGRA39). Azure is brighter on screen than process ink can print — for merchandise and signage, match it on a printed proof.

Typography

Four families, two jobs, two scripts.

Sora sets English headlines and Inter Tight sets English text. Chakra Petch and IBM Plex Sans Thai do the same two jobs in Thai. The font stacks are ordered so a Thai character inside an English line falls through to its Thai partner on its own.

Sora

English headings · display, titles, numbers, the wordmark

200 · 300 · 400 · 500 · 600 · 700SIL OFL 1.1

Google Fonts

Inter Tight

English text · leads, body, captions, buttons

300 · 400 · 500 · 600SIL OFL 1.1

Google Fonts

Chakra Petch

Thai headings · display, titles — and CREW on the tee

300 · 400 · 500 · 600 · 700SIL OFL 1.1

Google Fonts

IBM Plex Sans Thai

Thai text · leads, body, captions

300 · 400 · 500 · 600SIL OFL 1.1

Google Fonts

Kanit ExtraBold

The logo's reference face · only for type that must match the mark

800SIL OFL 1.1

Google Fonts

The type scale

Sizes are fluid: each style grows with the screen between the two values shown.

  • DisplaySora 300 · 41.6–86.4 px · 0.98

    A studio, where your imaginary begins.

  • Heading 1Sora 300 · 33.6–56 px · 1.06

    A studio, where your imaginary begins.

  • Heading 2Sora 400 · 24.8–36 px · 1.14

    A studio, where your imaginary begins.

  • Heading 3Sora 500 · 17.6–21.6 px · 1.28

    A studio, where your imaginary begins.

  • LeadInter Tight 300 · 16.3–19.2 px · 1.62

    One studio, every step. VFX, film, branding, influencer and live production under one roof in Bangkok.

  • BodyInter Tight 400 · 16 px · 1.68

    One studio, every step. VFX, film, branding, influencer and live production under one roof in Bangkok.

  • CaptionInter Tight 500 · 13 px · +0.04em · caps

    A studio, where your imaginary begins.

Setting Thai

  • Open the leading: Thai needs 1.22–1.44 on headings and about 1.8 on text, where Latin runs at 1.0–1.6.
  • Never track Thai tighter than zero — the tone marks collide.
  • Uppercase and wide tracking are for Latin captions only.
  • Keep English names in English inside Thai lines — the stack sets them in Sora or Inter Tight.

Graphic system

The pixel kit.

Seventy-six single-colour vector graphics built on the rounded pixel: floors and fields for backgrounds, broadcast furniture for live shows, icons, patterns, pixel objects and dot-matrix type. Each one downloads as SVG, and as PNG in the colour you pick.

Composing with the kit

  • One hero graphic per layout, with two small ones at most.
  • Align graphics to the layout grid — edges on columns, never floating.
  • Fields and floors may bleed off the frame; objects and icons stay whole.
  • One colour per graphic: ink or azure on ground, white on ink or azure.
  • Scale by whole cells so the rounded corners stay true.

Motion

Resolve in. Resolve out.

Motion follows the same idea: things arrive as pixels and settle into place — quick at the start, soft at the end. Every clip below comes as a transparent ProRes 4444 master for editing and a small WebM with alpha for the web and OBS.

Ease outcubic-bezier(.16, 1, .3, 1)Entrances, settles, anything arriving
Ease in-outcubic-bezier(.65, 0, .35, 1)Moves and transitions
Snap6 f · 200 msIcons, badges, small UI
Move12 f · 400 msPanels, plates, the lockup settling
Settle27 f · 900 msText reveals, big entrances
1920 × 108030 fpsProRes 4444 with alpha, BT.709
timeprogress
Ease out--ease-out
timeprogress
Ease in-out--ease-in-out

Logo

3.2 s
Logo sting · whitePixels resolve into the mark, then the name rises in. 3.2 s.WebM · 727 KB
3.2 s
Logo sting · inkFor light footage and white end cards.WebM · 654 KB
2.5 s
Logo outro · whiteThe lockup folds back into one pixel. 2.5 s.WebM · 138 KB
2.5 s
Logo outro · inkFor light footage.WebM · 96 KB

Transitions

1.0 s
Pixel wipe · azureCells grow across the frame. Cut on frame 15.WebM · 626 KB
1.0 s
Pixel wipe · inkCut on frame 15.WebM · 564 KB
1.2 s
Checker flip · azureColumns flip into a checkerboard. Cut on frame 18.WebM · 194 KB
1.2 s
Checker flip · inkCut on frame 18.WebM · 182 KB
1.2 s
Ring iris · azureRings close in, then open. Cut on frame 18.WebM · 114 KB
1.2 s
Ring iris · inkCut on frame 18.WebM · 118 KB
1.0 s
Tick sweep · azureA ragged edge of ticks sweeps left to right. Cut on frame 15.WebM · 97 KB
1.0 s
Tick sweep · inkCut on frame 15.WebM · 86 KB

Broadcast graphics

5.0 s
Lower third · EnglishName and role plates. In by 0.9 s, out from 4.25 s.WebM · 42 KB
5.0 s
Lower third · ThaiName in Chakra Petch, role in IBM Plex Sans Thai.WebM · 43 KB
5.0 s
Lower third · blankThe plates alone — set your own text on top.WebM · 27 KB
2.0 s · loop
LIVE badgeSeamless 2 s loop, top right inside title safe.WebM · 18 KB
6.0 s
CountdownDot-matrix 00:05 to 00:00, with a flash on zero.WebM · 242 KB
2.0 s
Frame cornersCorners and a crosshair snap in, then hold.WebM · 73 KB

Loops

4.0 s · loop
Pixel globeRe-quantised every frame, so the pixels really turn.WebM · 101 KB
3.0 s · loop
Ring vortexAn endless zoom through the rings.WebM · 1.9 MB
2.0 s · loop
Checker floorThe floor scrolls toward the camera.WebM · 825 KB
3.0 s · loop
Halftone waveA wave passing through the dot field.WebM · 7.5 MB
2.0 s · loop
Tick rainDashes fall on a fixed rhythm.WebM · 1.1 MB
2.0 s · loop
SparkleThe four-point star breathes and turns.WebM · 273 KB
6.0 s · loop
SunburstRays turn slowly around a clear centre.WebM · 4.7 MB
4.0 s · loop
Wave linesThirty lines ripple in phase.WebM · 5.6 MB

Using the clips

  • Transitions cover the whole frame on their middle frame — put your cut there.
  • Loops are seamless. Set them to loop in your editor, or tick Loop on an OBS media source.
  • White masters recolour cleanly with Fill (After Effects) or Tint (Premiere Pro). Stay inside the palette.
  • In OBS, add lower thirds and badges as a Media Source — the WebM keeps its alpha. Add a transition as a Stinger with its transition point at half its length.
  • ProRes 4444 masters open in Premiere Pro, After Effects, Final Cut Pro and DaVinci Resolve with the alpha intact.

Don't

  • Don't slow, speed-ramp or reverse the logo sting.
  • Don't add glow, motion blur, bevels or drop shadows.
  • Don't mix transition styles in one piece — pick one per video.
  • Don't loop the sting or run it under text.

Website

The site's own motion, running live.

Everything that moves on the website, running below with the exact CSS and JavaScript that ship on the site. Replay any of them, copy the timing, or download the code and the recordings.

Page transition380 ms + 460 ms · --ease-out

One continuous sweep, left to right: it covers the page on the way out and keeps travelling on the way in.

A studio, where your imaginary begins.

One studio, every step. VFX, film, branding, influencer and live production under one roof in Bangkok.

Reveal900 ms · 28 px · blur 5 px · +80 ms

Content rises, fades in and sharpens as it enters the screen.

  • 500+Videos delivered
  • 9M+Combined creator reach
Count-up1600 ms · ease-out cubic

Numbers count from zero the first time they come into view.

Liquid glasssheen 7 s linear · 2.4 s hover

Frosted panels with a slow sheen, and a highlight that follows the pointer.

Orbrings 6 s · 2 × offset 3 s

A soft sphere of light that sends out signal rings.

Liquid heroWebGL · 40 s + 63.7 s

A light field drawn in WebGL behind the home hero. Two drifts that never line up, so it never visibly repeats.

  1. Brief
  2. Production
  3. Report
Pipeline pulse1.9 s · --ease-out

The active stage of the process sends out a ring.

Signal wave3.2 s linear

A pulse runs along the stat card's waveform.

Motivate StudiosBrand · 2026
Work tilehover · 900 ms · scale 1.05

Hover a project: it lifts, the image leans in and light sweeps across.

Marquee64 s / 78 s linear

Rows drift in opposite directions and pause under the pointer.

Tokens

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 180ms;  --t-mid: 420ms;  --t-slow: 900ms;
  --r-sm: 14px; --r-md: 22px; --r-lg: 32px; --r-xl: 44px;
  --glass-blur: 26px;
}

The site respects reduced motion: with that system setting on, everything above appears without moving.

Recordings

The same animations recorded frame by frame from the site, for edits and presentations.

Page transitionThe glass sweep between pages.WebM · 21 KB
Text revealRise, fade and sharpen, 80 ms apart.WebM · 696 KB
Stat cardCount-up on liquid glass with the signal wave.WebM · 119 KB
OrbThe glow and its signal rings, 6 s loop.WebM · 105 KB
Glass panelThe ambient sheen, 7 s loop.WebM · 103 KB
Pipeline pulseThe active stage ring, 1.9 s loop.WebM · 54 KB
Liquid hero · lightThe home hero background, 40 s seamless loop.
Liquid hero · darkAs the site draws it in dark theme.

Merch & mockups

On a shirt, a mug and a desk.

The crew tee is real — the photos below are the actual shirt, with the back print reset in Chakra Petch. The 3D models turn in your browser and download as GLB for Blender, three.js and Figma plugins, or an AR preview on Android.

Drag to turn · scroll to zoom

GLBPNG still

The real thing

Flat lay — the back print in white.
CREW in Chakra Petch Bold, 280 mm wide.
Print detail.
Front — the MS mark on the left chest.
The mark, 90 mm wide.
Colourway study — on azure.

Tee print spec · size L

Back
CREW · Chakra Petch Bold, tracking +60 · 280 mm wide · 110 mm below the collar seam
Front
MS mark · 90 mm wide · left chest, 58 mm off centre, 150 mm below the high point of the shoulder
Colour
White print on ink or black shirts; ink print on light shirts.
Files
print-back-crew and print-front-ms as SVG, PDF and EPS at actual size, plus a tech pack.

Do & don't

Keep it simple. Keep it ours.

The quickest checks before anything goes out.

Ink mark on a light ground
White mark on ink or azure
Give it room — X on every side
A plate under the mark on busy images
Don't stretch or squash
Don't rotate
Don't recolour outside the palette
Don't add shadows, glows or gradients
Don't outline the mark
Don't crowd it
Don't retype the wordmark in another font
Don't scatter pixels as confetti

Always

  • Start from the files on this page, never a screenshot.
  • Use one blue — Azure 500 — and let ink and ground do the rest.
  • Set English in Sora and Inter Tight, Thai in Chakra Petch and IBM Plex Sans Thai.
  • Keep motion quick in and soft out.

Never

  • Never redraw, re-space or recolour the mark.
  • Never use violet or cyan as a flat colour for type or shapes.
  • Never put client logos in brand materials without permission.
  • Never stretch video or graphics to fit — crop instead.

Downloads

Every file, ready to use.

Vectors for design, PNGs for slides, transparent video for edit and live, 3D for mockups, and the website's own code.

Logo kitThe mark, four lockups and the pixel marks in ink, white, azure and black.SVG · PDF · EPS · AI · PNG · JPG · 5.3 MB
Download Link coming soon — ask the studio.
Pixel kit · vectorAll 76 graphics as editable vectors for Illustrator, Figma and InDesign.SVG · PDF · EPS · AI · 8.3 MB
Download Link coming soon — ask the studio.
Pixel kit · PNGAll 76 graphics, 2400 px wide, in ink, white and azure on transparent.PNG · 20.7 MB
Download Link coming soon — ask the studio.
Motion pack · WebMEvery clip with alpha, small enough for the web, OBS and vMix.WebM VP9 + alpha · 28.0 MB
Download Link coming soon — ask the studio.
Motion pack · ProRes 4444The masters for Premiere Pro, After Effects, Final Cut Pro and DaVinci Resolve, shared through Google Drive.MOV · ProRes 4444 + alpha
Download Link coming soon — ask the studio.
Website kitTokens as CSS and JSON, motion.js, liquid.js, the keyframes, and recordings of every web animation.CSS · JSON · JS · WebM · MP4 · 2.1 MB
Download Link coming soon — ask the studio.
FontsSora, Inter Tight, Chakra Petch, IBM Plex Sans Thai and Kanit, with their licences.TTF · SIL OFL 1.1 · 1.2 MB
Download Link coming soon — ask the studio.
Merch print filesThe tee's front and back prints at actual size, and the tech pack.SVG · PDF · EPS · PNG 300 dpi · 1.9 MB
Download Link coming soon — ask the studio.
Mockups & 3DPhoto mockups, transparent product stills and the 3D models.JPG · PNG · GLB · 12.0 MB
Download Link coming soon — ask the studio.

Fonts are free under the SIL Open Font License. Client logos on the website belong to their owners and are not part of this kit.

Questions about the brand?