A complete collection of Styles, UI Patterns, Widgets, and Layouts, crafted on Sketch and based on the OutSystems UI framework.
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.
To be able to use and display the kit correctly, you should:
- Download and install the most recent version of Sketch.
- Download and install the San Francisco Pro fonts (Display and Text).
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.
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.
The following plug-ins facilitate the work with this kit:
Stark - Color contrast checker and colorblind simulator.
SketchRunner - Quickly search and jump to any page, artboard, group or layer the document.
Tint & Shade Generator - Produce tints (lighter variants) and shades (darker variants) of a given hex color.
Merge duplicate Symbols - Merge symbols with the same name.