Atomic Tessellator: Building Towards Material Modeling

Atomic Tessellator logo
Atomic Tessellator logo
Atomic Tessellator logo

Team

Jader, Tania, Omar

Industry

Science

Year

2025

Services

Website, Brand Identity & Visual System

Atomic Tessellator is pioneering a multiscale materials design platform, enabling researchers to simulate the combination of different atoms to create and test materials. When they approached us, they possessed an incredible product but lacked a brand identity and web presence to match its sophistication. 

We aimed for a scientific approach, creating and testing different materials to develop a world-class brand that could articulate their complex value proposition with clarity and confidence. We established a unique visual language that embedded scientific authenticity directly into the brand experience.

Prototyping for the future

Early in the process, we explored different materials to convey a modern approach. Some of the materials included metal, glass, liquids, and even rare crystals. The website's design incorporated these material inspirations, utilizing neutral theme colors for both light and dark modes.

Prototyping was fun for the team as we identified different scenarios that tools like Spline (for 3D objects), Unicorn (for WebGL graphics) and vibe coding for p5js prototypes were perfect for exploring different ways to achieve a high-end design.

Early in the process, we explored different materials to convey a modern approach. Some of the materials included metal, glass, liquids, and even rare crystals. The website's design incorporated these material inspirations, utilizing neutral theme colors for both light and dark modes.

Prototyping was fun for the team as we identified different scenarios that tools like Spline (for 3D objects), Unicorn (for WebGL graphics) and vibe coding for p5js prototypes were perfect for exploring different ways to achieve a high-end design.

Early in the process, we explored different materials to convey a modern approach. Some of the materials included metal, glass, liquids, and even rare crystals. The website's design incorporated these material inspirations, utilizing neutral theme colors for both light and dark modes.

Prototyping was fun for the team as we identified different scenarios that tools like Spline (for 3D objects), Unicorn (for WebGL graphics) and vibe coding for p5js prototypes were perfect for exploring different ways to achieve a high-end design.

A brand that amplifies itself

To bring the brand's complexity to life, we leveraged dimensionality and motion. By integrating an existing 3D model of the amplituhedro (a fascinating 4D figure in science), we created a dynamic web presence where the icon rotates on its axis, ceasing on hover to invite user interaction. 

Authenticity was further added by placing an interactive heatmap—a powerful visualization derived from real crystallographic data—in a single, high-impact section of the site. This focused approach, combined with color centered on a vibrant yellow accent for dark mode, ensures the brand's visual identity is not only striking but is also genuinely rooted in the science it represents.

To bring the brand's complexity to life, we leveraged dimensionality and motion. By integrating an existing 3D model of the amplituhedro (a fascinating 4D figure in science), we created a dynamic web presence where the icon rotates on its axis, ceasing on hover to invite user interaction. 

Authenticity was further added by placing an interactive heatmap—a powerful visualization derived from real crystallographic data—in a single, high-impact section of the site. This focused approach, combined with color centered on a vibrant yellow accent for dark mode, ensures the brand's visual identity is not only striking but is also genuinely rooted in the science it represents.

To bring the brand's complexity to life, we leveraged dimensionality and motion. By integrating an existing 3D model of the amplituhedro (a fascinating 4D figure in science), we created a dynamic web presence where the icon rotates on its axis, ceasing on hover to invite user interaction. 

Authenticity was further added by placing an interactive heatmap—a powerful visualization derived from real crystallographic data—in a single, high-impact section of the site. This focused approach, combined with color centered on a vibrant yellow accent for dark mode, ensures the brand's visual identity is not only striking but is also genuinely rooted in the science it represents.

We had three weeks to revamp our website before an investor event. Omar, Jader, Tania and the rest of the Shortcut team pulled through and delivered a polished product with great communication. We highly recommend their services for any startup seeking a rapid, high-caliber design team!


– Daniel Lee, Operations at Atomic Tessellator

Authentic Science, Captivating Design

The result is a brand identity that translates the complexity of materials science into a captivating visual language. Through a cohesive system of authentic scientific motifs, Atomic Tessellator is now equipped with a brand that positions it as an accessible and forward-thinking leader in its field.

take

the

shortcut.

2025 · Toma el Atajo, S.A.P.I. DE C.V.

take

the shortcut.

2025 · Toma el Atajo, S.A.P.I. DE C.V.

take

the

shortcut.

2025 · Toma el Atajo, S.A.P.I. DE C.V.