## Styling Your Stripe App

This section provides guidance on styling your Stripe App to ensure a consistent and high-quality user experience within the Stripe Dashboard.

### Design Tokens and Consistency

Stripe provides a set of **design tokens** that you should utilize when styling your app. These tokens represent predefined values for colors, typography, spacing, and more. By using these tokens, you ensure that your app's visual appearance aligns with the Stripe Dashboard's design language, creating a seamless experience for users.

### Styling Components

The `@stripe/ui-extension-sdk` provides components that support custom styling, primarily through the `css` prop.

*   **`Box` and `Inline` Components:** These components act as styleable containers, similar to HTML `div` and `span` elements, respectively. They offer extensive flexibility for applying custom styles using CSS syntax.

    ```jsx
    <Box css={{
      padding: 'xxlarge',
      color: 'secondary',
      backgroundColor: 'container',
      borderRadius: 'small',
    }}>
      This is a box.
    </Box>
    ```

*   **Other Components:** Many other UI components have preset styles that are generally sufficient. While direct customization might be limited for some, adhering to the provided design tokens will ensure visual harmony.

### Typography

When applying custom styles, you cannot use arbitrary font faces and styles. Instead, utilize the `font` and `fontWeight` properties provided by Stripe's design system for consistent typography.

### Branding Elements

To make your app visually distinctive while maintaining platform consistency, leverage Stripe's branding elements and guidelines. This ensures your app is recognizable and adheres to Stripe's design philosophy.