# Appearance

> Look and feel of the elements and our windows, modelled on Stripe's Appearance API: a theme, a few variables, and web fonts.

Source: https://docs.tryyoursize.com/reference/web/appearance/

*Type* · `@tryyoursize/sdk`

Look and feel of the elements and our windows, modelled on Stripe's Appearance API: a theme, a few variables, and web fonts. The default theme, `inherit`, reads your page where the element is mounted, so it looks native to your store.

```ts
interface Appearance
```

## Properties

- **`theme`** (`Theme`, optional): `"inherit"` (default): your page's font, text colour and background. `"tryyoursize"`: our light beige brand.
- **`variables`** (`AppearanceVariables`, optional)
  - **`colorPrimary`** (`string`, optional): Buttons and the tape line on the body.
  - **`colorBackground`** (`string`, optional)
  - **`colorText`** (`string`, optional)
  - **`fontFamily`** (`string`, optional)
  - **`borderRadius`** (`number`, optional): Corner radius in px for cards, inputs and buttons.
- **`fonts`** (`{ cssSrc: string }[]`, optional): Stylesheets with @font-face rules (Google Fonts only), like Stripe's cssSrc.

## Example

**JavaScript**

```js
tys.elements({
  appearance: {
    theme: "inherit",
    variables: { colorPrimary: "#3b2f26", fontFamily: "Inter, sans-serif", borderRadius: 8 },
    fonts: [{ cssSrc: "https://fonts.googleapis.com/css2?family=Inter:wght@400;600" }],
  },
});
```

**Swift**

```swift
let config = TryYourSize.Configuration(appearance: Appearance(
    colorPrimary: TYSColor(hex: "#3b2f26"), fontFamily: "Inter, -apple-system", borderRadius: 8))
```

**Kotlin**

```kotlin
val config = TryYourSize.Configuration(
    appearance = Appearance(colorPrimary = 0xFF3B2F26.toInt(), borderRadius = 8f),
)
```

## See also

- [Appearance and theming](https://docs.tryyoursize.com/guides/appearance.md)