Transform your basic components into a polished, intentional, and on-brand interface. This tutorial covers the essential styling tools in Shipcode.

• Use the Appearance Panel to apply styles to components.
• Adjust typography, size, spacing, and layout properties.
• Apply visual accents like borders and shadows.

This is where visual clarity, consistent spacing, and branded polish are achieved.

Understanding the Appearance Panel

The appearance panel will update based on the component that has been selected. In this image, the appearance panel is collapsed (by default the first section will be open).

The Appearance Panel (located on the right sidebar) is where all component styling is managed. Focus on these core tabs for basic styling:

• Typography: Controls fonts, size, line height, text alignment, and text color.
• Size: Manages Width and Height settings, typically using pixels (px) or percentages (%).
• Layout: Includes settings that control a component's alignment and behavior within its container, such as Align self.
• Spacing: Controls the separation of elements: Padding (inside space) and Margin (outside space).
• Effects: Tools for adding visual emphasis, such as Border, Corner Radius, and Box Shadow.

Styling Text Components

Begin styling by selecting the component you want to modify.

• Select a Text Component in one of two ways:
• • On the Canvas: Click directly on the component.
  • In the Structure Panel: Click the component name in the tree view—essential for selecting deeply nested or layered elements.

Once selected, the component will be outlined on the Canvas, and its styling options appear in the Appearance Panel.

• To Adjust Typography, click the paintbrush icon to open the Appearance Panel.
• • The Typography section is the first option available.
• Font weight and size: Adjust the text's boldness and character size.
• Line height: Control the vertical space between lines of text. Use a value of 1.2 to 1.5 times the font size for improved paragraph readability.
• Text alignment: Set how text is aligned within its container (left, center, or right).

📍📍📍 Note 📍📍📍

If the Typography section is not visible, ensure a Text Component is selected.

Define Component Size Click into the Size tab. Control how wide or tall your component should be.
Example: To make a text box 75% of its container’s width:

• Pixels (px): Use for a fixed size (e.g., an icon that must always be 24px wide).
• Percentages (%): Use for a flexible size that adjusts for different screen sizes (ideal for responsive design).
• Change the value in the Width field to 75.
• Type in the % sign. The value changes from pixels to a percentage.

Add Spacing Navigate to the Spacing tab.

• Padding: Adds space inside the component, between the content and its edge. Use Padding to keep text from touching the edges of a colored button.
• Margin: Adds space outside the component, separating it from other components. Use Margin to push a text block away from an adjacent image.

Review Layout Behavior

• The Layout tab controls how a component behaves inside its parent container. With the text box Width set to 75%, use the Align self setting to center the component within its container.