db-ux-design-system.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Refresh" content="0; url='https://design-system.deutschebahn.com/'" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
    <meta
      name="description"
      content="Overview regarding the technical components out of the DB UX Design System by Deutsche Bahn."
    />
    <title>DB UX Design System Version 3</title>
    <link rel="stylesheet" href="styles/db-ui-42.css" />
    <link rel="stylesheet" href="styles/styles.css" />
    <link rel="stylesheet" href="styles/all-colors.css" />
  </head>
  <body class="landing">
    <header class="landing-header">
      <div>
        <img
          height="24"
          width="34"
          src="https://db-ui.github.io/images/db_logo.svg"
          alt="DB Logo"
        />

        <ul>
          <li>
            <a
              class="db-link"
              data-content="external"
              href="https://github.com/db-ux-design-system/core-web"
              target="_blank"
            >
              GitHub
            </a>
          </li>
          <li>
            <a
              class="db-link"
              data-content="external"
              target="_blank"
              href="https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-3"
            >
              Marketingportal
            </a>
          </li>
        </ul>
      </div>
    </header>
    <main class="landing-main">
      <section id="section-header">
        <h1>
          DB UX<br />
          Design System
        </h1>
      </section>
      <section id="section-contact" class="section-with-max-width">
        <h3 data-variant="light">By all, for all</h3>
        <img src="/assets/custom/db-ux-components.jpg" width="2400" height="1248" alt="DB UX Components Overview" />
        <p>
          Every bit in our world is designed & coded with the primal human
          desire to connect with one another while
          <strong>speaking the same language</strong>. The Design System of
          Deutsche Bahn aligns with this logic – creating a
          <strong>Single Source of Truth</strong> for designers and
          developers. We embody <strong>true collaboration</strong> to create
          consistent, efficient, and user-centric digital solutions – shaping
          the mobility of the future.
        </p>
        <a
          class="db-button"
          data-variant="primary"
          href="mailto:db-ux-designsystem@deutschebahn.com"
        >
          Contact Us
        </a>
      </section>
      <section id="section-main-features" class="section-with-max-width">
        <h2>How it works</h2>
        <p>
          Our design system is a barrier-breaker, changing the way we design and
          code products.
        </p>
        <ul>
          <li class="db-card" data-spacing="small">
            <svg
              width="144"
              height="145"
              viewBox="0 0 144 145"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g id="Group">
                <g id="Group_2">
                  <path
                    id="Vector"
                    d="M15.2969 6.84375C10.3607 6.84375 6.34375 10.8607 6.34375 15.7969V129.203C6.34375 134.139 10.3607 138.156 15.2969 138.156H128.703C133.639 138.156 137.656 134.139 137.656 129.203V15.7969C137.656 10.8607 133.639 6.84375 128.703 6.84375H15.2969ZM128.703 144.125H15.2969C7.06895 144.125 0.375 137.431 0.375 129.203V15.7969C0.375 7.56895 7.06895 0.875 15.2969 0.875H128.703C136.931 0.875 143.625 7.56895 143.625 15.7969V129.203C143.625 137.431 136.931 144.125 128.703 144.125Z"
                    fill="currentColor"
                  />
                  <path
                    id="Vector_2"
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M52.1062 52.6031V92.3968H91.8879L91.8939 52.6031H52.1062ZM91.8939 98.3656H52.1062C48.8115 98.3656 46.1375 95.6886 46.1375 92.3968V52.6031C46.1375 49.3114 48.8115 46.6344 52.1062 46.6344H91.8939C95.1886 46.6344 97.8626 49.3114 97.8626 52.6031V92.3968C97.8626 95.6886 95.1886 98.3656 91.8939 98.3656Z"
                    fill="#EC0016"
                  />
                </g>
              </g>
            </svg>

            <h3>Accessible</h3>
            <p>
              <strong>One place for everyone</strong> – accessibility from
              colors to components is guaranteed.
            </p>
          </li>
          <li class="db-card" data-spacing="small">
            <svg
              width="162"
              height="163"
              viewBox="0 0 162 163"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g id="Group">
                <g id="Group_2">
                  <path
                    id="Vector"
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M81 6.89062C39.8604 6.89062 6.39062 40.3604 6.39062 81.5C6.39062 122.64 39.8604 156.109 81 156.109C122.14 156.109 155.609 122.64 155.609 81.5C155.609 40.3604 122.14 6.89062 81 6.89062ZM81 162.078C36.5686 162.078 0.421875 125.931 0.421875 81.5C0.421875 37.0686 36.5686 0.921875 81 0.921875C125.431 0.921875 161.578 37.0686 161.578 81.5C161.578 125.931 125.431 162.078 81 162.078Z"
                    fill="currentColor"
                  />
                  <path
                    id="Vector_2"
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M81 30.8641C79.399 30.8736 77.8671 31.5177 76.7403 32.6551C75.6136 33.7925 74.9839 35.3303 74.9895 36.9313C74.9895 40.2738 77.6844 42.9956 81 42.9956C82.601 42.9861 84.1329 42.342 85.2597 41.2046C86.3864 40.0672 87.0161 38.5294 87.0105 36.9284C87.0145 35.3284 86.3842 33.792 85.2576 32.6559C84.131 31.5198 82.6 30.8766 81 30.8671V30.8641ZM81 49.0628C74.3717 49.0628 68.9789 43.6193 68.9789 36.9284C68.9789 30.2374 74.3717 24.7969 81 24.7969C87.6283 24.7969 93.0211 30.2374 93.0211 36.9313C93.0211 43.6193 87.6283 49.0628 81 49.0628ZM74.9895 92.2229H87.0105V58.8575H74.9895V92.2229ZM103.654 138.203C102.407 138.203 101.243 137.415 100.813 136.162L87.873 98.2961H74.127L61.1867 136.162C60.6436 137.744 58.9335 138.585 57.3638 138.039C56.607 137.772 55.9867 137.216 55.6384 136.493C55.29 135.77 55.2419 134.939 55.5045 134.18L68.9789 94.7506V58.2517L38.5771 51.313C37.7964 51.1304 37.1196 50.6463 36.6946 49.9663C36.2697 49.2864 36.131 48.4659 36.309 47.684C36.6731 46.0546 38.2846 45.028 39.9052 45.398L72.3185 52.7933H89.6816L122.095 45.398C122.866 45.2577 123.661 45.4209 124.314 45.8536C124.968 46.2863 125.428 46.9549 125.6 47.7195C125.771 48.4841 125.641 49.2854 125.235 49.9557C124.829 50.6261 124.18 51.1135 123.423 51.316L93.0211 58.2487V94.7506L106.496 134.177C106.652 134.632 106.698 135.118 106.63 135.594C106.562 136.07 106.382 136.524 106.105 136.917C105.827 137.31 105.461 137.632 105.035 137.855C104.609 138.079 104.136 138.198 103.654 138.203Z"
                    fill="#EC0016"
                  />
                </g>
              </g>
            </svg>

            <h3>Adaptive</h3>
            <p>
              <strong>One token</strong> changes it all – from different styles
              to colors or responsive design.
            </p>
          </li>
          <li class="db-card" data-spacing="small">
            <!--TODO-->
            <svg
              width="150"
              height="151"
              viewBox="0 0 150 151"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g id="Group">
                <g id="Group_2">
                  <path
                    id="Vector"
                    d="M141.82 72.4589C146.912 64.8903 149.625 55.9721 149.609 46.85C149.609 21.5067 128.993 0.890625 103.65 0.890625C94.4373 0.890625 85.5498 3.60641 77.9456 8.7455C77.2899 9.18874 76.837 9.87433 76.6868 10.6514C76.5365 11.4286 76.7011 12.2335 77.1443 12.8893C77.5876 13.5451 78.2731 13.9979 79.0503 14.1482C79.8274 14.2984 80.6324 14.1339 81.2881 13.6906C87.8899 9.22575 95.6802 6.84593 103.65 6.85938C125.705 6.85938 143.641 24.7985 143.641 46.85C143.641 54.8302 141.298 62.5359 136.866 69.1313C136.64 69.4564 136.48 69.8233 136.397 70.2107C136.314 70.5981 136.308 70.9982 136.381 71.3876C136.454 71.777 136.604 72.148 136.822 72.4789C137.04 72.8099 137.322 73.0941 137.651 73.315C137.98 73.5359 138.349 73.6891 138.738 73.7657C139.127 73.8423 139.527 73.8407 139.915 73.761C140.303 73.6813 140.671 73.5251 140.998 73.3016C141.326 73.078 141.605 72.7916 141.82 72.4589ZM110.684 102.431C110.143 102.431 109.613 102.283 109.149 102.004C108.685 101.726 108.306 101.326 108.052 100.848C107.798 100.371 107.678 99.8333 107.706 99.293C107.734 98.7528 107.908 98.2303 108.21 97.7813C112.642 91.1968 115.004 83.4372 114.991 75.5C114.991 53.4485 97.0546 35.5064 75 35.5064C66.984 35.5064 59.2485 37.87 52.6381 42.3376C51.9825 42.7542 51.1904 42.8988 50.4299 42.7407C49.6694 42.5825 49.0006 42.1341 48.5654 41.4907C48.1303 40.8473 47.9631 40.0596 48.0995 39.2949C48.2358 38.5303 48.6649 37.8489 49.2956 37.3955C56.8824 32.2589 65.838 29.5212 75 29.5376C100.343 29.5376 120.959 50.1537 120.959 75.5C120.959 84.674 118.265 93.5286 113.17 101.112C112.897 101.519 112.527 101.852 112.094 102.082C111.661 102.312 111.175 102.432 110.684 102.431Z"
                    fill="currentColor"
                  />
                  <path
                    id="Vector_2"
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M46.35 64.1594C24.2985 64.1594 6.35938 82.0955 6.35938 104.147C6.35938 126.199 24.2985 144.138 46.35 144.138C68.4015 144.138 86.3406 126.199 86.3406 104.147C86.3406 82.0984 68.4015 64.1564 46.35 64.1564M46.35 150.106C21.0067 150.109 0.390625 129.496 0.390625 104.15C0.390625 78.8097 21.0067 58.1906 46.35 58.1906C71.6933 58.1906 92.3094 78.8097 92.3094 104.15C92.3094 129.496 71.6933 150.106 46.35 150.106Z"
                    fill="#EC0016"
                  />
                </g>
              </g>
            </svg>

            <h3>Efficient</h3>
            <p>
              <strong>One system</strong> does the trick – saving time, money,
              and nerves for all stakeholders.
            </p>
          </li>
        </ul>
      </section>

      <section id="section-vision" class="section-with-max-width">
        <div class="db-bg-informational-transparent-semi">
          <h2>Our vision</h2>
          <h3 data-variant="light">
            A great environment to create outstanding digital solutions.
          </h3>
        </div>
      </section>
      <section id="section-storytime" class="db-bg-base-transparent-semi">
        <img
          src="assets/custom/db-ux-design-system-core-team.jpeg"
          alt="Photo by the team"
          width="1632"
          height="927"
        />
        <div class="section-with-max-width">
          <h2>With arms wide open</h2>
          <div>
            <p>
              Truth be told, it wasn't easy. Companies like Deutsche Bahn –
              running for more than a century – have more walls than meet the
              eye, separating processes, ideas, and people. We challenged the
              status quo.
              <strong
                >No more tossing designs over walls and expecting magic from the
                developer’s side:</strong
              >
              to create digital solutions, we work together right from the
              start. So, what's next?
            </p>
            <p>
              As railway enthusiasts – or "Superbahner" as we say in German – we
              don't think internally or nationally. We think European. Just as
              our trains cross borders into neighboring countries, we operate
              <strong>our design system as open source</strong>. In mobility,
              there are no limits, only the start of new partnerships. Our
              design system serves as a bridge – by all, for all.
            </p>
          </div>
        </div>
      </section>
      <section id="section-talk-to-us" class="section-with-max-width">
        <h2>Talk to us!</h2>
        <ul>
          <li>
            <img
              class="person-img"
              src="assets/custom/Businessshooting_Jana-Freund-Fotografie-58_1.jpg"
              alt=""
              width="240"
              height="241"
            />
            <h4>Tobi</h4>
            Lead @ DB UX Design System
          </li>
          <li>
            <img
              class="person-img"
              src="assets/custom/Businessshooting_Jana-Freund-Fotografie-69_1.jpg"
              alt=""
              width="240"
              height="241"
            />
            <h4>Lea</h4>
            Design Lead @ DB UX Design System
          </li>
          <li>
            <img
              class="person-img"
              src="assets/custom/Businessshooting_Jana-Freund-Fotografie-77_1.jpg"
              alt=""
              width="240"
              height="241"
            />
            <h4>Maximilian</h4>
            Dev Lead @ DB UX Design System
          </li>
        </ul>
        <a
          class="db-button"
          data-variant="primary"
          href="mailto:db-ux-designsystem@deutschebahn.com"
        >
          Contact Us
        </a>
      </section>
    </main>
    <footer class="landing-footer db-bg-base-transparent-semi">
      © 2024 DB UX Design System
      <a
        class="db-link"
        href="https://www.dbsystel.de/dbsystel-en/legal-3715942"
        data-content="internal"
      >
        Imprint
      </a>
      <a
        class="db-link"
        href="datenschutzerklaerung.html"
        hreflang="de"
        data-content="internal"
      >
        Privacy policy
      </a>
    </footer>
  </body>
</html>