v1.0.0-beta.1
We are proud to announce the first scaled down version of a new documentation site for Green Design System
diff --git a/404.html b/404.html index bd4b741d4..aec15e22b 100644 --- a/404.html +++ b/404.html @@ -1 +1 @@ -
CMD+K
on mac\\n\\n### Light/Dark mode\\n\\nThe site support both light mode and dark mode and listens to the users preference. It can be toggled on the site and this override the system preference if wanted.\\n","code":"var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},o=(t,e,i,a)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let s of g(e))!p.call(t,s)&&s!==i&&r(t,s,{get:()=>e[s],enumerable:!(a=u(e,s))||a.enumerable});return t};var b=(t,e,i)=>(i=t!=null?l(m(t)):{},o(e||!t||!t.__esModule?r(i,\\"default\\",{value:t,enumerable:!0}):i,t)),x=t=>o(r({},\\"__esModule\\",{value:!0}),t);var d=f((k,h)=>{h.exports=_jsx_runtime});var D={};w(D,{default:()=>j,frontmatter:()=>y});var n=b(d()),y={title:\\"v1.0.0-beta.1\\",version:\\"1.0.0-beta.1\\",date:new Date(17023392e5),global_id:\\"log20\\",summary:\\"We are proud to announce the first scaled down version of a new documentation site for Green Design System\\"};function c(t){let e=Object.assign({p:\\"p\\",h2:\\"h2\\",a:\\"a\\",h3:\\"h3\\",ul:\\"ul\\",li:\\"li\\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\\"We are proud to announce the first version of a new documentation site for Green Design System. We\'ve been working hard on getting this out the door and we couldn\'t wait to show what we\'ve been working on.\\"}),`\\n`,(0,n.jsx)(e.p,{children:\\"It\'s still early in the development of design and code in Green Design System and most is a subject to change but we wanted to show where this is heading and where we are right now.\\"}),`\\n`,(0,n.jsx)(e.p,{children:\\"The site is built using Next.JS as a static site to be blazingly fast.\\"}),`\\n`,(0,n.jsx)(e.h2,{id:\\"features-included-in-this-first-release\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#features-included-in-this-first-release\\",children:\\"Features included in this first release\\"})}),`\\n`,(0,n.jsx)(e.h3,{id:\\"component-pages\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#component-pages\\",children:\\"Component pages\\"})}),`\\n`,(0,n.jsxs)(e.ul,{children:[`\\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\\"/component/button\\",children:\\"Button\\"})}),`\\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\\"/component/input\\",children:\\"Input\\"})}),`\\n`]}),`\\n`,(0,n.jsx)(e.p,{children:\\"Components pages contains general guidelines, design guidelines, code guidelines, ux text guidelines and accessibility guidelines. In this first release not all guidelines are written.\\"}),`\\n`,(0,n.jsx)(e.h3,{id:\\"search\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#search\\",children:\\"Search\\"})}),`\\n`,(0,n.jsxs)(e.p,{children:[\\"A search functionality to search through the content on the site. It can be accessed in the top right of the navbar or by pressing \\",(0,n.jsx)(\\"code\\",{children:\\"CMD+K\\"}),\\" on mac\\"]}),`\\n`,(0,n.jsx)(e.h3,{id:\\"lightdark-mode\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#lightdark-mode\\",children:\\"Light/Dark mode\\"})}),`\\n`,(0,n.jsx)(e.p,{children:\\"The site support both light mode and dark mode and listens to the users preference. It can be toggled on the site and this override the system preference if wanted.\\"})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(c,t)})):c(t)}var j=v;return x(D);})();\\n;return Component;"},"_id":"changelog/1.0.0-beta.1.mdx","_raw":{"sourceFilePath":"changelog/1.0.0-beta.1.mdx","sourceFileName":"1.0.0-beta.1.mdx","sourceFileDir":"changelog","contentType":"mdx","flattenedPath":"changelog/1.0.0-beta.1"},"type":"Changelog","url_path":"/changelog/1.0.0-beta.1","pathSegments":[{"order":0,"pathName":"1.0.0-beta.1"}],"last_edited":"2024-02-15T14:31:24.244Z"}]'),V=JSON.parse('[{"global_id":"buttonaccessibility","title":"Accessibility","date":"2024-02-08T00:00:00.000Z","body":{"raw":"\\n## Accessibility\\nAll values we measure need to pass in order to give a check on the accessibility on all our components.\\n\\n### Review\\n**Review button, webcomponent 2023-12-11 - FAILED**\\n- Contrast: Passed\\n- Aria-label: Passed\\n- Keyboard navigation: **Failed** Green Design System is the design system for Skandinaviska Enskilda Banken to make it easier and faster to build beautiful digital products and experiences under the SEB brand.
Green Design System is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.
In order to have velocity when building digital products and keep a cohesive user experience cross channels and platforms designers and developers should use the Green Design System.
By using pre-built components for design tools and front-end frameworks the time teams spend designing and building is minimized. Instead of spending time on building and re-building the same components in multiple teams, teams can spend that time on addressing specific user needs to improve user experience.
The design system is called Green as an homage to SEB being viewed as the green bank with green as a primary colour for the brand and the bank. The bank also plays a great role in the transition to a net zero society and has a focus on sustainability and helpingit's clients to become more sustainable. The design system initative was also seen as a Greenfieldproject.
The Green Design System is a federated design system where the Green Design System Team is the central team who is dedicated to maintain the design system and other team at SEB or external contributors contribute to the design system with insights, design andcode.
Navigating the world of Green Design System involves more than just design and code. Delve into our Figma libraries, explore diverse code implementations, and leverage our comprehensive documentation. We're committed to supporting your journey with coaching sessions tailored for both design intricacies and development challenges.
Figma is our go to design tool and we maintain multiple Figma libraries, components and variables.
Green supports both Angular and React but the core is built with Webcomponents using Lit.
We use this site to document how to use our design kits and coded components as well as our design patterns and general user interface guidelines.
We know that learing and using a new system can be hard and we are here to help and make your journey in the design system a more pleasant one.
Some problems that you run into can be too large to use your keyboard to explain so we have ongoing coaching sessions at your disposal. We have two different coaching session regarding design and development at SEB: Green Coaching and CX Coaching. Both of these meetings are slot based meeting where you bring your questions and problems and discuss them with members from the Green Design System team.
Green Design System is built on contributions from +
Green Design System is the design system for Skandinaviska Enskilda Banken to make it easier and faster to build beautiful digital products and experiences under the SEB brand.
Green Design System is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.
In order to have velocity when building digital products and keep a cohesive user experience cross channels and platforms designers and developers should use the Green Design System.
By using pre-built components for design tools and front-end frameworks the time teams spend designing and building is minimized. Instead of spending time on building and re-building the same components in multiple teams, teams can spend that time on addressing specific user needs to improve user experience.
The design system is called Green as an homage to SEB being viewed as the green bank with green as a primary colour for the brand and the bank. The bank also plays a great role in the transition to a net zero society and has a focus on sustainability and helpingit's clients to become more sustainable. The design system initative was also seen as a Greenfieldproject.
The Green Design System is a federated design system where the Green Design System Team is the central team who is dedicated to maintain the design system and other team at SEB or external contributors contribute to the design system with insights, design andcode.
Navigating the world of Green Design System involves more than just design and code. Delve into our Figma libraries, explore diverse code implementations, and leverage our comprehensive documentation. We're committed to supporting your journey with coaching sessions tailored for both design intricacies and development challenges.
Figma is our go to design tool and we maintain multiple Figma libraries, components and variables.
Green supports both Angular and React but the core is built with Webcomponents using Lit.
We use this site to document how to use our design kits and coded components as well as our design patterns and general user interface guidelines.
We know that learing and using a new system can be hard and we are here to help and make your journey in the design system a more pleasant one.
Some problems that you run into can be too large to use your keyboard to explain so we have ongoing coaching sessions at your disposal. We have two different coaching session regarding design and development at SEB: Green Coaching and CX Coaching. Both of these meetings are slot based meeting where you bring your questions and problems and discuss them with members from the Green Design System team.
Green Design System is built on contributions from everyone. Product teams at SEB have the best knowledge what their product's end user needs. That's why it's vital that everyone contributes with what's possible. That can be everything from insights regarding a specific component or pull requests with a complete feature or a design updates in a Figma branch.
We want to hear from you so don't be a stranger. You can - always reach out to us in the following ways:
We are proud to announce the first scaled down version of a new documentation site for Green Design System
We are proud to announce the first scaled down version of a new documentation site for Green Design System
We are proud to announce the first version of a new documentation site for Green Design System. We've been working hard on getting this out the door and we couldn't wait to show what we've been working on.
+We are proud to announce the first version of a new documentation site for Green Design System. We've been working hard on getting this out the door and we couldn't wait to show what we've been working on.
It's still early in the development of design and code in Green Design System and most is a subject to change but we wanted to show where this is heading and where we are right now.
The site is built using Next.JS as a static site to be blazingly fast.
A search functionality to search through the content on the site. It can be accessed in the top right of the navbar or by pressing CMD+K
on mac
The site support both light mode and dark mode and listens to the users preference. It can be toggled on the site and this override the system preference if wanted.
The site support both light mode and dark mode and listens to the users preference. It can be toggled on the site and this override the system preference if wanted.
Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.
Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.
A button serve as an interactive element that enables users to perform an action or make a choice with a simple click or tap. To decide which kind of button/buttons and putting them in the right order is key to make sure users know how to take the right action. A good rule of thumb is to use only one primary action in each context.
Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.
Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.
All values we measure need to pass in order to give a check on the accessibility on all our components.
Review button, webcomponent 2023-12-11 - FAILED
@@ -135,18 +135,18 @@<!-- gds-button with visible text. Visible text acts as label by default. -->
-<gds-button>Label text</gds-button>
-
-<!-- gds-button with unique label. Label attribute overrides visible text. -->
-<gds-button label=”Apply for A”>Apply</gds-button>
-
-<!-- gds-button with only visible icon. Label attribute must be provided,
- since there is no visible text. -->
-<gds-button label=”Close menu”> <gds-icon name=”x”></gds-icon></gds-button>
<!-- gds-button with visible text. Visible text acts as label by default. -->
+<gds-button>Label text</gds-button>
+
+<!-- gds-button with unique label. Label attribute overrides visible text. -->
+<gds-button label=”Apply for A”>Apply</gds-button>
+
+<!-- gds-button with only visible icon. Label attribute must be provided,
+ since there is no visible text. -->
+<gds-button label=”Close menu”> <gds-icon name=”x”></gds-icon></gds-button>
Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.
Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.
+const multiply = (a, b) => a * b
+multiply(2, 2) // 4
+console.log("test")
+
The defaut button har the prio primary and the style normal.
-<gds-button>Send payment</gds-button>
<gds-button>Send payment</gds-button>
Buttons exist in three different prios, Primary, Secondary and Tertiary
-<gds-button variant="primary">Send payment</gds-button>
-<gds-button variant="secondary">Cancel</gds-button>
-<gds-button variant="tertiary">More</gds-button>
<gds-button variant="primary">Send payment</gds-button>
+<gds-button variant="secondary">Cancel</gds-button>
+<gds-button variant="tertiary">More</gds-button>
Each prio button can have one of three styles, Neutral, Positive and Negative
- <!-- Primary -->
- <gds-button set="neutral">Submit</gds-button>
- <gds-button set="positive">Approve</gds-button>
- <gds-button set="negative">Revoke</gds-button>
-
- <!-- Secondary -->
- <gds-button variant="secondary" set="neutral">Submit</gds-button>
- <gds-button variant="secondary" set="positive">Approve</gds-button>
- <gds-button variant="secondary" set="negative">Revoke</gds-button>
-
- <!-- Tertiary -->
- <gds-button variant="tertiary" set="neutral">Submit</gds-button>
- <gds-button variant="tertiary" set="positive">Approve</gds-button>
- <gds-button variant="tertiary" set="negative">Revoke</gds-button>
-
<!-- Primary -->
+ <gds-button set="neutral">Submit</gds-button>
+ <gds-button set="positive">Approve</gds-button>
+ <gds-button set="negative">Revoke</gds-button>
+
+ <!-- Secondary -->
+ <gds-button variant="secondary" set="neutral">Submit</gds-button>
+ <gds-button variant="secondary" set="positive">Approve</gds-button>
+ <gds-button variant="secondary" set="negative">Revoke</gds-button>
+
+ <!-- Tertiary -->
+ <gds-button variant="tertiary" set="neutral">Submit</gds-button>
+ <gds-button variant="tertiary" set="positive">Approve</gds-button>
+ <gds-button variant="tertiary" set="negative">Revoke</gds-button>
+
Buttons exist in three different prios, Primary, Secondary and Tertiary
-<gds-button variant="primary"><gds-icon slot="lead" name="send" />Send payment</gds-button>
-<gds-button variant="secondary"><gds-icon slot="trail" name="arrow-up" />Upload</gds-button>
-<gds-button variant="primary" set="positive"><gds-icon slot="lead" name="arrow-down" />Download</gds-button>
<gds-button variant="primary"><gds-icon slot="lead" name="send" />Send payment</gds-button>
+<gds-button variant="secondary"><gds-icon slot="trail" name="arrow-up" />Upload</gds-button>
+<gds-button variant="primary" set="positive"><gds-icon slot="lead" name="arrow-down" />Download</gds-button>
Buttons can be small, medium or large. The default size is medium.
-<gds-button size="small">Small</gds-button>
-<gds-button>Medium</gds-button>
-<gds-button size="large">Large</gds-button>
<gds-button size="small">Small</gds-button>
+<gds-button>Medium</gds-button>
+<gds-button size="large">Large</gds-button>
If a single gds-icon is the only child of a button, it will render as a circular icon button.
-<gds-button size="small"><gds-icon name="arrow" /></gds-button>
-<gds-button><gds-icon name="arrow" /></gds-button>
-<gds-button size="large"><gds-icon name="arrow" /></gds-button>
<gds-button size="small"><gds-icon name="arrow" /></gds-button>
+<gds-button><gds-icon name="arrow" /></gds-button>
+<gds-button size="large"><gds-icon name="arrow" /></gds-button>
We don't encourage to use components with a disabled state but the button can be disabled if needed
-<gds-button variant="primary" disabled>Send payment</gds-button>
-<gds-button variant="secondary" disabled>Cancel</gds-button>
-<gds-button variant="tertiary" disabled>More</gds-button>
<gds-button variant="primary" disabled>Send payment</gds-button>
+<gds-button variant="secondary" disabled>Cancel</gds-button>
+<gds-button variant="tertiary" disabled>More</gds-button>
Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.
Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.
Each button type has fully rounded corners. This creates a cohesive and consistent visual language within our design system. The differentiation in colour, border, and background helps users to easily distinguish between primary, secondary, and tertiary actions, contributing to a more intuitive and user-friendly interface.
Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.
Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.
The button text should answer the question "What is happening?" when the user clicks it, but if the purpose of the button is to convert, it should answer the question "What do I get?".
You should primarily use verbs in the imperative mood, which is the form of the verb @@ -221,4 +221,4 @@
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
The input fields come in two sizes.
All input fields need a label. Keep the label short and to the point.
All input fields need a label. Keep the label short and to the point.
Use this to explain how to fill the field. This may be an instruction of how to count or what to include. Limit the instructions to details that all or most users need.
We can provide three types of help in relation to input fields
Text missing...
Used to perform comparative calculations next to the field. For example if users fill out salary after taxes, the dynamic information may show the salary before taxes.
Text missing...
Used to perform comparative calculations next to the field. For example if users fill out salary after taxes, the dynamic information may show the salary before taxes.
Sometimes you may want to output data from the system inside a form, but it's hard from the system an may not be changed. Then we output that data in plain text, formatted the same way as the form in general. Don't use disabled fields.
Input text can be used with auto complete to help users who have limited literacy or who write in a foreign language.Sometimes you may want to output data from the system inside a form, but it's hard from the system an may not be changed. Then we output that data in plain text, formatted the same way as the form in general. Don't use disabled fields.
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
This page will be updated with information soon.
This page will be updated with information soon.
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
This page will be updated with information soon.
This page will be updated with information soon.
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
This page will be updated with information soon.
This page will be updated with information soon.
Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
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.
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.
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.
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.
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.
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.
In the world of design, confidence shines through +
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.
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.
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.
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.
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.
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.
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.
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.
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.
The Green Design System ensures a unified visual experience. Empowering designers and developers with versatile, accessible and coherent components.
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.
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.
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.
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.
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.
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.
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.
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.
The Green Design System ensures a unified visual experience. Empowering designers and developers with versatile, accessible and coherent components.
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.
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.
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.
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.
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.
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.
Work in progress.
Work in progress.
Green Design System is more than a polished user interface, its places the user at the very forefront of design, usability and accessibility.
Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.
Green Design System is more than a polished user interface, its places the user at the very forefront of design, usability and accessibility.
A framework with accessibility and usability rooted at its core, Green Design System empowers designers and developers to create with speed and precision. It ensures a seamless and consistent visual experience across our entire product suite.
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
A framework with accessibility and usability rooted at its core, Green Design System empowers designers and developers to create with speed and precision. It ensures a seamless and consistent visual experience across our entire product suite.
Regardless of where, when or how the customer meets us, the experience of SEB must be the same because each meeting contributes to how we are perceived. A positive customer experience opens the door to new business.
This is particularly important in texts aimed at customers. Mistakes affect the reader's concentration on the content and understanding of the text. Because our texts are correct, our credibility with customers and other visitors (=potential customers) increases. We follow:
SEB's Written ID is our guiding light, and it forms the basis for all our communication, including UX writing.
If you need to translate Swedish texts into English, the bank has agreements with, among others, Språkkonsulterna and Lionbridge. Contact them directly to order a translation.
When you contact them to ask if they are available to take on the assignment, they want to know approximately how many words are to be translated. They also need to know the name of who will pay the invoice before you send the translation document.
When you need help with tone-of-voice, instructions, vocabulary or a UX writer to work with, please don’t hesitate to contact the UX writing team. Reach out in the Teams channels UX writing in Green Design System or UX writing in CX Community, or if you already have a contact or dedicated writer for your team or product, simply contact that person.
Regardless of where, when or how the customer meets us, the experience of SEB must be the same because each meeting contributes to how we are perceived. A positive customer experience opens the door to new business.
This is particularly important in texts aimed at customers. Mistakes affect the reader's concentration on the content and understanding of the text. Because our texts are correct, our credibility with customers and other visitors (=potential customers) increases. We follow:
SEB's Written ID is our guiding light, and it forms the basis for all our communication, including UX writing.
If you need to translate Swedish texts into English, the bank has agreements with, among others, Språkkonsulterna and Lionbridge. Contact them directly to order a translation.
When you contact them to ask if they are available to take on the assignment, they want to know approximately how many words are to be translated. They also need to know the name of who will pay the invoice before you send the translation document.
When you need help with tone-of-voice, instructions, vocabulary or a UX writer to work with, please don’t hesitate to contact the UX writing team. Reach out in the Teams channels UX writing in Green Design System or UX writing in CX Community, or if you already have a contact or dedicated writer for your team or product, simply contact that person.