Design.ID is an interactive web experience that lets designers build a personalised ID card: choose a character, fill in your details, sign your name, and walk away with something that actually feels like yours.

It was built entirely through Omma by Spline for the 2026 Buildathon.

Every screen, every interaction, every piece of logic was generated through natural language prompts. No manual coding. No imported frameworks. Just a clear idea and a lot of iteration.

The challenge wasn't just to build something that worked. It was to build something that felt considered at every step: from the first particle on Screen 1 to the metallic reflection on the final card.

The concept in one sentence: a creative ID card generator for designers that lives on social media, feels personal, and works beautifully on every device.

Designers spend enormous energy curating how they present their work. Portfolios get obsessed over. Linkedin profiles get rewritten. But there's no equivalent for something quick, shareable, and genuinely personal: something you'd actually want to drop in an X thread or pin to your Contra profile.

Design.ID is that thing. It pulls from the visual language of official documents: security line textures, barcodes, metallic elements and strips it back into something graphic and intentional.

Black and white, flat illustration characters, clean typography.

A document that looks like it was designed, because it was.

Visual System: An "Illustrator-Heavy-Black" aesthetic utilizing official document language (barcodes, security textures, and metallic gradients).

32 Hand-Crafted Characters: Diverse, flat-illustration styles allowing for true user personalization.

Interactive Physics: A particle-based wordmark that assembles on load and a 3D card tilt that physically responds to cursor or touch movement.

Systemized Logic: Managed 32 character states and a drawable signature canvas that renders directly onto the final export.

Responsiveness was a first concern, not an afterthought. Design.ID was built to be shared on social media, which means it needed to work beautifully on the device most people would use to open it - their phone.

Screen 2 on desktop holds everything simultaneously. The character selector is on the left, the form is on the right, the selected character fills the centre. Three panels in one view because there's space to support it.

3 screens total

Character selector and form on the same screen

Download button exports JPEG directly

Mouse hover drives the card tilt

On mobile that same layout would have been cramped and rushed. So Screen 2 became two screens. One for choosing your character, one for filling in your details. Same content, same flow, more room to breathe.

4 screens total

Character selection and form on its own screen

Share button opens native share sheet

Touch drives the card tilt

The project was built through Omma's prompt-based system: conversational iteration, screen by screen, detail by detail. Here's an honest account of how it actually came together.

Wireframe and systems first: All three screens were fully designed in Figma before a single prompt was written.

The particle wordmark took the most iteration: Getting the dot animation right (the right density, the right entrance duration, the right repulsion radius on hover) took the most back and forth of any single element.

The character generation was born through adaptaion.: The original concept called for a real-time 3D character builder. That wasn't achievable within the tools and timeline available.

The card tilt was worth every iteration: The 3D tilt with real metallic reflections was non-negotiable from the beginning

Safari was the hardest technical problem: Getting mobile right was a first priority and it required the most work. The keyboard on Screen 3 caused the viewport to shift and not recover on navigation.

The offscreen canvas renderer was rebuilt multiple times: The export function required multiple rebuilds to achieve a clean JPEG output.

Winning the Best Design Award was the result of engineering a product specifically to meet the high technical and creative standards set by Omma by Spline and Contra. Design.ID was evaluated against a strict 100-point rubric designed to reward production-ready quality.

Quality & Functionality (25%)

Innovation & Creativity (25%)

UX & Design (20%)

Use of Omma Features (15%)

Community Engagement (10%)

Publish Readiness (5%)

Design.ID was built on the belief that high-fidelity 3D should not be a "heavy" addition to a site, but a core part of its functional utility.

By prioritizing a data-driven system over a static scene, the project demonstrates how 3D can handle complex personalization at scale.

This project is proof that with tools like Omma by Spline, the gap between a design concept and a fully functional, award-winning product has never been smaller.