Design.ID
Year: 2026
Category: Interactive Tool
Recognition: Best Design Award
Tools: Omma by Spline
Timeline: Omma Buildathon 2026 by Contra
Year: 2026
Category: Interactive Tool
Recognition: Best Design Award
Tools: Omma by Spline
Timeline: Omma Buildathon 2026 by Contra
Year: 2026
Category: Interactive Tool
Recognition: Best Design Award
Tools: Omma by Spline
Timeline: Omma Buildathon 2026 by Contra
01 Overview
01 Overview
Every designer has a portfolio, a LinkedIn, a Behance. Nobody has a creative ID. Design.ID was built to fix that.
Every designer has a portfolio, a LinkedIn, a Behance. Nobody has a creative ID. Design.ID was built to fix that.
Every designer has a portfolio, a LinkedIn, a Behance. Nobody has a creative ID. Design.ID was built to fix that.
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 hosted by Contra.
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.
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 hosted by Contra.
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.
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.
90+
Iterations before final submission
32
Hand-crafted original characters
$5k
Omma Buildathon grand prize
1st
Best Design Award
Best Design Award Recognition
02 The Idea
02 The Idea
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 into 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.
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 into 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.
"This can be an actual use case for anyone who wants to build these types of experiences."
Alejandro Leon on Design.ID
Founder, Spline
03 The Experience
03 The Experience
Three screens. One card. Nothing wasted.
Every screen has one job. The flow is linear by design: there are no dead ends, no confusion about what comes next.
Every screen has one job. The flow is linear by design: there are no dead ends, no confusion about what comes next.
SCREEN 01
Welcome
Welcome
Pure black canvas. The wordmark assembles from particles.
Pure black canvas. The wordmark assembles from particles.
SCREEN 02
Customise
Customise
Pick your character, fill your details, sign your name on the canvas.
Pick your character, fill your details, sign your name on the canvas.
SCREEN 03
Your Card
Your Card
3D ID card with metallic tilt response. Export or share.
3D ID card with metallic tilt response.
Export or share
3D ID card with metallic tilt response. Export or share.
04 The Interactions
04 The Interactions
Details that earn their place
None of the interactions in Design.ID exist for the sake of it. Each one was chosen because it adds something to the experience, either functionally or emotionally.
None of the interactions in Design.ID exist for the sake of it. Each one was chosen because it adds something to the experience, either functionally or emotionally.
Particle Wordmark
Particle Wordmark
The "Design.ID" text is made entirely of tiny dots. On load they scatter and gather to form the letters over 2-3 seconds. Touch or hover and they push away. Step back and they return. Built natively in Omma.
The "Design.ID" text is made entirely of tiny dots. On load they scatter and gather to form the letters over 2-3 seconds. Touch or hover and they push away. Step back and they return. Built natively in Omma.
3D Card Tilt
3D Card Tilt
The ID card on Screen 3 physically responds to your cursor on desktop and your touch on mobile. The metallic line at the bottom and the badge gradient both shift in real time, tracking the tilt direction like light hitting a physical surface.
The ID card on Screen 3 physically responds to your cursor on desktop and your touch on mobile. The metallic line at the bottom and the badge gradient both shift in real time, tracking the tilt direction like light hitting a physical surface.
Ghosted Badge Detail
Ghosted Badge Detail
The metallic badge in the top right corner of the card contains the selected character: rendered with maximum exposure, minimum contrast and minimum saturation.
It's only visible if you look closely.
Drawable Signature
Drawable Signature
Users sign their name directly on the card: on desktop with a mouse, on mobile with their finger. The signature is captured as a canvas drawing and rendered onto the final exported card exactly as drawn.
Users sign their name directly on the card: on desktop with a mouse, on mobile with their finger. The signature is captured as a canvas drawing and rendered onto the final exported card exactly as drawn.
Smart Export
Smart Export
On desktop the card downloads as a high-resolution JPEG, black background, Design.ID logo at the top. On mobile the same button opens the native share sheet so you can save straight to camera roll or post directly to stories.
On desktop the card downloads as a high-resolution JPEG, black background, Design.ID logo at the top. On mobile the same button opens the native share sheet so you can save straight to camera roll or post directly to stories.
Responsive by Design
Responsive by Design
Desktop and mobile don't share the same layout, they share the same logic. Screen 2 splits into two dedicated mobile screens. Interactions translate from hover to touch. Nothing is an afterthought.
Desktop and mobile don't share the same layout, they share the same logic. Screen 2 splits into two dedicated mobile screens. Interactions translate from hover to touch. Nothing is an afterthought.
05 Responsiveness
05 Responsiveness
Not adapted. Redesigned.
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.
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.
DESKTOP
Everything in one place
Everything in one place
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.
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
3 screens total
Character selector and form on the same screen
Character selector and form on the same screen
Download button exports JPEG directly
Download button exports JPEG directly
Mouse hover drives the card tilt
Mouse hover drives the card tilt
MOBILE
Each step gets its own space
Each step gets its own space
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.
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
4 screens total
Character selection and form on separate screens
Character selection and form on separate screens
Share button opens native share sheet
Share button opens native share sheet
Touch drives the card tilt
Touch drives the card tilt
06 Visual Systems
06 Visual Systems
A design language built around documents
The aesthetic reference was physical identity documents, the kind that feel official and permanent. That influenced every decision from the overall palette to the texture details.
The aesthetic reference was physical identity documents, the kind that feel official and permanent. That influenced every decision from the overall palette to the texture details.
TYPOGRAPHY
Inter throughout
Inter throughout
Labels utilize Regular, low-contrast, and tracked styles. Values are Semi-Bold, high-contrast black, and larger. This hierarchy remains consistent across all fields, screens, and final exports.
Inter at every weight. Labels are Regular, light, small and tracked. Values are Semi-Bold, black, larger. The hierarchy is the same on every field, on every screen, in the exported file.
Labels utilize Regular, low-contrast, and tracked styles. Values are Semi-Bold, high-contrast black, and larger. This hierarchy remains consistent across all fields, screens, and final exports.
COLOR
Black, white and metallic effects
Black, white and metallic effects
Screen 1 and Screen 3 are pure black. Screen 2 is a warm off-white. The card is #F4F4F2.
The metallic effect is achieved through a linear gradient.
Screen 1 and Screen 3 are pure black. Screen 2 is a warm off-white. The card is #F4F4F2.
The metallic effect is achieved through a linear gradient.
CARD TEXTURE
Document feel, not decoration
Document feel, not decoration
The card carries a diagonal security line texture, a grain overlay, a generated barcode, three rows of chevrons at the bottom and a metallic gradient line. Each detail references real ID card design.
The card carries a diagonal security line texture, a grain overlay, a generated barcode, three rows of chevrons at the bottom and a metallic gradient line. Each detail references real ID card design.
CHARACTERS
32 original illustrations
32 original illustrations
Flat, bold outline illustrations in the tradition of graphic stickers and screen-print art. Black on white, thick outlines, diverse across face shapes, hairstyles, accessories, expressions and gender presentation.
Flat, bold outline illustrations in the tradition of graphic stickers and screen-print art. Black on white, thick outlines, diverse across face shapes, hairstyles, accessories, expressions and gender presentation.
07 Process
07 Process
90 versions is not an exaggeration
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.
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.
START
Wireframe and systems first
Wireframe and systems first
All three screens were fully designed in Figma before a single prompt was written.
The visual direction, layout proportions, typography system, card details and colour palette were locked before building began.
Omma was used to bring those designs to life, not to figure out what to build.
All three screens were fully designed in Figma before a single prompt was written.
The visual direction, layout proportions, typography system, card details and colour palette were locked before building began.
Omma was used to bring those designs to life, not to figure out what to build.
SCREEN 1
Engineering the particle wordmark
Engineering the particle wordmark
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 logo mark itself is static and clean. The wordmark is the animation.
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 logo mark itself is static and clean. The wordmark is the animation.
SCREEN 2
The character generation was born through adaptation
The character generation was born through adaptation
The original concept called for a real-time 3D character builder. That wasn't achievable within the tools and timeline available.
The pivot to 32 hand-crafted flat illustrations turned out to be the better design decision: more distinctive, more consistent, more intentional.
The original concept called for a real-time 3D character builder. That wasn't achievable within the tools and timeline available.
The pivot to 32 hand-crafted flat illustrations turned out to be the better design decision: more distinctive, more consistent, more intentional.
SCREEN 3
The card tilt was worth every iteration
The card tilt was worth every iteration
The 3D tilt with real metallic reflections was non-negotiable from the beginning. Getting the light tracking, the badge gradient shift, the shadow depth and the smooth reset on mouse leave to all work together cleanly took significant iteration, but it's the moment the project feels physical.
The 3D tilt with real metallic reflections was non-negotiable from the beginning. Getting the light tracking, the badge gradient shift, the shadow depth and the smooth reset on mouse leave to all work together cleanly took significant iteration, but it's the moment the project feels physical.
MOBILE
Safari was the hardest technical problem
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 Safari browser chrome covered buttons on Screen 4. Both took longer to solve than expected, but both got solved.
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 Safari browser chrome covered buttons on Screen 4. Both took longer to solve than expected, but both got solved.
EXPORT
The offscreen canvas renderer was rebuilt multiple times
The offscreen canvas renderer was rebuilt multiple times
The export function required multiple rebuilds to achieve a clean JPEG output.
Offscreen canvas rendering caused blend modes and textures to behave differently than in the DOM, requiring intense iteration to perfect text wrapping and overall quality.
The export function required multiple rebuilds to achieve a clean JPEG output.
Offscreen canvas rendering caused blend modes and textures to behave differently than in the DOM, requiring intense iteration to perfect text wrapping and overall quality.
08 Try it
08 Try it
Make yours.
Design.ID is live and open. Pick your character, fill in your details, get your card. Best experienced on desktop, fully functional on mobile.
Design.ID is live and open. Pick your character, fill in your details, get your card. Best experienced on desktop, fully functional on mobile.
09 The Challenge
09 The Challenge
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.
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.
Evaluation Criteria
Evaluation Criteria
Quality & Functionality (25%)
Quality & Functionality (25%)
Innovation & Creativity (25%)
Innovation & Creativity (25%)
UX & Design (20%)
UX & Design (20%)
Use of Omma Features (15%)
Use of Omma Features (15%)
Community Engagement (10%)
Community Engagement (10%)
Publish Readiness (5%)
Publish Readiness (5%)
10 Final Thoughts
10 Final Thoughts
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.
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.
