Getting Started

Tyler Forge is the design system for Tyler applications. It gives designers and developers the same components, tokens, and patterns, so a design built with Forge translates into code with little interpretation. These pages cover the foundations to follow when you design a Forge screen by hand.

Foundations

• Color: theme tokens for surfaces, text, accents, status, and borders.
• Typography: the type scale and the hierarchy for page, container, and section titles.
• Spacing: the spacing scale and how to space elements by relationship.
• Layout: the application frame, containers, and common page patterns.
• Iconography: when to use icons, and how to size and label them.

Principles

• Start from what exists. Begin with the app layout frame and an existing block. Blocks are the reference implementations developers build from, so a design based on one hands off almost one to one.
• Use components, not lookalikes. If Forge has a component for something, design with that component and its real states, rather than drawing a custom version.
• Use tokens for every value. Colors, type styles, spacing, and shape all come from tokens. A value that isn’t a token becomes one-off code.
• Keep hierarchy clear. One primary action per view, container titles smaller than the page title, and surfaces that separate content from the page behind it.

Before handoff

• Every color, type style, and spacing value maps to a Forge token.
• Components use their real names, variants, and states, so developers can find them in the component docs.
• Screens are designed at a desktop width and a phone width.
• Icon-only buttons have a name, and status never depends on color alone.