danielmarquespt / digital-ui

Fork from OutSystems UI for the Design Systems of OutSystems Digital Team

OutSystems UI Kit

A complete collection of Styles, UI Patterns, Widgets, and Layouts, crafted on Sketch and based on the OutSystems UI framework.

---

Who is this for?

Anyone with basic design skills can use the kit as a starting point for your design process. Customize and set up your basic styles, grab a layout and compose it with the patterns and elements you need in your next web project.

OutSystems UI Kit is made to boost up your workflow with components ready-to-use without restricting your creative freedom.

Find all the UI Kit components on the OutSystems UI website and preview all the variations on Live Style Guide.

Getting started

To be able to use and display the kit correctly, you should:

1. Download and install the most recent version of Sketch.
2. Download and install the San Francisco Pro fonts (Display and Text).

What's included

This Kit contains the following pages:

• Styles All the granular elements such as Text Styles, Color Palettes, Shadow Levels. Making changes to these elements will affect all the components across the document, being an excellent starting point to customize and set up your project according to your client's brand.

• UI Patterns and Widgets Collection of the components supported by OutSystems UI to create your web responsive apps. Every component can be easily customized and extended.

• Layouts List of structures with the standard responsive screen sizes, that you can populate with the components available to quick start drawing your interfaces.

• Symbols Native Sketch page that contains symbols to be reused across the document.

How to contribute

The OutSystems UI team welcomes all the help, feedback or ideas, in order to improve this design resource. Please add any bugs or feature requests under the Issues tab of this repository.

Suggested Sketch plugins

The following plug-ins facilitate the work with this kit:

Accessibility

Stark - Color contrast checker and colorblind simulator.

Workflow

SketchRunner - Quickly search and jump to any page, artboard, group or layer the document.

Color Palette

Tint & Shade Generator - Produce tints (lighter variants) and shades (darker variants) of a given hex color.

File Maintenance

Merge duplicate Symbols - Merge symbols with the same name.