Sentry Remotion Brand Skill

This skill ensures all Remotion-generated video content looks and feels unmistakably Sentry. Remotion builds videos as React components, so brand consistency is enforced through code — typed theme constants, reusable components, and motion patterns that match Sentry's guidelines.

Before writing any Remotion code, always scaffold a theme.ts file and follow the patterns below.

1. Color palette

Always import colors from theme.ts. Never hardcode hex values inline.

Primary colors

Secondary colors

Color ratio rule

In any given scene, target roughly: 40% Blurple, 40% Black, 20% White. Secondary colors fill in as accents — each secondary should not exceed ~18% of the visible area. Never let a secondary color dominate the composition.

Contrast rule

• White text on: Blurple, Orchid, Violet, Black ✅
• Black text on: HotPink, Yorange, Green, IWhite ✅
• Never place white text on HotPink, Yorange, or Green (insufficient contrast)
• Never place body text on a busy or low-contrast background

Gradients

Sentry uses both simple linear gradients and complex mesh gradients. The hallmark gradient is a flowing blend across the full palette — purples into pinks into yellows. Gradients are appropriate as hero backgrounds or full-bleed scene backdrops, not for small UI elements.

2. Typography

Sentry uses two typefaces. Always declare them in theme.ts.

Dammit Sans — headlines only

• Custom Sentry typeface (must be bundled with the project as a font file)
• Use for the main title of any scene — equivalent to an H1
• Always bold weight
• Sentence case (capitalize first word only — e.g., "Code breaks, fix it faster")

Rubik — everything else

• Free on Google Fonts: https://fonts.google.com/specimen/Rubik
• Subheads: Rubik Medium
• Body copy: Rubik Regular
• Buttons/labels: Rubik Medium

Typesetting scale (reference values at 1080p)

Key rules:

• Always maintain at least a 1.5× size difference between headline and body copy
• Never use more than 2 type sizes in a single scene — prefer simpler hierarchy
• Headlines and titles are always sentence case — no title case
• Keep text well away from edges — minimum clearance of ~5% of frame width on each side

3. Logo

The Sentry logo has two forms: the full logo (glyph + "SENTRY" wordmark, horizontal) and the glyph alone (for space-constrained situations like watermarks or bug-ins).

Clearspace

Always maintain clearance of at least the width of the wordmark "S" character on all sides of the logo. In Remotion, this means never position the logo within ~4-5% of the frame edge.

Approved uses in video

• White logo on Blurple, Black, or dark gradient backgrounds ✅
• Black logo on White or IWhite backgrounds ✅
• Full logo for intros, outros, title cards ✅
• Glyph alone for watermarks, lower-thirds, bug-ins ✅
• Creative / stylized glyph reinterpretations are OK for expressive content ✅

Logo don'ts (hard rules)

• Do not stretch or skew the logo
• Do not rotate or position at an angle (unless doing an approved creative reinterpretation)
• Do not recolor the logo in unapproved colors (e.g., cyan, teal, gradients on the wordmark)
• Do not apply drop shadows, glows, bevels, or other effects to the standard lockup
• Do not place the logo over busy or low-contrast backgrounds
• Do not crop the logo

In shapes (avatar/icon use)

When placing the glyph in a circle or square, shift it slightly upward from center to compensate for its triangular shape — centering on the bounding box makes it look bottom-heavy.

4. Motion & animation

Sentry motion should feel: whimsical, witty, confident.

Ease curves

Use ease-in-out curves for most animations. The preferred Bezier is: cubic-bezier(0.25, 0.1, 0.25, 1) — smooth entry and exit.

In Remotion with interpolate:

interpolate(frame, [0, 20], [0, 1], {
  easing: Easing.bezier(0.25, 0.1, 0.25, 1),
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
})

Avoid purely linear motion — it reads as robotic and off-brand.

Timing philosophy

Every transition and cut should feel intentional — not default or filler.

Effects — do this

• Grain texture overlay applied uniformly over the full video ✅
• Thin highlight lines along shape edges ✅
• Soft, natural (low-opacity) shadows ✅
• Playful motion on the Sentry glyph — it lends itself to animation ✅

Effects — never do this

• Crisp, harsh drop shadows ✗
• Large pillowy bevel/emboss effects on edges ✗
• Mixing textured (grain) shapes with flat untextured shapes in the same scene ✗ (grain should be a global overlay, not per-element)
• Overly fast or flashy animations ✗

Glyph animation

The glyph is a natural animation subject — it can bounce, draw on, morph, or react. Keep it playful and on-brand. Avoid making it feel corporate or stiff.

5. Illustration & visual style (for motion graphics)

When compositing illustration elements or designing motion graphic scenes:

• Tone: 90s Nickelodeon meets Adult Swim — humor, wit, empathy, anti-corporate energy
• Style: Dynamic perspective, surreal metaphors, retro-futurist (knobs, switches, sci-fi tech)
• People: Represent a diverse mix of developers; use exaggerated proportions for energy
• Error imagery: bugs (literal insects), alert triangles, glitch effects, broken tech, robots
• Tech props: mix modern + retro + sci-fi — avoid boring flat rectangles for laptops/phones
• Characters: "Seer" (Sentry's AI agent) is a pink pyramid with a single eye and tentacles
• Textures are organic and hand-brushed feeling — not sterile vector fills

6. Captions & accessibility

All video content with speech or essential audio must include captions.

Do:

• Use Rubik Regular or Medium for captions
• White text on a semi-transparent Blurple or Black caption bar
• Position captions in the lower third, away from key visuals
• Keep caption timing synced and readable (standard subtitle timing)
• Use plain language — write how people talk

Don't:

• Rely on auto-generated captions without review
• Place caption text over busy or low-contrast areas
• Use flashy or fast-moving caption animations
• Include essential information only in audio with no visual counterpart

7. Brand voice (for on-screen text and titles)

Sentry's voice is informative, approachable, self-aware, and genuinely fun. It's a veteran dev on the team — dry wit, not slapstick.

• Write in plain American English — avoid jargon and corporate speak
• Self-deprecating humor is on-brand; making fun of users is not (bugs are the enemy, not devs)
• Keep jokes tight — one line, punchy, move on
• Titles and headlines always use sentence case
• Instead of "good" say "not bad" — that's very Sentry

Examples of on-brand copy:

• "Code breaks, fix it faster" ✅
• "Application monitoring software considered 'not bad' by 4 million developers" ✅
• "Sentry can't fix this." (with illustration of a human problem) ✅

Off-brand copy:

• "Revolutionizing the Future of DevOps Excellence" ✗ (aspirational corporate fluff)
• "Try Sentry Today!" ✗ (bubbly exclamation energy)

8. Remotion theme.ts scaffold

Always start a Sentry Remotion project with this file:

// theme.ts — Sentry brand constants for Remotion

export const colors = {
  // Primary
  blurple: '#7553FF',
  black: '#181225',
  white: '#FFFFFF',

  // Secondary
  hotPink: '#FF45A8',
  orchid: '#A737B4',
  violet: '#36166B',
  yorange: '#FDB81B',
  green: '#92DD00',
  iWhite: '#F6F6F8',
} as const;

export const fonts = {
  headline: 'Dammit Sans', // Must be loaded via staticFile + @remotion/google-fonts or local bundle
  body: 'Rubik',           // Load via @remotion/google-fonts
} as const;

export const type = {
  eyebrow:  { fontFamily: fonts.body,     fontWeight: 500, fontSize: 16, lineHeight: 1.0,  letterSpacing: '0.1em' },
  headline: { fontFamily: fonts.headline, fontWeight: 700, fontSize: 80, lineHeight: 1.0,  letterSpacing: 0 },
  subhead:  { fontFamily: fonts.body,     fontWeight: 500, fontSize: 48, lineHeight: 1.25, letterSpacing: 0 },
  body:     { fontFamily: fonts.body,     fontWeight: 400, fontSize: 24, lineHeight: 1.5,  letterSpacing: 0 },
  button:   { fontFamily: fonts.body,     fontWeight: 500, fontSize: 24, lineHeight: 1.0,  letterSpacing: 0 },
} as const;

export const motion = {
  // Default ease for most animations
  ease: (t: number) => {
    // cubic-bezier(0.25, 0.1, 0.25, 1)
    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
  },
  // Standard durations in frames (at 30fps)
  fast: 10,    // Snappy accent moves
  normal: 20,  // Standard entrance/exit
  slow: 40,    // Deliberate storytelling beats
} as const;

// Logo clearspace: never place logo within this % of frame edge
export const logoClearspace = 0.05; // 5% of frame dimension

9. Brand compliance checklist

Before finalizing any Remotion component, verify:

Colors

• All colors imported from theme.ts — no hardcoded hex values
• Background uses Black (#181225) or Blurple (#7553FF), not pure #000 or white
• Text contrast passes: white on dark, black on bright secondary colors
• Secondary colors used as accents only — not dominating the composition

Typography

• Headlines use Dammit Sans (bold)
• All other text uses Rubik (regular or medium)
• Headline is at least 1.5× larger than body copy
• All titles/headings written in sentence case

Logo

• Logo has clearspace on all sides (≥ 5% of frame width)
• Logo color is approved (white on dark, black on light)
• Logo is not stretched, rotated, or given unapproved effects

Motion

• Animations use ease-in-out curves (not linear)
• Grain texture applied as a global overlay if used
• No harsh shadows or large bevel effects
• Edit pace matches content type (slow/storytelling, snappy/hype, clean/demo)

Captions

• Captions present if video has speech or essential audio
• Captions use Rubik with proper contrast
• Captions positioned in lower third, not covering key visuals

Voice

• On-screen copy is in sentence case
• Tone is informative, dry, and approachable — not hyped or corporate