Getting started

Developing

Front-end developers at Svenska Spel write kickass, world-class code. To keep the game factory of dreams going 24 hours a day all year long we got a great set of tools, patterns, and standards that we always must obey.

Our unified Design Language and System makes sure your design is consistent and professional on all digital platforms, which improves the user experience in every product. By using pre-defined design elements, you save time and boost productivity ultimately freeing up time for creative problem-solving instead of repetitive design work.

Latest updated components

Progress

Dialog

Datepicker

Dev standards

Svenska Spel's Code Writing Guidelines. Learn our approach to code structure and our adaptations for our development stack.

Utility

Discover Svenska Spel's CSS Utility Classes: Learn about our handy set of CSS classes designed for quick and enhancing HTML element functionality with ease.

Digital enviroment

Svenska Spels digital environment has adapted to the principles of Material Design and reflects these qualities in how surfaces are displayed and move across the UI.

Repositories

Our development platform, known as Trinidad, offers comprehensive documentation to kickstart your development journey.

Trinidad-SDK

Trinidad UI

UI components

A set of shared ui-components managed by DesignTech, aiming to keep the design of Svenska Spel together. If you are an external team who needs access to the react UI-components contact us .

UI Components

Component development

When developing a new component that will be shared among multiple services there are some things to take into consideration.

Contribution

Check out Svenska Spel Design System contribution model to find out if you are contributing with a shared component for the Design System or a snowflake for a specific business area.

What repo should the component live in?

Whether you are developing a new component for the design system, or a snowflake in a separate repo, everything below must be fulfilled in order for the component to be included in Svenska Spel's technology stack.

Check out Svenska Spel Design System contribution model to find out if you are contributing with a shared component for the Design System or a snowflake for a specific business area.

Development checklist

When developing a new component, it is important to take into account keyboards, effects, animations, code standards and support for branding.

Keyboard: Screenreader touch-areas etc. WCAG 2.1AA
Effects: Mouse-up/down, touch, hover state/clicked state, error, and click effects.
Animations: Develop in close contact with UX and follow the principles for movement that can be found in the brand manual for respective business area. Animations are different in speed and feel depending on business area. Use the property customer to build different animations for Neutral (Svenska Spel), tur (Svenska Spel tur) and sport (Svenska Spel Sport & Casino).
Code standard: Check out trinidad-SDK for more info.
Branding: For shared UI-components there should at least be branding for Neutral (Svenska Spel), tur (Svenska Spel tur) and sport (Svenska Spel Sport & Casino). In most cases there should also be support for inverted branding that can be used on dark surfaces.

Accessibility checklist

By law, Svenska Spel must comply to WCAG 2.1AA.

Here is a general checklist of accessibility measures along with descriptions of how some people with disabilities may be affected.

Include alternative text for images: A person with blindness or a major vision problem may be using a screen reader to interpret what’s on the page
Enable text resizing: Resizable text helps people with low vision make a page’s text larger, so they have an easier time reading it.
Accommodate keyboard navigation: A person who doesn’t have the hand dexterity to use a mouse may be using arrow keys or assistive technology (like a sip-and-puff device or voice-controlled navigation).
Ensure proper color contrast: Some people with vision disabilities can only read the text.
Make sure the html output has correct semantics.
When building custom elements make sure to use WAI-aria correctly to help screen readers.

Guidelines for development

Documentation

All components must be well documented in readme.md but also in Svenska Spels Design System or in the styleguide for the respective business area if it is a snowflake.

Live examples

Show a few live examples in The Design System or if it's a snowflake, show examples in the Styleguide of that business area.

Options

Document all methods, options and features.

API's

Show APIs for all supported frameworks.

UX/Design principles

Team up with UX/design and write design documentation and principles from an UX/design perspective.

Code standards

Read more about code standards and how to get started developing in Trinidad.

Trinidad-SDK

Our toolbox

The core of our Design System, comprising essential components, patterns, and guidelines for cohesive product development.

Foundation

Our Design System's foundations provide the building blocks for consistent and accessible design. It includes typography, color, spacing, and other fundamental design principles that maintain a unified look and feel across products.

Components

Dive into our library of reusable components. From buttons to forms, these components are designed with consistency and flexibility in mind. This means faster development, fewer design inconsistencies, and a smoother user experience.

Icons

Colors

Typography

Patterns

Explore common design solutions and best practices within our Patterns section. These established design patterns help solve recurring user experience challenges, ensuring your products are intuitive and user-friendly.

UI Library

Our UI Library is where you can access the design assets you need, whether you're using design software, development frameworks, or other tools. This makes it easy to create on-brand designs and maintain consistency.