GitHub
FAQs
Find answers here to some of the most common questions about Shell DS.
Why Shell DS?
Our priorities are simple. We want to maintain consistent design and share common code throughout Shell’s digital products, so that design and development teams can focus on innovation and delivery without reinventing the wheel each time.
What is Shell DS?
Shell DS is a holistic design system that underpins consistent digital products and experiences at Shell. Explore Shell DS to access in-depth guidelines, component documentation, code and accessibility guidance, all in one place and ready to use.
Who is the team behind Shell DS?
A core team of designers, developers and UX writers have dedicated our collective expertise to building Shell DS. Contributions from Shell's development and Experience Design communities also continue to evolve Shell DS to reflect the excellence and relevance of digital products at Shell.
Questions
Most questions can be resolved by reading our documentation on components and guidelines. You can also read the FAQs below and if you still have questions, reach the SDS team via email.
Development
How do I report a bug?
If you have encountered a reproducible problem, then please open an issue in the GitHub repo. The Shell DS team will work to fix it. If you have found a fix for the issue, then please submit a Pull Request by following our contribution guidelines.
How do I access code?
You will need to be authenticated with Shell's organisation on GitHub, sede-enterprise. The repository readme file has instructions on how to install packages. If you don’t already have access to GitHub, follow the GitHub Portal page for getting access.
How do I resolve an issue with GitHub?
Direct all GitHub enquiries directly to the GitHub Support team, rather than the Shell DS team.
How do I request access to sede-enterprise?
Follow instructions listed in the DevKit portal page for getting GitHub access to Shell DS code repos.
Design
Are design files only in Figma, or can I use Sketch, Adobe Xd or others?
Design files are only in Figma. Everyone in Shell can view a file in Figma but editing permissions are only for designers, and access needs to be requested via ServiceNow.
How do I access Figma files?
Once you have access to Figma you can join Shell DS team in Figma. Search for Shell DS and join the Shell DS Frameworks and Foundations teams. Follow the steps on our Design page for guidance on how to do this.
Can I contribute to the design system?
Yes, we encourage your contributions and feedback, read more about how to do that in contribution guidelines.
The component I need isn't in the design system, what do I do?
It is not acceptable to go off-brand, by adapting components or fabrics (colour, typography). Consistency of the Shell colour palette and accessibility considerations are baked into Shell DS to ensure cohesion.
However, if you need to suggest a new component, go to the Component Requests file in Figma and create an editable branch. Once you have added your ideas or requirements you can drop a comment to start a discussion with one of the Shell DS team.
How do I report changes I’ve made?
If you are a designer working on Shell DS Figma components and would like to report changes, reach out to Shell DS Team via email.
Alternatively, if the change is related to an existing component, you can also 'create branch' in Figma for the respective component and document the changes. Once you have updated the branch you can submit it for review by the Shell DS product team. They will review the changes and merge it to the main branch once those changes are approved.
Accessibility
How do I report an inaccessible component?
Firstly, refer to our accessibility guidelines. If a component fails to meet accessibility standards, then create a GitHub issue by describing the problem and its reproduction steps. The Shell DS team will aim to resolve the issue quickly and efficiently.
Where do I get assistance with accessibility?
To ask a general question or report an accessibility issue, please email the accessibility team.
Other FAQs
I'm building with Shell DS, which browsers should I use?
Our components work best with Chrome, Firefox and Safari.
Which language is used for components?
Shell DS offers components written in React, a JavaScript library for building user interfaces. There are two libraries available, one intended for web-only, and another for native mobile using React Native.