Syntion

AI Wearable Brand

& Product Visuals

Design System Impact: • Efficiency: Reduced developer handoff time by 50% through 150+ reusable Figma components with variants and auto-layout • Brand foundation: Delivered complete visual identity (logo, colours, typography, guidelines) • Scalability: Built an atomic design system enabling rapid product iteration and team growth Technical Innovation: • AI workflow: Integrated Cursor AI and MCP servers for automated Figma-to-Webflow translation, reducing build time by 40% • Webflow build: website sections and an interactive product configurator

Syntion, an AI wearable startup, needed complete brand and digital infrastructure to launch their product and attract early-stage investors. With no existing visual identity, unclear brand positioning, and a pre-launch timeline, they required scalable design foundations that could evolve rapidly with the company while communicating complex AI technology to non-technical audiences.

The core challenge was building professional brand identity and scalable design infrastructure from zero while preparing for rapid company growth. Key challenges: Brand clarity: Complex AI wearable technology needed accessible communication for investor pitches and consumer marketing without losing technical credibility Scaling preparation: Design systems needed to support rapid team growth, product expansion, and consistent brand application across unknown future touchpoints Technical learning: Required Webflow sections, custom interactions and an interactive product configurator without prior platform experience under tight deadlines Solo execution: Complete responsibility for brand strategy, design system architecture, component development, and platform implementation while maintaining CEO alignment

I implemented systematic, brand-first methodology prioritizing scalable foundations before development. This ensured consistency across touchpoints and enabled rapid iteration as business needs evolved.

Strategic approach: Foundation-first: Established a complete visual identity before development work, ensuring all digital products started from solid brand principles Atomic design: Built comprehensive Figma component library using systematic methodology, variants, and auto-layout before Webflow development AI-augmented workflow: Integrated Cursor AI, Claude Code, and MCP servers for automated design-to-code translation Iterative validation: Weekly stakeholder reviews ensuring business alignment and preventing costly rework

I designed a complete brand ecosystem to position Syntion for market launch and rapid scaling. The solution enables consistent brand application across touchpoints while supporting agile product development. Key deliverables: Brand identity: Logo suite, color palette with WCAG compliance, typography system, comprehensive guidelines Component library: 150+ Figma components with variants, auto-layout, design tokens for efficient handoff Website: Webflow sections, an interactive product configurator and a waitlist sign-up Innovation: AI-assisted workflow (Cursor AI, MCP servers) reducing implementation time 40%