Show evidence, decisions, and the next useful action.
Sellify brand system · 2026
A sharper system for finding what wins.
Built for the loop between market evidence, creative decisions, and paid growth. Neutral surfaces keep the work clear. Orange appears where Sellify finds a signal or asks for action.
Use orange energy at moments of focus, never as wallpaper.
Keep approvals, state, and reversibility visible.
Pixel motion studies
Three example behaviors for turning ad data into a distinctive Sellify motion language. Pixels reveal signal, resolve into a decision, and plot durability over time.
Live motion study
8px source gridSignal sweep
A directional scan makes discovery feel active without turning the whole page into motion.
Pixel resolve
Fragmented evidence converges into one recognizable decision and one clear brand moment.
Durability trail
A measured path shows an ad proving itself over time, ending in a result rather than decoration.
Viewport triggeredTransform and opacity onlyReduced motion safe
Pixel identity studies
A more expressive pixel family for identity moments. The field can carry the full logo, concentrate around the symbol, or dissolve between ink and signal without changing the core mark.
Logo resolve
Use for a launch frame, product reveal, or short brand transition. The lockup always finishes clean and undistorted.
Signal halo
A compact signature for loaders, feature moments, and focus.
Pixel edge
A branded way to open a section, mask media, or change scenes.
Keep the logo geometry untouchedLet the field move around itResolve to a calm final frame
Dithered signal field
The moving gradient-pixel field from the symbol specimen, isolated at display scale. It can sit behind the Sellify mark or another product focal point while the foreground remains calm and precise.
The field supports the icon. It never competes with it.
Pixels should emerge from ink and disappear back into it.
Use ambient motion for depth, not a constant attention grab.
Identity
The exported Figma vectors are the source of truth. The wordmark is custom geometry, not live type, and the symbol is the compact brand signature.
Primary lockup
SymbolClear space Half the symbol width on every side.
Minimum lockup 80px wide in compact navigation.
Minimum symbol 24px high in compact contexts.
Never Redraw, retype, stretch, recolor, or add glow.
Color and light
Neutral white carries the interface. Near-black keeps type precise. Orange marks action, selection, and system energy in controlled doses.
CanvasWarm-white page foundation
#FAF9F8SurfaceRaised working surface
#FFFFFFSignalPrimary action
#FF5900Signal inkSmall orange type
#D94B00Signal softSelected state
#FFF1E9InkPrimary type
#191511Ink mutedSecondary type
#707070LineStructure and dividers
#E6E6E4Light ruleOne source. One reason.
Orange light belongs to the selected signal or primary action. If it does not explain focus, remove it.
Typography
Host Grotesk is installed locally in upright and italic variable files from 300 through 800. Medium 500 is the title default and all general text uses deliberate negative tracking.
Aa
Host Grotesk Variable
Medium titles. Regular text. Tight, calm rhythm.
Display
52 / 0.96 / −4%Build what wins.
Heading
42 / 1.00 / −4%Build what wins.
Subheading
28 / 1.08 / −3%Build what wins.
Lead
18 / 1.50 / −2%Build what wins.
Body
16 / 1.55 / −1.5%Build what wins.
Label
13 / 1.25 / −1%Build what wins.
Controls and states
Controls are rounded and tactile, with a bright top edge, a defined lower edge, and white text on primary actions. The treatment adds depth without carrying dark-mode weight into the light interface.
Fields and statusQuiet until the moment of focus
height 48Specific labels stay visible before and after focus.
ReadyLiveDraft
Surface and blur
Blur only works when there is meaningful color and depth behind the surface. These layers use both backdrop-filter and a legible opaque fallback.
Solid
Foundation layer
Opaque and stable for dense product UI.
Raised
Working layer
Soft inner edge and a broad, quiet shadow.
Glass
Focus layer
The signal field visibly diffuses behind this panel.
16–24px backdrop blur8–14% white edge72%+ fallback opacityNone over plain black
Motion
Content arrives with a restrained lift, fade, and blur using a strong ease-out curve. Decorative movement stops under reduced motion; interactions remain immediate.
Resolve
Blur and opacity settle together.
1.2s · 0.16, 1, 0.3, 1Lift
Short vertical travel, never a slide show.
34px → 0Press
Depth compresses as the pointer commits.
1px · 140msEdge fade
Top stays fixed; desktop bottom clears at the footer.
scroll linked · pointer safeLayout and shape
The marketing frame now matches the live 88rem rail system. Content stays generous on large displays while copy maintains a controlled reading width.
Viewport
Content · 88rem / 1408px
48121624324864Voice and product language
Sellify sounds exact, useful, and governed. It names the evidence and mechanism before making a promise.
Core principle
Proof before promise.
Show what Sellify found, why it matters, and what happens next.
Concrete mechanism. Short sentence. Defensible meaning.
Generic category language with no visible mechanism.
SpyCreateLaunchImprove
Implementation and release
These rules keep the system premium when it moves from a reference page into product and landing-page code.
GroupTokenValueUse
Color
--sf-orange-500#FF5900Primary signalColor
--sf-ink-1000#FAF9F8Page foundationType
--font-host-grotesk300–800All textRadius
--sf-radius-control14pxButtons and fieldsRadius
--sf-radius-panel24pxFeature surfacesLayout
--sf-container88remContent frameMotion
--sf-ease-out0.16, 1, 0.3, 1ArrivalSurface
--sf-glass76% white + blurFocus layer