--- title: Build interfaces, optimistically. | daily.dev description: Optimistic is a headless, token-driven design system built by a single designer using AI assistance. It includes 58 production-ready components, three token... canonical: https://daily.dev/posts/build-interfaces-optimistically--0baqmqb4s twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Build interfaces, optimistically. | daily.dev og:description: Optimistic is a headless, token-driven design system built by a single designer using AI assistance. It includes 58 production-ready components, three token... og:url: https://daily.dev/posts/build-interfaces-optimistically--0baqmqb4s og:image: https://api.daily.dev/og/posts/0BaqMqB4S.png og:image:alt: Build interfaces, optimistically. og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Build interfaces, optimistically. **[Medium](https://daily.dev/sources/medium_js)** · 5 min read · 1 upvotes · 0 comments ## Summary Optimistic is a headless, token-driven design system built by a single designer using AI assistance. It includes 58 production-ready components, three token tiers (core, semantic, theme), and 67 documented pages. The system is framework-agnostic (React, Angular, plain HTML), free to use, and open source — components are copied directly into your repo rather than hidden behind a dependency. The project serves as a proof-of-concept that design organizations can move 2–3x faster with AI, and that a single designer can produce what normally requires a funded engineering team. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What is a headless, token-driven design system and how does the three-tier token structure work? A headless design system separates structure, behaviour, and accessibility from visual branding, letting skins plug in without splitting into separate systems. The three-tier token model works as core, semantic, and theme tiers: a component never references a hex value directly, it requests a role, the role maps to a ramp, and the ramp maps to one value, so re-pointing a ramp re-skins the entire system at once. _daily.dev surfaces practical design system architecture for teams weighing token-based theming approaches._ ### Is there a free, open source design system with 58 components that works across React, Angular, and plain HTML? Optimistic is a free, open source design system with 58 production components and 67 documented pages, built to work across React, Angular, or plain HTML since its token contract is framework-agnostic. Components are copied directly into a project's repository rather than installed as a dependency, so there is no lock-in, no black box, and no hidden subscription. Source is public on GitHub. _Developers comparing framework-agnostic design systems can track releases like this one on daily.dev._ ## Similar posts on daily.dev - [Design Systems, Tokens and AI](https://daily.dev/posts/design-systems-tokens-and-ai-ywsx6j0z6) · Telerik · 0 upvotes · 0 comments - [AI Design Systems: How to Build for Automation, Not Just Aesthetics](https://daily.dev/posts/ai-design-systems-how-to-build-for-automation-not-just-aesthetics-rfpcmkjoy) · Netguru · 0 upvotes · 0 comments - [From Prompt to Production: A Guide to AI-Generated Design Systems](https://daily.dev/posts/from-prompt-to-production-a-guide-to-ai-generated-design-systems-aj3jwlbd9) · The New Stack · 5 upvotes · 0 comments - [AI makes design system guardrails mandatory; this framework delivers them—Martian Chronicles, Evil Martians’ team blog](https://daily.dev/posts/ai-makes-design-system-guardrails-mandatory-this-framework-delivers-them-martian-chronicles-evil-m-mgzf8vfre) · Martian Chronicles · 0 upvotes · 1 comments - [Design Systems for AI Agents: How to Make Yours Agent-Ready](https://daily.dev/posts/design-systems-for-ai-agents-how-to-make-yours-agent-ready-stcywhhbg) · Headway · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#ui-design](https://daily.dev/tags/ui-design), [#ai-coding](https://daily.dev/tags/ai-coding) [View this post on daily.dev](https://daily.dev/posts/build-interfaces-optimistically--0baqmqb4s) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Build interfaces, optimistically.","url":"https://daily.dev/posts/build-interfaces-optimistically--0baqmqb4s","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/build-interfaces-optimistically--0baqmqb4s"},"datePublished":"2026-07-27T07:33:42.203Z","dateModified":"2026-09-14T08:58:34.538Z","description":"Optimistic is a headless, token-driven design system built by a single designer using AI assistance. It includes 58 production-ready components, three token...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/90d488af84af3cbb3844f5e0c3eaca71?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/90d488af84af3cbb3844f5e0c3eaca71?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Medium","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Medium","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/medium","url":"https://daily.dev/sources/medium_js"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/build-interfaces-optimistically--0baqmqb4s","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,ui-design,ai-coding","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Medium","item":"https://daily.dev/sources/medium_js"},{"@type":"ListItem","position":3,"name":"Build interfaces, optimistically."}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/build-interfaces-optimistically--0baqmqb4s#faq","mainEntity":[{"@type":"Question","name":"What is a headless, token-driven design system and how does the three-tier token structure work?","acceptedAnswer":{"@type":"Answer","text":"A headless design system separates structure, behaviour, and accessibility from visual branding, letting skins plug in without splitting into separate systems. The three-tier token model works as core, semantic, and theme tiers: a component never references a hex value directly, it requests a role, the role maps to a ramp, and the ramp maps to one value, so re-pointing a ramp re-skins the entire system at once. daily.dev surfaces practical design system architecture for teams weighing token-based theming approaches."}},{"@type":"Question","name":"Is there a free, open source design system with 58 components that works across React, Angular, and plain HTML?","acceptedAnswer":{"@type":"Answer","text":"Optimistic is a free, open source design system with 58 production components and 67 documented pages, built to work across React, Angular, or plain HTML since its token contract is framework-agnostic. Components are copied directly into a project's repository rather than installed as a dependency, so there is no lock-in, no black box, and no hidden subscription. Source is public on GitHub. Developers comparing framework-agnostic design systems can track releases like this one on daily.dev."}}]} ```