Kin: Branding, Colors & Fonts
This article applies to the Kin app (now part of Reactiv). If your app was built with Reactiv, see the Reactiv support docs instead.
Your Kin app's colors, fonts and button styles are applied remotely. You can change them without publishing a new app version. Shoppers see the new look after they fully close and reopen the app.
Color palette
Set these brand colors in Build → Theme → Colors:
- Primary
- Accent 1
- Accent 2
- Accent 3
Black, white and gray are always available and can't be changed. The app background is white.
Component colors
Each app component has a background color and a text color, or an outline color where the background stays transparent. You can choose from Primary, Accent 1, Accent 2, Accent 3, Black, White, or Gray.
| Component | Notes |
|---|---|
| Primary button | Main calls to action |
| Secondary button | Outline color. The background stays transparent |
| Badge | For example, the cart item count |
| Navigation bar | The bar at the top of the app |
| Primary pill | Shortcut pills on the Shop tab |
| Secondary pill | Outline of a pill that opens more options |
| Pill container | Background behind the shortcut pills |
| Onboarding | The sign-in and welcome screens |
Fonts
In Build → Theme → Typography, upload one set of font files for:
- Header: Regular and Bold.
- Body: Regular and Bold.
The same files are used on iOS and Android. If you use one typeface for both, you can skip a separate body upload. If you don't upload fonts, the app uses the system fonts: SF Pro on iOS and Roboto on Android.
Buttons
- Corner radius: for example, 12 for rounded corners or 0 for square.
- Border width: for example, 2.
- Text style: UPPERCASE or Sentence case.
- Cart icon: you can swap the default shopping cart icon for an alternative icon.
Icons
The app uses a consistent built-in icon set. Custom icon uploads aren't supported.
App icon and launch screen
The app icon and launch screen are part of the app build, so changing them requires a new app version. Provide:
- App icon: 1024 × 1024 px, no transparency.
- Launch screen: either Simple (your logo, an image and a background color as a hex value) or Custom. Send the assets to the Kin team.