A brand built like
an animation rig.
One mark, four colors, two easings — a small system applied consistently everywhere the studio shows up. This page documents it.
01 · Logo
The ember mark
The mark is a rising ember — also readable as a play cursor and a keyframe diamond mid-flight. It is drawn on a 32-unit grid from two triangles, so it stays crisp from a favicon to a title card.
02 · Color
Ember on ink
- Ember
#FF6B35· Primary accent, CTAs, highlights
- Spark
#FFD166· Gradient partner, small accents
- Ink
#0C0D12· Background, the "screen off" black
- Paper
#EEF0F6· Text on dark, light surfaces
Accent-on-ink combinations meet WCAG AA for text contrast; Ember shifts to #E2551F on light backgrounds to hold contrast.
03 · Typography
System stack, deliberate scale
The site uses the native system stack — zero font downloads, instant paint, no layout shift. Character comes from weight, tracking, and a strict scale instead of a webfont bill.
04 · Motion
Motion principles
An animation studio's brand moves. Two named easings cover every transition on this site — and everything respects prefers-reduced-motion.
Standard
cubic-bezier(0.16, 1, 0.3, 1)
Reveals, hovers, everything ambient. Fast start, long settle.
Emphasis
cubic-bezier(0.34, 1.56, 0.64, 1)
Confirmations and arrivals. A 6% overshoot reads as confidence.
Never linear
linear — banned for UI
Reserved for marquees and progress only. Compare how mechanical it feels.
Want a brand system like this?
Logo, palette, type, and motion — documented so your whole team can apply it.
hello@emberframe.example