Pearl UI is a powerful UI toolkit that helps you build beautiful production-ready mobile apps right out of the box. Skip the designer, write cleaner code, and get your product to market faster!
Design systems make it easy to scale your user interface and increase visual consistency. Pearl UI allows you define all aspects of a typical design system during development, giving you the power to update the entire look and feel of your app in minutes!
const palette = {neutral: {50: "#FFFFFF",100: "#F7F9FC",200: "#EDF1F7",300: "#E4E9F2",400: "#C5CEE0",500: "#8F9BB3",600: "#58617A",700: "#2E3A59",800: "#222B45",900: "#1A2138",},primary: {50: "#F0F2FF",100: "#E1E6FF",200: "#C3CCFF",300: "#A5B1FF",400: "#8F9DFF",500: "#6A7BFF",600: "#4D5BDB",700: "#3541B7",800: "#212A93",900: "#141B7A",},secondary: {50: "#FFF1F4",100: "#FFE1E7",200: "#FFC3D6",300: "#FFA5CB",400: "#FF8FC9",500: "#FF6AC6",600: "#DB4DB3",700: "#B7359F",800: "#93218A",900: "#78147A",},...}
const palette = {neutral: {50: "#FFFFFF",100: "#F7F9FC",200: "#EDF1F7",300: "#E4E9F2",400: "#C5CEE0",500: "#8F9BB3",600: "#58617A",700: "#2E3A59",800: "#222B45",900: "#1A2138",},primary: {50: "#F0F2FF",100: "#E1E6FF",200: "#C3CCFF",300: "#A5B1FF",400: "#8F9DFF",500: "#6A7BFF",600: "#4D5BDB",700: "#3541B7",800: "#212A93",900: "#141B7A",},secondary: {50: "#FFF1F4",100: "#FFE1E7",200: "#FFC3D6",300: "#FFA5CB",400: "#FF8FC9",500: "#FF6AC6",600: "#DB4DB3",700: "#B7359F",800: "#93218A",900: "#78147A",},...}
const fontSizes = {"2xs": 10,xs: 12,..."11xl": 40,"12xl": 42,};const lineHeights = {"2xs": 14,xs: 16,..."11xl": 44,"12xl": 46,};const fontWeights = {hairline: "100",thin: "200",light: "300",normal: "400",medium: "500",semibold: "600",bold: "700",extrabold: "800",black: "900",}
const fontSizes = {"2xs": 10,xs: 12,..."11xl": 40,"12xl": 42,};const lineHeights = {"2xs": 14,xs: 16,..."11xl": 44,"12xl": 46,};const fontWeights = {hairline: "100",thin: "200",light: "300",normal: "400",medium: "500",semibold: "600",bold: "700",extrabold: "800",black: "900",}
const spacing = {hairline: 2,"2xs": 4,xs: 8,s: 12,m: 16,l: 24,xl: 32,"2xl": 40,"3xl": 48,"4xl": 56,"5xl": 64,"6xl": 72,"7xl": 80,"8xl": 88,"9xl": 96,}
const spacing = {hairline: 2,"2xs": 4,xs: 8,s: 12,m: 16,l: 24,xl: 32,"2xl": 40,"3xl": 48,"4xl": 56,"5xl": 64,"6xl": 72,"7xl": 80,"8xl": 88,"9xl": 96,}
const elevation = {xs: {shadowColor: "#1A2138",shadowOffset: {width: 0,height: 2,},shadowOpacity: 0.08,shadowRadius: 2,elevation: 2,},s: {shadowColor: "#1A2138",shadowOffset: {width: 0,height: 4,},shadowOpacity: 0.08,shadowRadius: 4,elevation: 4,},..."3xl": {shadowColor: "#1A2138",shadowOffset: {width: 0,height: 24,},shadowOpacity: 0.1,shadowRadius: 24,elevation: 24,},"4xl": {shadowColor: "#1A2138",shadowOffset: {width: 0,height: 28,},shadowOpacity: 0.16,shadowRadius: 28,elevation: 28,},}
const elevation = {xs: {shadowColor: "#1A2138",shadowOffset: {width: 0,height: 2,},shadowOpacity: 0.08,shadowRadius: 2,elevation: 2,},s: {shadowColor: "#1A2138",shadowOffset: {width: 0,height: 4,},shadowOpacity: 0.08,shadowRadius: 4,elevation: 4,},..."3xl": {shadowColor: "#1A2138",shadowOffset: {width: 0,height: 24,},shadowOpacity: 0.1,shadowRadius: 24,elevation: 24,},"4xl": {shadowColor: "#1A2138",shadowOffset: {width: 0,height: 28,},shadowOpacity: 0.16,shadowRadius: 28,elevation: 28,},}
Design systems make it easy to scale your user interface and increase visual consistency. Pearl UI allows you define all aspects of a typical design system during development, giving you the power to update the entire look and feel of your app in minutes!