Skip to content
Salesforce Lightning Design System
JavaScript CSS Ruby
Branch: master
Clone or download
brandonferrua fix(font-size): Backport #3832 to fix regression on body font size (#…

* fix(font-size): Backport #3832 to fix regression on body font size

* Fix version in config
Latest commit d08e33c May 23, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.scss-linters Add custom linter to prevent breaking the scoped build Mar 4, 2016
assets fix(webfonts): Further optimize WOFF fonts (#3738) May 2, 2019
design-tokens chore(tokens): GA brand tokens (#3802) May 3, 2019
scripts fix(infrastructure): Set VNU to not treat warnings as errors (#3755) Apr 17, 2019
shared fix(ie): pass prop to CodeView (#3815) May 6, 2019
ui fix(font-size): Backport #3832 to fix regression on body font size (#… May 23, 2019
.eslintignore Ignore the design-tokens directory Sep 2, 2016
.eslintrc.yml chore(eslint): Update prettier and eslint to prevent conflicting rules Sep 19, 2018
.gitattributes Initial commit Sep 4, 2015
.prettierignore fix(builder-header): resolve ie11 flex issue (#3520) Sep 19, 2018
.stylelintrc.yml chore(lint): break build on lint errors Oct 17, 2017
.stylestatsrc Compare local CSS stats with the public version Mar 3, 2016
LICENSE-font.txt Add license files at the root of the project Feb 16, 2017
LICENSE.txt Update (#3539) Oct 5, 2018
Procfile Remove Heroku Babel compilation Dec 14, 2015 chore(guidelines): Update README and other guides Jan 10, 2019 feat(release-notes): Implement script to parse partials and compile s… Dec 10, 2018 fix(font-size): Backport #3832 to fix regression on body font size (#… May 23, 2019
Salesforce_CLA.pdf Initial commit Sep 4, 2015
gulpfile.js fix(utilities): Update gulp script to add release notes for utilities… Jan 11, 2019
jest.helpers.js fix(build): correctly update snapshots Mar 5, 2018
package.json fix(font-size): Backport #3832 to fix regression on body font size (#… May 23, 2019

Salesforce Lightning Design System Build Status

Welcome to the Salesforce Lightning Design System brought to you by Salesforce UX.

  • Tailored for building Salesforce apps: Using the Lightning Design System markup and CSS framework results in UIs that reflect the Salesforce Lightning look and feel.
  • Continuously updated: As long as you’re using the latest version of the Lightning Design System, your pages are always up to date with Salesforce UI changes.

Quick start

  1. Clone the project with git clone
  2. Run npm install in the root design-system folder.
  3. Run npm start to launch the Previewer.
  4. Visit http://localhost:3003/local/preview

Having trouble getting these steps to work on your machine? Follow the troubleshooting guide.


previewer blueprint/variant/modifier selection

The previewer is an interactive tool for creating blueprints.

It runs at the designated url on startup and is the primary means of viewing your work - it will live update as you make changes.

You can choose the blueprint, variant, and modifiers to preview as well as background color and screen size. It also previews the sass docs.

Everything in the design system is driven by annotations and the previewer is no different. To see any work in the previewer, you must add annotations to your code.


See the annotations guide.

Blueprint Documentation

See the blueprint documentation guide.


npm start

Start the Lightning Design System preview app.

npm run gulp -- lint

Lint the code base for syntax and stylistic errors.

# Lint indentation, Sass, JavaScript files
npm run gulp -- lint

# Lint languages independently
npm run gulp -- lint:sass
npm run gulp -- lint:javascript
npm run gulp -- lint:javascript:test
npm run gulp -- lint:spaces
npm run gulp -- lint:html

# HTML5 validation
npm run gulp -- lint:vnu
# HTML5 validation on comma separated blueprint names
npm run gulp -- lint:vnu --components button,path,trees

# a11y validation
npm run gulp -- lint:a11y
# a11y validation on comma separated blueprint names
npm run gulp -- lint:a11y --components button,path,trees

# Lint examples using vnu, aXe, slds validation, and HTML5 validation
npm run gulp -- lint:examples

Pull Request Checks

To run all the checks a pull request will run in Travis use the following command.

# To run every check against all blueprints
npm run pr-checks

# To run every check but target certain blueprints for slow checks like aXe and vnu
npm run pr-checks -- --components button,path,trees


npm run build && npm run dist

Generate the Lightning Design System into the .dist directory.

npm run gulp -- styles

Compile Sass to CSS into .assets/styles.

npm run gulp -- clean

Delete temporary build and local files.


npm run gulp -- styles:stats: Useful stats about the project's deliverables.


npm test: run all tests


See the troubleshooting guide.

Contributing to the code base

See the contributing guide.


Got feedback?

Please open a new GitHub Issue.

You can’t perform that action at this time.