A page made of tiles
Tessellate
Tessellate treats the page as a grid rather than a scroll of bands. Each section becomes a tile with its own surface, and tiles of different sizes sit next to each other: a tall hero beside two small facts, a gallery beside a quote, a list beside a form. It suits businesses with many short things to say, because visitors can take in several of them at once.
01 / Character
How Tessellate looks and reads
- Sections arranged as tiles of different widths, paired automatically so rows stay full
- A floating, rounded header that stays in reach while visitors scroll
- Porcelain, Terracotta and Nocturne palettes, from pale ceramic to dark
- Serif figures and quotations set against a clean sans for headings and text
How the page flows
Tessellate places sections two to a row where it can, and gives a hero, gallery or call to action the full width. A hero followed by two short sections becomes a tall tile with the pair stacked beside it. On tablets the tiles pair in two columns, and on phones they stack into one.
02 / Fit
Businesses that suit it
- Clinics, studios and agencies with several services
- Product and software businesses with features and figures to show
- Venues and clubs with schedules, pricing and questions
- Any site where visitors scan rather than read top to bottom
03 / Features
Features
Figures in the serif
Stats become a grid of small tiles with large serif numerals, two by two in a narrow tile and one row when wide.
Gallery as mosaic
Grid galleries tile their images in large, small and wide frames so the gallery repeats the page's own structure.
Pricing tiles
Plans sit in a row of tiles, and a plan marked with a note inverts so it stands out.
04 / Make it yours
Shape the mood around your brand
- Porcelain is the default: warm white tiles on stone-grey grout with a deep jade accent. Terracotta is warmer, and Nocturne turns the page dark.
- Each section's palette recolours its whole tile, so a few accent or contrast tiles make the mosaic lively without extra images.
- Background effects and images fill a tile to its rounded edge, which suits one or two showcase tiles per page.
05 / Every screen
Clear, comfortable, and easy to use
- Every palette pairs its surface with text and button colours checked for contrast in all three colorways.
- Tiles are placed with CSS only; the reading and keyboard order always follows the order of the sections.
- Movement is limited to small reveals and turns off when visitors prefer reduced motion.
06 / FAQ
Tessellate questions
- Do I have to arrange the tiles myself?
- No. Tessellate sizes each section by its type and pairs neighbouring sections automatically. Reordering sections changes the mosaic.
- What happens on a phone?
- Tiles stack into a single column with the same rounded surfaces, so each section keeps its character.
- Which palette does Tessellate start with?
- Porcelain. Terracotta and Nocturne keep the same mosaic with a warmer or a dark surface.