Raster
A Swiss Design fintech site.
Raster is a landing site for a multi-currency business account, in the Swiss Design (International Typographic) style: warm paper, ink and one signal orange used as flat blocks and circles; one neo-grotesk (Public Sans) at poster sizes; a strict 12-column grid held asymmetrically; 1px rules, captions and index numbers on every block. The sample company, Saldo, and every balance, rate, fee and plan are invented sample content. The rates are not live.
- For
- Fintech
- Built with
- HTML, CSS, ES modules, Motion 14.6.0, anime.js 4.5.0 (no build step)
- Pages
- 3 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
Fig. 1, a poster of four flat circles sized by each currency balance: a working converter draws a dashed ring where money will land, then one circle shrinks and another swells on a spring while the figures count.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): a first screen with the headline set in three lines, a working converter (amount, currencies, the rate, the fee, the amount that arrives, an error state) and Fig. 1, a poster of four flat circles sized by each sample balance in francs, with a legend of balances and shares; four local accounts as giant currency codes with caption rows; today's rates as a typographic table with thirty-day lines; a position statement beside a black and white photo; five numbered features beside a statement view with a working currency filter (and an empty state); pricing as one comparison table with the middle plan in orange; an orange sign-up band with validation; a black footer with a giant wordmark. - Rates (
rates.html): pair switcher, a thirty-day line chart with axes and the latest close, buy, sell and range figures, all pairs, and a rate-alert form with error and confirmation states. - 404 (
404.html). - Light and dark themes (follows the system, with a toggle that remembers the choice), phone to desktop.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Rates
- 404
Stack
- HTML
- CSS
- ES modules
- Motion 14.6.0
- anime.js 4.5.0 (no build step)
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
