-
Notifications
You must be signed in to change notification settings - Fork 1
/
foundation.html
5 lines (5 loc) · 39.6 KB
/
foundation.html
1
2
3
4
5
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/16d983cf168ba446-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/364091edb3b3d89a-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/3fb144034c194814-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/48447be3ff22dbe5-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/4dd1ca8167407b73-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/682dafca9fbeb220-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/a24f32beb6e7a786-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/c5c10b6c79e7c8d3-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/ce05ea4eccaa7865-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/dce4e2eda8daaefa-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/e0fa7b65f7804beb.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/01869217fba2a643.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/3eabd8cac0b8578d.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/5e63ce5d1c715655.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/7bcd234d65739332.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/b96b20ee6eaeb372.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/101a228fb3455223.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/a9d83cc4194f86cd.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/9da5797e5fcf502a.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/4c1888751b86a8d9.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-34f7adf47207d9ac.js"/><script src="/_next/static/chunks/1dd3208c-94024c28abbb6bbd.js" async=""></script><script src="/_next/static/chunks/286-e039e3ba24258f38.js" async=""></script><script src="/_next/static/chunks/main-app-c5c93ffd567aae6e.js" async=""></script><script src="/_next/static/chunks/5469-0184e94f7de55262.js" async=""></script><script src="/_next/static/chunks/5658-582c5908005b057f.js" async=""></script><script src="/_next/static/chunks/app/foundation/page-f564e823d0643de1.js" async=""></script><script src="/_next/static/chunks/8287-e5b3491cbf25ed33.js" async=""></script><script src="/_next/static/chunks/6479-ef8ecd7df819adb8.js" async=""></script><script src="/_next/static/chunks/app/layout-85bbd3021cad7dbf.js" async=""></script><script src="/_next/static/chunks/app/page-3a51cf8181636895.js" async=""></script><script src="/_next/static/chunks/app/not-found-283f76a8505881fe.js" async=""></script><link rel="preload" href="/core-out/index.bundle.js" as="script"/><link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20width%3D%2280%22%20height%3D%2260%22%20viewBox%3D%220%200%2080%2060%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%2280%22%20height%3D%2260%22%20fill%3D%22%23fff%22%20rx%3D%228%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22m26.87%2024.123-2.95%202.197c-1.387-1.2-3.187-1.43-4.178-1.43-.997%200-2.046.288-2.205%201.004-.159.694.492%201.236%201.605%201.54%201.272.34%202.422.643%204.207%201.15%202.646.758%204.46%201.9%204.46%204.553%200%203.665-3.252%205.56-7.604%205.56s-7.316-2.264-8.205-3.32l3.116-2.327c2.19%201.908%203.708%202.176%204.98%202.176%201.46%200%202.827-.311%203-1.135.145-.665-.404-1.193-1.648-1.482-1.402-.326-2.595-.586-3.918-.933-3.593-.939-4.605-3.028-4.605-4.906%200-2.581%202.4-5.234%206.803-5.234%204.503%200%207.142%202.579%207.142%202.587Zm18.788-2.328H32.516v16.417h13.38v-3.788h-8.768v-2.646h6.036v-3.621h-6.036V25.54h8.523v-3.745h.007ZM29.118%2042h1.02V18h-1.02v24Zm18.506%200h1.02V18h-1.02v24Zm3.398-3.788h10.554c2.82%200%205.11-1.699%205.11-4.424%200-2.125-1.387-3.535-3.339-4.157a.837.837%200%200%200-.188-.021c.065-.008.13-.015.188-.037%201.12-.44%202.35-1.619%202.35-3.621%200-2.545-2.249-4.164-5.025-4.164h-9.657l.007%2016.424Zm4.633-13.005h3.687c.846%200%201.533.673%201.533%201.439s-.687%201.446-1.533%201.446h-3.687v-2.885Zm4.504%209.362h-4.51v-2.993h4.51c.795%200%201.446.643%201.446%201.496%200%20.846-.644%201.497-1.446%201.497Z%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20"/><title>Foundation — Green Design System</title><meta name="description" content="Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence."/><link rel="canonical" href="https://seb.io/foundation/foundation"/><meta property="og:title" content="Foundation — Green Design System"/><meta property="og:description" content="Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence."/><meta property="og:image" content="https://seb.io/foundation/og?title=Foundation"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Foundation — Green Design System"/><meta name="twitter:description" content="Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence."/><meta name="twitter:image" content="https://seb.io/foundation/og?title=Foundation"/><meta name="next-size-adjust"/><script src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script></head><body><script>!function(){try{var d=document.documentElement,n='theme',s='setAttribute';var e=localStorage.getItem('theme');if('system'===e||(!e&&true)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){d[s](n,'dark')}else{d[s](n,'light')}}else if(e){d[s](n,e|| '')}}catch(e){}}()</script><main class="layout-main"><div class="alert"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg><span>This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!</span></div><header class="main"><nav><button class="hamburger "><svg viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>Menu</button></nav><a class="logo" aria-label="SEB" href="/"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 55 24"><path fill="currentColor" d="M14.87 6.123 11.92 8.32c-1.387-1.2-3.187-1.43-4.178-1.43-.997 0-2.046.288-2.205 1.004-.159.694.492 1.236 1.605 1.54 1.272.34 2.422.643 4.207 1.15 2.646.758 4.46 1.9 4.46 4.553 0 3.665-3.252 5.56-7.604 5.56S.889 18.433 0 17.377l3.116-2.327c2.19 1.908 3.708 2.176 4.98 2.176 1.46 0 2.827-.311 3-1.135.145-.665-.404-1.193-1.648-1.482-1.402-.326-2.595-.586-3.918-.933C1.937 12.737.925 10.648.925 8.77c0-2.581 2.4-5.234 6.803-5.234 4.503 0 7.142 2.58 7.142 2.588Zm18.788-2.328H20.516v16.417h13.38v-3.788h-8.768v-2.646h6.036v-3.621h-6.036V7.54h8.523V3.795h.007ZM17.118 24h1.02V0h-1.02v24Zm18.506 0h1.02V0h-1.02v24Zm3.398-3.788h10.554c2.82 0 5.11-1.699 5.11-4.424 0-2.125-1.387-3.535-3.339-4.157a.837.837 0 0 0-.188-.021c.065-.008.13-.015.188-.037 1.12-.44 2.35-1.619 2.35-3.621 0-2.545-2.249-4.164-5.025-4.164h-9.657l.007 16.424Zm4.633-13.005h3.687c.846 0 1.533.673 1.533 1.439s-.687 1.446-1.533 1.446h-3.687V7.207Zm4.504 9.362h-4.51v-2.993h4.51c.795 0 1.446.643 1.446 1.496 0 .846-.644 1.497-1.446 1.497Z"></path></svg></a><nav><button class="shortcut"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg><span>⌘K</span></button><a class="github" target="_blank" aria-label="GitHub" href="https://github.com/seb-oss/green"><svg viewBox="0 0 24 24"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a><button class="theme" aria-label="Toggle Light Theme"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></button></nav></header><section class="layout-article"><section class="layout-content page-content"><gds-grid gap-inline="medium" padding-block="medium" padding-inline="medium" columns="12" align="start"><gds-cell span="10"><gds-grid gap-block="large" columns="1"><div class="hero"><h1 class="gds-fs-display-large">Foundation</h1><p class="gds-fs-headline-large color-secondary">Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence.</p></div><gds-grid columns="2"><h2 id="our-purpose" class="heading-medium">Our purpose</h2><p class="paragraph-medium text-secondary">Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence.</p></gds-grid><gds-grid columns="2"><h2 id="tonality" class="heading-medium">Tonality</h2><p class="paragraph-medium text-secondary">Our tonality is a voice that speaks to the user, we do not scream, but when needed we raise our voice to be heard. The balance in volume allows us to point the user in the right direction, wave to get noticed or whisper when needed.</p></gds-grid><img alt="A picture of a cabin in the woods" loading="lazy" width="2656" height="1600" decoding="async" data-nimg="1" style="color:transparent;width:100%;height:auto;object-fit:cover;object-position:center;aspect-ratio:16 / 9" src="/_next/static/media/tonality-circles.b9116684.jpg"/><gds-grid columns="2"><h2 id="visual-style" class="heading-medium">Visual style</h2><div><p class="paragraph-medium text-secondary">This design language is a direct descendant and part of the global brand identity. It caters to designers and developers with design assets and code. Together we can focus on the user and the experience we want to build, and swiftly make changes as needed.</p><div class="gds-spacing gds-spacing--vertical gds-spacing--vertical--8"></div><div class="gds-accordion"><div class="gds-accordion-item"><div role="heading" aria-level="3"><button id="timeless" aria-expanded="false" aria-controls="gds-accordion-item-region--c4b64f76-d699-4cba-9ba2-0af9db31fa3f"><span>Timeless</span><div class="gds-accordion-item__icon-button"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></div></button></div><div role="region" id="gds-accordion-item-region--c4b64f76-d699-4cba-9ba2-0af9db31fa3f" aria-labelledby="timeless" hidden=""><div><p>Embracing a modern aesthetic, the Green Design System radiates elegance. Its visual elements are a harmonious blend of contemporary design principles, ensuring a fresh and relevant appearance that stands the test of time.</p></div></div></div><div class="gds-accordion-item"><div role="heading" aria-level="3"><button id="to-the-point" aria-expanded="false" aria-controls="gds-accordion-item-region--b5b523b7-929d-44d4-b3d2-54337061ef91"><span>To the point</span><div class="gds-accordion-item__icon-button"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></div></button></div><div role="region" id="gds-accordion-item-region--b5b523b7-929d-44d4-b3d2-54337061ef91" aria-labelledby="to-the-point" hidden=""><div><p>Elegance is found in simplicity. The Green Design System champions an uncluttered approach, where every visual element serves a purpose. The result is an interface that feels effortless, allowing users to navigate seamlessly without unnecessary distractions.</p></div></div></div><div class="gds-accordion-item"><div role="heading" aria-level="3"><button id="confidence-in-simplicity" aria-expanded="false" aria-controls="gds-accordion-item-region--4b307705-fb83-494e-9e37-5705fc10a5c6"><span>Confidence in simplicity</span><div class="gds-accordion-item__icon-button"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></div></button></div><div role="region" id="gds-accordion-item-region--4b307705-fb83-494e-9e37-5705fc10a5c6" aria-labelledby="confidence-in-simplicity" hidden=""><div><p>In the world of design, confidence shines through
simplicity. The Green Design System adheres to the
philosophy that "less is more." By stripping away the
superfluous, it exudes confidence, allowing the core essence
of the design to take center stage.</p></div></div></div><div class="gds-accordion-item"><div role="heading" aria-level="3"><button id="attention-to-detail" aria-expanded="false" aria-controls="gds-accordion-item-region--9ea7b0c5-8f7d-4fe2-818f-6f52151942a0"><span>Attention to detail</span><div class="gds-accordion-item__icon-button"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></div></button></div><div role="region" id="gds-accordion-item-region--9ea7b0c5-8f7d-4fe2-818f-6f52151942a0" aria-labelledby="attention-to-detail" hidden=""><div><p>Just as in our business operations, the Green Design System is meticulous in its attention to detail. Every pixel, every color, and every interaction is carefully considered, contributing to a visually polished and refined user interface.</p></div></div></div><div class="gds-accordion-item"><div role="heading" aria-level="3"><button id="effortless" aria-expanded="false" aria-controls="gds-accordion-item-region--82f5b5ad-069f-46a3-8060-22b56638252e"><span>Effortless</span><div class="gds-accordion-item__icon-button"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></div></button></div><div role="region" id="gds-accordion-item-region--82f5b5ad-069f-46a3-8060-22b56638252e" aria-labelledby="effortless" hidden=""><div><p>The visual style of the Green Design System is not just about aesthetics; it's about creating an effortless harmony. The components seamlessly interact, the color palette is carefully curated, and the typography flows with purpose. It's a visual symphony that enhances the user experience.</p></div></div></div></div></div></gds-grid><img alt="A picture of a cabin in the woods" loading="lazy" width="2656" height="1600" decoding="async" data-nimg="1" style="color:transparent;width:100%;height:auto;object-fit:cover;object-position:center;aspect-ratio:16 / 9" src="/_next/static/media/metallic-surface.c4018d1d.jpg"/><gds-grid columns="2"><h2 id="features" class="heading-medium">Features</h2><div><p class="paragraph-medium text-secondary">The Green Design System ensures a unified visual experience. Empowering designers and developers with versatile, accessible and coherent components.</p><div class="gds-spacing gds-spacing--vertical gds-spacing--vertical--8"></div><div class="gds-accordion"><div class="gds-accordion-item"><div role="heading" aria-level="3"><button id="features" aria-expanded="false" aria-controls="gds-accordion-item-region--fb835a7a-5b75-4b79-b373-93f28957d363"><span>Consistency</span><div class="gds-accordion-item__icon-button"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></div></button></div><div role="region" id="gds-accordion-item-region--fb835a7a-5b75-4b79-b373-93f28957d363" aria-labelledby="features" hidden=""><div><p>The Green Design System ensures a seamless and consistent visual experience across our entire product suite. Every element, from buttons to typography, is meticulously crafted, creating a cohesive and polished user interface.</p></div></div></div><div class="gds-accordion-item"><div role="heading" aria-level="3"><button id="consistency" aria-expanded="false" aria-controls="gds-accordion-item-region--49cfcb26-b687-4bbb-8ce6-25477b7315d5"><span>Efficiency</span><div class="gds-accordion-item__icon-button"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></div></button></div><div role="region" id="gds-accordion-item-region--49cfcb26-b687-4bbb-8ce6-25477b7315d5" aria-labelledby="consistency" hidden=""><div><p>With an extensive library of reusable components, Green Design System empowers our teams to design and develop with speed and precision. This efficiency allows for more time spent on creative innovation and less on repetitive tasks, ultimately reducing time-to-market.</p></div></div></div><div class="gds-accordion-item"><div role="heading" aria-level="3"><button id="efficiency" aria-expanded="false" aria-controls="gds-accordion-item-region--34b27590-1178-4bc1-b33e-ca50846d8fbf"><span>Adaptability</span><div class="gds-accordion-item__icon-button"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></div></button></div><div role="region" id="gds-accordion-item-region--34b27590-1178-4bc1-b33e-ca50846d8fbf" aria-labelledby="efficiency" hidden=""><div><p>Green Design System adapts to the ever-changing landscape of our product needs. Whether it's a minor enhancement or a major overhaul, the system flexibly scales to maintain a user-centric and intuitive experience.</p></div></div></div><div class="gds-accordion-item"><div role="heading" aria-level="3"><button id="user-centric-principles" aria-expanded="false" aria-controls="gds-accordion-item-region--94a757e8-4d9f-4432-b957-42ddbc9caa60"><span>User-Centric Principles</span><div class="gds-accordion-item__icon-button"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></div></button></div><div role="region" id="gds-accordion-item-region--94a757e8-4d9f-4432-b957-42ddbc9caa60" aria-labelledby="user-centric-principles" hidden=""><div><p>Rooted in user-centric design principles, our Design System places the user at the forefront. From accessible color choices to responsive design elements, we prioritize inclusivity and user satisfaction, ensuring that our products are both functional and enjoyable.</p></div></div></div><div class="gds-accordion-item"><div role="heading" aria-level="3"><button id="components-and-styles" aria-expanded="false" aria-controls="gds-accordion-item-region--f855ef7e-2104-4def-8966-33ff168019f5"><span>Components and Styles</span><div class="gds-accordion-item__icon-button"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></div></button></div><div role="region" id="gds-accordion-item-region--f855ef7e-2104-4def-8966-33ff168019f5" aria-labelledby="components-and-styles" hidden=""><div><p>Explore a palette inspired by the versatility and vibrancy of our brand promise, typography and iconography are carefully chosen for both style and functionality. Our library of components is a playground of possibilities, designed to create interfaces that are not only visually appealing but also accessible and highly UX centered.</p></div></div></div><div class="gds-accordion-item"><div role="heading" aria-level="3"><button id="implementation" aria-expanded="false" aria-controls="gds-accordion-item-region--8a4fdc69-c4cd-478e-9fe9-9b9ad295c9bb"><span>Implementation</span><div class="gds-accordion-item__icon-button"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></div></button></div><div role="region" id="gds-accordion-item-region--8a4fdc69-c4cd-478e-9fe9-9b9ad295c9bb" aria-labelledby="implementation" hidden=""><div><p>Integrating the Green Design System into your projects is as effortless as a seamless user experience. Whether you're a designer seeking inspiration or a developer looking for efficient code snippets, our documentation provides clear guidance. Let's embark on this journey together, creating digital experiences that reflect the innovation and precision of SEB.</p></div></div></div></div></div></gds-grid></gds-grid></gds-cell><gds-cell span="2"><aside class="toc"><span>On this page</span><nav data-name="On this page"><a data-id="top" data-level="1" href="#top">About</a><a class="toc-link " data-id="our-purpose" data-level="2" href="#our-purpose">Our purpose</a><a class="toc-link " data-id="tonality" data-level="2" href="#tonality">Tonality</a><details><summary><a class="toc-link " data-id="visual-style" data-level="2" href="#visual-style">Visual style</a><div class="disclosure" aria-label="Expand" tabindex="0"><svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg></div></summary><a class="toc-link " data-id="timeless" data-level="3" href="#timeless">Timeless</a><a class="toc-link " data-id="to-the-point" data-level="3" href="#to-the-point">To the point</a><a class="toc-link " data-id="confidence-in-simplicity" data-level="3" href="#confidence-in-simplicity">Confidence in simplicity</a><a class="toc-link " data-id="attention-to-detail" data-level="3" href="#attention-to-detail">Attention to detail</a><a class="toc-link " data-id="effortless" data-level="3" href="#effortless">Effortless</a></details><details><summary><a class="toc-link " data-id="features" data-level="2" href="#features">Features</a><div class="disclosure" aria-label="Expand" tabindex="0"><svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg></div></summary><a class="toc-link " data-id="consistency" data-level="3" href="#consistency">Consistency</a><a class="toc-link " data-id="efficiency" data-level="3" href="#efficiency">Efficiency</a><a class="toc-link " data-id="user-centric-principles" data-level="3" href="#user-centric-principles">User-Centric Principles</a><a class="toc-link " data-id="components-and-styles" data-level="3" href="#components-and-styles">Components and Styles</a><a class="toc-link " data-id="implementation" data-level="3" href="#implementation">Implementation</a></details></nav></aside></gds-cell></gds-grid></section></section><footer class="main-footer" padding-block="large"><gds-grid gap-block="large" padding-inline="medium" columns="1" mobile="2" tablet="3"><h2>Green Design System</h2><gds-grid columns="5" fluid="true"><nav><ul><gds-grid gap-block="small" columns="1"><li><a href="/about">About</a></li><li><a href="/foundation">Foundation</a></li><li><a href="/components">Components</a></li></gds-grid></ul></nav><nav><ul><gds-grid gap-block="small" columns="1"><li><a href="https://github.com/seb-oss/green">Github</a></li><li><a href="/changelog">Changelog</a></li><li><a href="/status">Status</a></li></gds-grid></ul></nav><nav><ul><gds-grid gap-block="small" columns="1"><li><a href="https://sebgroup.com/">SEB Group</a></li><li><a href="https://seb.se/">SEB.se</a></li></gds-grid></ul></nav></gds-grid><div class="gds-flex gds-flex-wrap-wrap"><span>© 2024 Green Design System</span><button type="button" data-cc="c-settings" class="cookie-preferences">Cookie preferences</button></div></gds-grid></footer></main><div class="cmd " role="dialog"><main><form><label for="search"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></label><input id="search" type="text" placeholder="⌘K — Search components & pages"/><button type="reset"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button></form><section><div><div class="category" tabindex="-1">Changelog</div><div class="list"><a class="" href="/changelog/1.0.0-beta.1"><div class="cmdk-item-name"><span class="cmdk-item-char">v</span><span>1.0.0-beta.1</span></div></a></div></div><div><div class="category" tabindex="-1">Component</div><div class="list"><a class="" href="/component/breadcrumb"><div class="cmdk-item-name"><span class="cmdk-item-char">B</span><span>Breadcrumb</span></div><div class="cmdk-options"><span><svg viewBox="0 0 24 24"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"></path><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"></path><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"></path><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"></path><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"></path></svg></span><span><svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></span></div></a><a class="" href="/component/button"><div class="cmdk-item-name"><span class="cmdk-item-char">B</span><span>Button</span></div><div class="cmdk-options"><span><svg viewBox="0 0 24 24"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"></path><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"></path><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"></path><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"></path><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"></path></svg></span><span><svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></span></div></a><a class="" href="/component/checkbox"><div class="cmdk-item-name"><span class="cmdk-item-char">C</span><span>Checkbox</span></div><div class="cmdk-options"><span><svg viewBox="0 0 24 24"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"></path><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"></path><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"></path><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"></path><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"></path></svg></span><span><svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></span></div></a><a class="" href="/component/form"><div class="cmdk-item-name"><span class="cmdk-item-char">F</span><span>Form</span></div><div class="cmdk-options"><span><svg viewBox="0 0 24 24"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"></path><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"></path><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"></path><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"></path><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"></path></svg></span><span><svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></span></div></a><a class="" href="/component/input"><div class="cmdk-item-name"><span class="cmdk-item-char">I</span><span>Input</span></div><div class="cmdk-options"><span><svg viewBox="0 0 24 24"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"></path><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"></path><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"></path><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"></path><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"></path></svg></span><span><svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></span></div></a><a class="" href="/component/radiobutton"><div class="cmdk-item-name"><span class="cmdk-item-char">R</span><span>Radiobutton</span></div><div class="cmdk-options"><span><svg viewBox="0 0 24 24"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"></path><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"></path><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"></path><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"></path><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"></path></svg></span><span><svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></span></div></a><a class="" href="/component/segmentedcontrol"><div class="cmdk-item-name"><span class="cmdk-item-char">S</span><span>Segmented control</span></div><div class="cmdk-options"><span><svg viewBox="0 0 24 24"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"></path><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"></path><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"></path><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"></path><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"></path></svg></span><span><svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></span></div></a></div></div></section><footer><svg width="14" height="14" viewBox="0 0 25 25"><path d="M24.1819 7.19041C19.6399 7.19041 15.6799 9.77498 13.6419 13.5785C13.2849 11.1715 12.3789 8.88337 10.9969 6.89791C9.20875 4.31037 6.69322 2.3358 3.78189 1.23449L3.15489 0.998047L2.80189 1.57692C1.72967 3.3372 1.11407 5.34635 1.01291 7.41566C0.911744 9.48497 1.32833 11.5465 2.22355 13.4067C3.11876 15.2669 4.46323 16.8646 6.13066 18.0499C7.79809 19.2352 9.73377 19.969 11.7559 20.1826C11.3979 21.9752 10.8799 24.412 10.8799 24.412C10.8623 24.4813 10.8606 24.5537 10.8747 24.6237C10.8889 24.6938 10.9186 24.7596 10.9615 24.8162C11.0044 24.8727 11.0595 24.9185 11.1225 24.95C11.1855 24.9816 11.2547 24.998 11.3249 24.998H12.7829C12.8914 24.9982 12.9964 24.9591 13.0793 24.8879C13.1622 24.8166 13.2177 24.7177 13.2359 24.6087C13.2359 24.6087 13.4399 21.7816 13.5609 20.2396C19.9179 19.94 24.9999 14.5752 24.9999 8.02408V7.18939L24.1819 7.19041ZM2.63589 8.02408C2.63488 6.29308 3.05217 4.58847 3.85089 3.06081C8.86089 5.25912 12.1809 10.3539 12.1809 15.9541C12.1809 16.8183 12.1039 17.6805 11.9499 18.5305C9.39638 18.2657 7.03015 17.0446 5.30946 15.1036C3.58877 13.1626 2.63608 10.6399 2.63589 8.02408ZM13.8519 18.5519C14.2649 13.4184 18.2919 9.3133 23.3279 8.89443C22.9179 14.0259 18.8889 18.131 13.8519 18.5519Z" fill="currentColor"></path></svg><div class="cmd-options"><div>Select<kbd><svg viewBox="0 0 24 24"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg></kbd></div><div>Escape<kbd>⎋</kbd></div></div></footer></main></div><script src="/_next/static/chunks/webpack-34f7adf47207d9ac.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/media/16d983cf168ba446-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/media/364091edb3b3d89a-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n3:HL[\"/_next/static/media/3fb144034c194814-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n4:HL[\"/_next/static/media/48447be3ff22dbe5-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n5:HL[\"/_next/static/media/4dd1ca8167407b73-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n6:HL[\"/_next/static/media/682dafca9fbeb220-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n7:HL[\"/_next/static/media/a24f32beb6e7a786-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n8:HL[\"/_next/static/media/c5c10b6c79e7c8d3-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n9:HL[\"/_next/static/media/ce05ea4eccaa7865-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\na:HL[\"/_next/static/media/dce4e2eda8daaefa-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\nb:HL[\"/_next/static/css/e0fa7b65f7804beb.css\",\"style\"]\nc:HL[\"/_next/static/css/01869217fba2a643.css\",\"style\"]\nd:HL[\"/_next/static/css/3eabd8cac0b8578d.css\",\"style\"]\ne:HL[\"/_next/static/css/5e63ce5d1c715655.css\",\"style\"]\nf:HL[\"/_next/static/css/7bcd234d65739332.css\",\"style\"]\n10:HL[\"/_next/static/css/b96b20ee6eaeb372.css\",\"style\"]\n11:HL[\"/_next/static/css/101a228fb3455223.css\",\"style\"]\n12:HL[\"/_next/static/css/a9d83cc4194f86cd.css\",\"style\"]\n13:HL[\"/_next/static/css/9da5797e5fcf502a.css\",\"style\"]\n14:HL[\"/_next/static/css/4c1888751b86a8d9.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"15:I[9562,[],\"\"]\n17:I[5685,[],\"ClientPageRoot\"]\n18:I[2780,[\"5469\",\"static/chunks/5469-0184e94f7de55262.js\",\"5658\",\"static/chunks/5658-582c5908005b057f.js\",\"1310\",\"static/chunks/app/foundation/page-f564e823d0643de1.js\"],\"default\",1]\n19:I[8703,[],\"\"]\n1a:I[3751,[],\"\"]\n1b:I[7702,[\"5469\",\"static/chunks/5469-0184e94f7de55262.js\",\"5658\",\"static/chunks/5658-582c5908005b057f.js\",\"8287\",\"static/chunks/8287-e5b3491cbf25ed33.js\",\"6479\",\"static/chunks/6479-ef8ecd7df819adb8.js\",\"3185\",\"static/chunks/app/layout-85bbd3021cad7dbf.js\"],\"default\",1]\n1c:I[2282,[\"5469\",\"static/chunks/5469-0184e94f7de55262.js\",\"6479\",\"static/chunks/6479-ef8ecd7df819adb8.js\",\"1931\",\"static/chunks/app/page-3a51cf8181636895.js\"],\"default\"]\n1d:I[316,[\"5469\",\"static/chunks/5469-0184e94f7de55262.js\",\"6479\",\"static/chunks/6479-ef8ecd7df819adb8.js\",\"1931\",\"static/chunks/app/page-3a51cf8181636895.js\"],\"default\"]\n1e:I[5469,[\"5469\",\"static/chunks/5469-0184e94f7de55262.js\",\"9160\",\"static/chunks/app/not-found-283f76a8505881fe.js\"],\"\"]\n21:I[1395,[],\"\"]\n1f:{}\n22:[]\n"])</script><script>self.__next_f.push([1,"0:[\"$\",\"$L15\",null,{\"buildId\":\"13m1X9IEda3jW6uYKOuWj\",\"assetPrefix\":\"\",\"urlParts\":[\"\",\"foundation\"],\"initialTree\":[\"\",{\"children\":[\"foundation\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"foundation\",{\"children\":[\"__PAGE__\",{},[[\"$L16\",[\"$\",\"$L17\",null,{\"props\":{\"params\":{},\"searchParams\":{}},\"Component\":\"$18\"}],[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/7bcd234d65739332.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b96b20ee6eaeb372.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/101a228fb3455223.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/a9d83cc4194f86cd.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/9da5797e5fcf502a.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"5\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/4c1888751b86a8d9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]],null],null]},[[null,[\"$\",\"$L19\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"foundation\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L1a\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]],null],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e0fa7b65f7804beb.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/01869217fba2a643.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/3eabd8cac0b8578d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/5e63ce5d1c715655.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L1b\",null,{\"children\":[\"$\",\"$L19\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L1a\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"$L1c\",null,{\"layout\":\"home\",\"children\":[\"$\",\"$L1d\",null,{\"columns\":1,\"gapBlock\":\"large\",\"paddingInline\":\"large\",\"paddingBlock\":\"large\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"heading-medium\",\"children\":\"404 - Page Not Found\"}],[\"$\",\"$L1e\",null,{\"href\":\"/\",\"children\":\"Go back\"}]]}]}],\"notFoundStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/4c1888751b86a8d9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],\"params\":\"$1f\"}]],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$L20\"],\"globalErrorComponent\":\"$21\",\"missingSlots\":\"$W22\"}]\n"])</script><script>self.__next_f.push([1,"20:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Foundation — Green Design System\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence.\"}],[\"$\",\"link\",\"4\",{\"rel\":\"canonical\",\"href\":\"https://seb.io/foundation/foundation\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:title\",\"content\":\"Foundation — Green Design System\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:description\",\"content\":\"Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence.\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:image\",\"content\":\"https://seb.io/foundation/og?title=Foundation\"}],[\"$\",\"meta\",\"8\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:title\",\"content\":\"Foundation — Green Design System\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:description\",\"content\":\"Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence.\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:image\",\"content\":\"https://seb.io/foundation/og?title=Foundation\"}],[\"$\",\"meta\",\"12\",{\"name\":\"next-size-adjust\"}]]\n16:null\n"])</script></body></html>