Lyne Design System

Lyne is an open source Design System built by SBB–CFF–FFS. We provide a common terminology, working code, design decisions, resources and human interface guidelines which all together define our shared, common language.

⚠️ Notice

Lyne Design System is 🧪 experimental at the moment — with enthusiasm.
Don't use the project until it has left infancy.

🎯 Our aim

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).

🚀 Getting started

First things first: This repository acts as the entry point for everything related to the Lyne Design System and is it's common ground — it's common denominator. See our projects below for more details and their specific implementations.

Documentation

Check the docs directory for our documentation and resources which we will continuously enhance.

Besides our markdown-only documentation on GitHub – mentioned above – we host the Lyne documentation platform to provide a holistic but less technical understanding of Lyne.

Our projects

Project/repository	Purpose	Version
`lyne-components`	🧱 Lyne building blocks — standard compliant Web Components
`lyne-design-tokens`	💄 Lyne design primitives — design decisions stored as Design Tokens and used across the system
`lyne-icons`	🎎 Lyne iconography - icons used across the system
`lyne-documentation`	📚 Documentation platform for Lyne
Integration and application repositories
`lyne-getting-started`	🕹️ Integration examples for Lyne Components within client side rendered (CSR) React, Angular, Vue, Svelte and Plain JavaScript, but also server side rendered (SSR) with 11ty	(no versions)
`lyne-components-demo`	Showcase of how Lyne components could be used to create a fully fledged website
Helper and behind the curtain repositories
`lyne-figma-listener`	Server listening to webhooks from Figma
`lyne-helper-figma-api`	Helpers to simplify requests against the Figma API
`lyne-helper-eslint-config`	ESLint Configuration for all Lyne Repos
`lyne-helper-trigger-travis`	Helper to trigger a build on TravisCI