The Themes Panel is your central hub for managing project-wide design properties. Located in the left sidebar, it contains two main sections for creating and organizing reusable design elements: Variables and Styles.

Variables

Variables provide a way to define and manage reusable design values, such as colors, numbers, or strings, that can be applied to components across your project. This ensures a consistent design system and allows for easy, project-wide updates. See the Tutorial on Themes & Variables.

• How it Works: A variable is a single key-value pair, such as a color, number, or string. Variables can be grouped into Collections for organization. When you apply a variable to a component property (e.g., a background color), its value is dynamically linked. If you change the variable's value later on, all components using it will automatically update.
• Editing & Updates: You can edit a variable's value from the Themes Panel. When a change is made, all components using that variable are updated automatically across the project.
• Management: You have the ability to create, edit, rename, delete, and collections and variables within a collection.
• Applying Variables: Variables can be applied to any component property that supports data binding via the "Attach Data" feature. This is typically accessed by clicking the + icon next to a property label in the Right Sidebar.

Design Variables vs. Environment Variables:

Shipcode has two distinct variable systems that serve different purposes.

• Design Variables are visual design tokens — colors, numbers, and strings used to style components — and are managed in the Themes Panel.
• Environment Variables are configuration values such as API keys, base URLs, and feature flags that change based on deployment context, and are managed in Project Settings.
• Design Variables are applied through the Appearance Panel. Environment Variables are accessed through Flows, FQL expressions, and action configurations.

Styles

Styles are reusable bundles of responsive text properties that you can create, name, and apply to text elements across your entire project. This feature ensures design consistency and allows you to make global typographic updates from a single location. See the Tutorial on Styles.

• How it Works: A style groups core font properties (Font Family, Size, Weight, Line Height, Letter Spacing) under a single name. When you apply a style to a text element from the Appearance Panel, all those properties are applied at once.
• Editing & Updates: When you edit a style from the Themes Panel, every element in your project using that style is updated automatically, saving you from making repetitive manual changes.
• Responsiveness: Styles are responsive. You can set unique property values for different breakpoints, and the style will correlate to the breakpoints that you have defined in your project.
• Overrides: You can apply additional typography properties (like Text Align or Text Decoration) to an individual text element as overrides without affecting the base style.
• Interaction States: Text Styles support Hover, Press, and Focus variants. You can define different typography properties for each interaction state. The correct variant is applied automatically at runtime based on user interaction.
• Detaching: You can "detach" a style from a component at any time. This allows you to make individual edits without affecting other instances of the style or receiving future updates.
• Management: Users can create, apply, edit, swap, and detach styles. There is currently no functionality to delete a style.
• Applying Style: Text styles can be applied to any text element by using the themes icon in the typography section next to the header in the themes panel