Inside the Swash website design
Swash is a creative website built with custom code. Its pages are built from features, footer, hero, feature grid, product demo, gallery, pricing, and FAQ sections, shown here in full-page captures and a scroll recording. Typography: Stack Sans Headline (display text, headings, and body text). Colours: background #000000, text #E6E6E9, main buttons #24FF84, surface #0D0D10.
Make motion graphics in minutes in your browser: animated text, 41 shaders, moving backgrounds, galleries, widgets and sound. Export MP4. Free to start. Its visual style is minimal, bold, and typographic, with navigation bar, hero, and feature card among its components.
Why we picked it
A black canvas lets a tilted 3D wall of colourful posters and clips float behind huge white type, showing the range of output at a glance before you touch the tool. Further down, plain black cards with short two line headings pace out each feature so a long product page still reads in quick, even bites.
What to look for
- Features: benefits framed around what the user gets, not internal capability names
- Footer: grouped navigation with clear column headings
- Hero: a specific headline instead of a generic slogan
- Feature Grid: mixed card sizes that show priority
Questions designers ask
What fonts does Swash use?
Swash uses Stack Sans Headline for display text, headings, and body text, measured from the captured page's CSS.
What is the Swash website built with?
The Swash website is built with custom code, detected when the page was captured.
What colours does the Swash website use?
Measured from the captured page's CSS, the Swash website uses #000000 for the background, #E6E6E9 for text, #24FF84 for main buttons, and #0D0D10 for surfaces.
What sections does the Swash website have?
The Swash website includes features, footer, hero, feature grid, product demo, gallery, pricing, and FAQ sections. Each one opens on its own page, so you can compare it with the same section on other websites.
