Skip to main content

Theme Builder

Create and customize your Multinaire Design theme visually. Export as JSON to use in your React Native / Expo app.

Colors

Primary

Secondary

Background

Neutral

Base

Semantic

Variables

height

radius

padding

stroke

gap

Typography (Font Sizes)

Export

{
  "$schema": "./theme.schema.json",
  "colors": {
    "light": {
      "primary": "#ED7030",
      "primaryVariant": "#CB5A23",
      "onPrimary": "#FFFFFF",
      "secondary": "#1842BD",
      "secondaryVariant": "#03164E",
      "onSecondary": "#ECF1FF",
      "background": "#FBFBFB",
      "backgroundVariant": "#F1F1F1",
      "onBackground": "#121212",
      "neutral": "#505050",
      "neutralVariant": "#6D6D6D",
      "onNeutral": "#FFFFFF",
      "base": "#FFFFFF",
      "baseVariant": "rgba(80, 80, 80, 0.5)",
      "onBase": "#000000",
      "success": "#43DF49",
      "warning": "#FFB300",
      "error": "#D32F2F"
    },
    "dark": {
      "primary": "#ED7030",
      "primaryVariant": "#CB5A23",
      "onPrimary": "#FFFFFF",
      "secondary": "#6881FA",
      "secondaryVariant": "#364FC7",
      "onSecondary": "#ECF1FF",
      "background": "#121212",
      "backgroundVariant": "#1B1B1B",
      "onBackground": "#E0E0E0",
      "neutral": "#B0B0B0",
      "neutralVariant": "#8D8D8D",
      "onNeutral": "#FFFFFF",
      "base": "#181818",
      "baseVariant": "rgba(40, 40, 40, 0.5)",
      "onBase": "#FFFFFF",
      "success": "#3BC14A",
      "warning": "#FFC107",
      "error": "#F44336"
    }
  },
  "texts": {
    "display": {
      "regular": {
        "fontFamily": "DancingScript",
        "fontSize": 24
      },
      "medium": {
        "fontFamily": "DancingScript",
        "fontSize": 24
      },
      "bold": {
        "fontFamily": "DancingScript",
        "fontSize": 24
      }
    },
    "heading": {
      "regular": {
        "fontFamily": "OpenSans",
        "fontSize": 20
      },
      "medium": {
        "fontFamily": "OpenSans",
        "fontSize": 20
      },
      "bold": {
        "fontFamily": "OpenSans",
        "fontSize": 20
      }
    },
    "subheading": {
      "regular": {
        "fontFamily": "OpenSans",
        "fontSize": 18
      },
      "medium": {
        "fontFamily": "OpenSans",
        "fontSize": 18
      },
      "bold": {
        "fontFamily": "OpenSans",
        "fontSize": 18
      }
    },
    "title": {
      "regular": {
        "fontFamily": "OpenSans",
        "fontSize": 16
      },
      "medium": {
        "fontFamily": "OpenSans",
        "fontSize": 16
      },
      "bold": {
        "fontFamily": "OpenSans",
        "fontSize": 16
      }
    },
    "body": {
      "regular": {
        "fontFamily": "OpenSans",
        "fontSize": 14
      },
      "medium": {
        "fontFamily": "OpenSans",
        "fontSize": 14
      },
      "bold": {
        "fontFamily": "OpenSans",
        "fontSize": 14
      }
    },
    "caption": {
      "regular": {
        "fontFamily": "OpenSans",
        "fontSize": 12
      },
      "medium": {
        "fontFamily": "OpenSans",
        "fontSize": 12
      },
      "bold": {
        "fontFamily": "OpenSans",
        "fontSize": 12
      }
    }
  },
  "variables": {
    "height": {
      "small": 32,
      "medium": 40,
      "large": 100
    },
    "radius": {
      "small": 16,
      "medium": 20,
      "large": 100
    },
    "padding": {
      "small": 12,
      "medium": 16,
      "large": 24
    },
    "stroke": {
      "small": 0.5,
      "medium": 1,
      "large": 2
    },
    "gap": {
      "small": 4,
      "medium": 8,
      "large": 12
    }
  }
}