Lane

Das Design System für Vintrica · Tokens v0.1.0

lane-tokens Tokens Farben, Abstände, Typografie und Motion als gemeinsame Quelle für App und Web. Zur Übersicht ↓ lane-app · Flutter App Flutter-Widgets und Theme für die Vintrica-Apps, dokumentiert in Widgetbook. Widgetbook öffnen → lane-web · React Web React-Komponenten für Web-Frontends (Next.js), dokumentiert in Storybook. Storybook öffnen →

Tokens

Komponenten verwenden nur semantische Tokens. Primitives sind die Rohwerte dahinter.

tokens.css tokens.json

Semantische Farben

bg

--lane-color-bg-canvas #ffffff
--lane-color-bg-surface #f7f7f8
--lane-color-bg-subtle #ececef

text

--lane-color-text-default #17171b
--lane-color-text-muted #6b6b78
--lane-color-text-on-action #ffffff

border

--lane-color-border-default #d9d9de
--lane-color-border-strong #8e8e9a

action

--lane-color-action-primary #3b61e0
--lane-color-action-primary-hover #2c4bbd
--lane-color-action-primary-active #233b95
--lane-color-action-secondary #ececef
--lane-color-action-secondary-hover #d9d9de
--lane-color-action-danger #d93a3a
--lane-color-action-danger-hover #b82c2c

focus-ring

--lane-color-focus-ring #5d82f5

feedback

--lane-color-feedback-success #23945a
--lane-color-feedback-warning #c98a0c
--lane-color-feedback-error #d93a3a

Farbskalen

gray

--lane-color-gray-0 #ffffff
--lane-color-gray-50 #f7f7f8
--lane-color-gray-100 #ececef
--lane-color-gray-200 #d9d9de
--lane-color-gray-300 #b8b8c1
--lane-color-gray-400 #8e8e9a
--lane-color-gray-500 #6b6b78
--lane-color-gray-600 #4f4f5a
--lane-color-gray-700 #3a3a43
--lane-color-gray-800 #26262c
--lane-color-gray-900 #17171b

brand

--lane-color-brand-50 #eef3ff
--lane-color-brand-100 #dbe5ff
--lane-color-brand-200 #b6caff
--lane-color-brand-300 #8aa8ff
--lane-color-brand-400 #5d82f5
--lane-color-brand-500 #3b61e0
--lane-color-brand-600 #2c4bbd
--lane-color-brand-700 #233b95
--lane-color-brand-800 #1c2f74
--lane-color-brand-900 #142152

red

--lane-color-red-500 #d93a3a
--lane-color-red-600 #b82c2c

green

--lane-color-green-500 #23945a

amber

--lane-color-amber-500 #c98a0c

Abstände

--lane-space-00
--lane-space-10.25rem
--lane-space-20.5rem
--lane-space-30.75rem
--lane-space-41rem
--lane-space-51.25rem
--lane-space-61.5rem
--lane-space-82rem
--lane-space-102.5rem
--lane-space-123rem
--lane-space-164rem

Radien

--lane-radius-none0px
--lane-radius-sm4px
--lane-radius-md8px
--lane-radius-lg12px
--lane-radius-full9999px

Schriftgrößen

--lane-font-size-xs0.75remVintrica
--lane-font-size-sm0.875remVintrica
--lane-font-size-md1remVintrica
--lane-font-size-lg1.125remVintrica
--lane-font-size-xl1.25remVintrica
--lane-font-size-2xl1.5remVintrica
--lane-font-size-3xl2remVintrica