Diez is an open-source framework for creating design languages.
Diez allows you to maintain a centralized source of truth for your visual identity (a.k.a. your brand)—in a way that seamlessly integrates with any native iOS, Android, or Web codebase.
Update once, update everywhere—while embracing native platforms. Diez radically reduces the cost of delivering a consistent look & feel across your company’s apps & websites.
What's in the box?
Design Language Framework: Express platform-agnostic design languages in TypeScript, including helpers ("prefabs") for common building-blocks like colors, typography, images, shadows, and more.
These compiled packages are statically typed, self-documenting, and ready for any new or existing codebase. Distribution & versioning are supported with Carthage & Cocoapods on iOS, Gradle on Android, and npm+yarn on web.
Design file Extractors: Extract image assets and strongly typed style definitions (colors, typography, and more) from Sketch, Figma, and InVision DSM. The output of Extractors is Diez-ready TypeScript, ready to compile to native code.
Treat design files as versionable code artifacts and automate your design-to-development workflow.
Diez CLI: Generate, configure, and manage Diez projects.
You can find all of the packages in the repo here. Feel free to take a look around!
Please refer to diez.org/getting-started for installation instructions and a thorough set of getting started guides.
Target Platform Support
Diez can be extended to support any language, platform, or development environment. The native bindings included with Diez support the following targets:
The minimum deployment target for a generated iOS SDK is iOS 11.
The SDK generated by the provided Android implementation has been tested against Android Q (10).
In the provided web target implementation, we support CSS, Sass, and vanilla JS. Browser and build tooling support is very broad, and Diez web SDKs work in any modern web browser.
Questions, guides, FAQ
Also check out the website: diez.org.
The following commands are available in all subpackages, as well as in the monorepo itself. Running these commands in the monorepo will run across all subpackages.
yarn compile- compile all TypeScript to JS.
yarn watch- compile, then watch for changes.
yarn lint- lint TypeScript sources.
yarn fix- lint and automatically fix any automatically fixable lint issues found.
yarn test- run unit/integration tests.
yarn health- run tests and lint code with machine-readable outputs for CI.
Diez is published under a dual-license model in two editions: Community Edition and Enterprise Edition. This repository represents Community Edition and is licensed accordingly.
Learn more about Diez licensing here.
Diez Enterprise Edition
Diez Enterprise Edition includes the Diez DocsGen add-on — an additional compiler target that allows you to build any Diez project into up-to-the-moment design language docs. Customizable, searchable, self-hostable. Perfect for enterprise design systems.
Diez EE also comes with flexible commercial licensing if the Community Edition license doesn't meet your needs, plus availability for integration, training, and support from the Diez team.