https://github.com/outsystems/outsystems-ui-kit
https://github.com/outsystems/outsystems-ui-kit
engineering snyk-professional-services
Last synced: 15 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/outsystems/outsystems-ui-kit
- Owner: OutSystems
- Created: 2019-02-19T14:38:41.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-04-06T17:19:03.000Z (almost 6 years ago)
- Last Synced: 2025-09-11T15:31:16.148Z (6 months ago)
- Topics: engineering, snyk-professional-services
- Homepage:
- Size: 30.7 MB
- Stars: 29
- Watchers: 14
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 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](https://www.outsystems.com/outsystems-ui) and preview all the variations on [Live Style Guide](https://outsystemsui.outsystems.com/ReactiveStyleGuidePreview/).
## Getting started
To be able to use and display the kit correctly, you should:
1. Download and install the most recent version of [Sketch](https://www.sketchapp.com/).
2. Download and install the [San Francisco Pro ](https://developer.apple.com/fonts) 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](http://getstark.co/) - Color contrast checker and colorblind simulator.
#### Workflow
[SketchRunner](https://sketchrunner.com/) - Quickly search and jump to any page, artboard, group or layer the document.
#### Color Palette
[Tint & Shade Generator](https://maketintsandshades.com/) - Produce tints (lighter variants) and shades (darker variants) of a given hex color.
#### File Maintenance
[Merge duplicate Symbols](https://github.com/oodesign/merge-duplicate-symbols) - Merge symbols with the same name.