To fulfill our Vision, we are building and maintaining Lyne, our Design System, which is and acts as our common language — our Single Source of Truth. For this purpose we use Design Tokens as our design abstractions. Those Design Tokens are consumed by Lyne Components via our Design (Token) API and are integrated within our documentation.
Lyne Design Tokens and Lyne Components are available for developer and designer(coming).
This page defines the terminology — our common vocabulary — which is used throughout Lyne Design System. We try to list just the necessary terms to get you started and to help you to have better understanding of Lyne. If you miss something important please let us know and open a new documentation issue.
We define a Component as the smallest possible functional building block. Components are reusable and can be composed to Composed Components. A Component is not a Design Token but a Component can be built based on one or multiple Design Tokens. Within the Lyne Design System a component is always represented Lyne Component — a Web Component technically speaking. An example of a Component is a button which uses different Design Tokens for it's visual representation.
A Component Browser is used to develop and preview components in isolation. Throughout the Lyne Design System we use Storybook for either developing the component or reviewing the component afterwards.
A Composed Component is an aggregation of multiple Components, either of the same Component or of different Components.
Can a Composed Component be composed out of Composed Components(inception)?
Throughout the Lyne Design System we use the term Component Library as a set of Web Components represented as Lyne Components.
☝🏾First of all the definitions for Design System(DS) vary. A Design System can be or include many things but the listed statements below define it most accurate for us:
- Systemic thinking about design (Miriam Suzanne)
- A common, shared language
- A flexible, modular and adjustable system without vendor lock-in
- Our Single Source of Truth
Check Lyne what a Design System means for us specifically and how we define and describe a Design System in more depth.
The Lyne Design System Core Team is a multidisciplinary (so far UX, Frontend) team consisting of: Marius Bleuer, Sabrina Heid, Daniel Schindler, Florian Stuerzinger, Yves Tscherry, Michael Zumstein
Design Tokens are design primitives. They contain actual values — design decisions — but can also be accompanied by metadata. Design Tokens are delivered through the Design (Token) API.
Technically speaking: Design Tokens are organized lists of key-value pairs that describe design decisions, Cristiano Rastelli
This could be a color value, e.g. the brand-color within a certain format like hex. For more insights what a Design Token all could be checkout the Design (Token) API knowledge section.
The Design Token API — might also be called Design API — is the mechanism/interface to deliver all Design Tokens. The Design Tokens can have different formats and get delivered within the requested format depending on the consuming application
This could be:
- Icons
- Colors
- sRGB
- P3
- ...
Check the Design (Token) API knowledge section for more inputs or how this could look like. A visual representation/structure of the potential Design Token API can be found here.
GitHub is world's leading software development platform. A code hosting platform for collaboration and version control. GitHub lets you (and others) work together on projects like the Lyne Design System.
Lit is a simple library for building fast, lightweight and standard-compliant Web Components — our Lyne Components — which then power the Lyne Design System.
Lyne is the product name of our Design System — Lyne Design System.
Read our VISION.md for a more detailed, non-technical understanding.
For a more in depth and technical understanding of Lyne check out our repository and our documentation.
Lyne Components are the building blocks of the Lyne Design System and are based on standard compliant Web Components compiled by StencilJS and browsable through Storybook. In code context Lyne Components are always referred as lyne-components.
Netlify is an all-in-one platform for automating modern web projects. We use it as a static hosting platform and deploy our Storybook build of Lyne Components and our Lyne Documentation to Netlify. Since Lyne Components are an open source project Netlify services are free of charge.
npm stands for node package manager and is the world's largest software registry. The registry consists of shared code packages. Lyne Components are published through and shared on npm. The latest build of Lyne Components can be found on npm as the @sbb-esta/lyne-components package. For further instructions how to consume Lyne Components via npm read DEVELOP.md.
A Preview Deployment is a deployment which is based on a branch (see Git Branching) other than master. If you work on a feature-branch, every push to git will trigger a ci-build. After success, a Preview Deployment is made. In contrast to the Production Deployment, the Preview Deployment only creates a Storybook build and deploys it on Netlify.
A Production Deployment is a deployment which is made after a new version number got created, e.g. increasing from 2.1.0 to 2.1.1 or from 2.1.0 to 3.0.0. During a Production Deployment different deployments are made to different instances:
- npm: all Stencil components
- Netlify: Storybook containing all Stencil components
Definitions should only live in one place to ensure their accuracy. We define as our Single Source of Truth (SSoT) the Design (Token) API which delivers always valid, unique Design Tokens.
Stencil is an open source tool chain for building small, fast and standard compliant Web Components — our Lyne Components — which then power the Lyne Design System. Stencil is an integral part of Lyne. But Stencil is not a framework, it's a tool — a compiler — which generates plain, reusable Web Components. Since it is a compiler it can also generate framework specific wrappers and their corresponding bindings — called output targets. Output targets exist for various frameworks — also called plugins — and are also used to generate the component documentation.
Output targets need a better, more generic description since they are the base for dist too ...
Storybook is an open source tool for developing UI components in isolation. Besides being valuable during the development phase it is also used as a Component Browser for a wider, less technical audience. All our Lyne Components are browsable through through Storybook. The latest Storybook release of Lyne Components can be found on Netlify.
Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Web components are based on existing web standards and are framework agnostic hence they do not have any dependency on a JavaScript framework and therefore will never be outdated. Lyne Components are based on standard compliant Web Components.
Lyne Documentation is the documentation platform for everything Lyne related. The platform documents design principles, guidelines, lists all Design Tokens, all Lyne Components with their variations. The documentation is generated by Gridsome, a Static Site Generator, which pulls content from Dato CMS via GraphQL and agregates them with Lyne Components specific data. This gets all generated during build-time, triggered by a content change in Dato CMS or by a Lyne Components change, then gets deployed to Netlify to the mentioned link below once the build ran successfully.