Introduction

Dark

Introduction

Appetite UI is a mobile design system for Figma that reaches the code. Every guide tells you to start from the Apple and Material kits and build your own system on top: this is that system, already built.

What it is

An opinionated design system built only for mobile app design. Production ready components, a structured token system and platform aware native elements, all running on Figma’s own variables. No plugins. No workarounds.

Mobile app screens drawn with Appetite UI

Where it fits

Every guide tells you to start from the platform kits and build your own system on top. Appetite UI is that layer, already built.

Appetite UI does not replace the platform kits. It names their slots and points them at your tokens: 112 bridge variables, 60 Material 3 slots and 52 Apple slots, in two modes. Switch to System mode and the same slot points back at the platform value, so you can check a screen against the native palette without unpicking anything.

A system, not a collection

A component never names a colour. It names a token, the token names a foundation, and the chain runs one way only.

Collection

What it decides

Variables

Foundations

Raw colour ramps, and the spacing, radius, border and icon scales

196

Color Tokens

Semantic colour in Light and Dark: bg, text, border, fg, state, brand

161

Platform Bridge

Material 3 and Apple slot names, in Brand and System modes

112

Motion

5 durations, 5 easing curves, 3 springs, 7 presets built from them

Typography

Size, line height, tracking, weight and family

Platform

Touch targets, safe areas, bar heights and corners, per platform

Six collections, 544 variables, one direction of travel. Nothing points back up the chain, which is what lets the structure survive scale. platform/min-touch-target reads 44 in both iOS modes and 48 in Android, so one component obeys both without a second copy.

It reaches the code

One W3C Design Tokens source. It generates CSS, SwiftUI, Compose and Flutter, so the value your engineer ships is the value you drew.

Some values need no translation at all: motion/easing/standard already holds cubic-bezier(0.2, 0, 0, 1) and motion/duration/base holds 200. This is the claim the whole system is built to keep, and Code output shows the exporter and the generated files.

What is inside

A complete mobile toolkit, scoped to what actually matters. All of it in one Figma file, all of it reading from one set of variables.

Area

What you get

Count

Components

Built for touch, every state bound to a token

36 pages

Apple patterns

iOS conventions redrawn in Appetite geometry

21 pages

Material 3 patterns

Material conventions redrawn in Appetite geometry

17 pages

Application screens

Onboarding, Settings, Empty State, Finance, Fitness, Social, AI, Booking, Foodie

9 sets

Icons

Lucide, every one running off a single stroke weight variable

1,667

Styles

20 text, 19 effect, 3 grid, and deliberately no paint styles

Inter is licensed under the SIL Open Font License 1.1 and Lucide under the ISC License, both cleared for commercial work. The Apple and Material pattern pages carry no vendor design resource. The Assets page ships brand marks and emoji so you can populate a realistic mock up: they belong to their owners, and you replace them before you ship.