Global Editors

The Global Editors are web tools that allow you to design typography elements, color themes, spacing rules, buttons, and form elements directly in the browser, and export custom style (SCSS code) compatible with the CodyHouse Framework.

✅ When you save your changes, the components are updated with the style you set in the Editors.

Explore the Global Editors

🔍 On this page:

1. Colors
2. Typography
3. Spacing
4. Buttons
5. Forms

Colors #

The Color Editor generates color palettes and themes compatible with the CodyHouse Framework. You can use it to set the colors of your design system taking advantage of a visual approach, then copy the generated SCSS and paste it into the 📁 custom-style/_colors.scss file of the framework.

Typography #

The Typography Editor helps you set the typography of your web project. You can use it for font pairing, to generate the type scale and set responsive rules. Paste the generated code into the 📁 custom-style/_typography.scss file of the framework.

Set the basic typography rules:

How to create and edit the typography scale:

How to use the Line-height Crop tool:

Spacing #

The Spacing Editor allows you to create a spacing system in SCSS. You can use it to generate a spacing scale and set responsive rules, then copy the exported code into the 📁 custom-style/_spacing.scss file.

Buttons #

The Buttons Editor allows you to design and export a system of SCSS buttons. The code generated should be pasted into the 📁 custom-style/_buttons.scss file.

Forms #

The Forms Editor allows you to design and export form elements. The code generated should be pasted into the 📁 custom-style/_forms.scss file.