Kaikas Docs
Search…
⌃K

Kaikas Button Design Guide

Before we start

This manual introduces design rules for the Kaikas App2App Button.
Although following this manual is preferred, you may modify the design based on the application’s own UI/UX design.
However, the design should be modified only within the range of examples shared in this manual.

Components and colors

Connect to Kaikas’ button has three components, each of which has its own distinct color defined below.
  • Symbol that identifies Kaikas :
    #FFFFFF
  • Label that introduces button’s job :
    #FFFFFF
  • Container that wraps symbol and label :
    #3366FF

Symbol

  • Should use the distinct symbol that defines Kaikas
  • Cannot arbitrarily change color, shape, or ratio of the symbol
  • Cannot use other icons instead of the symbol
  • Cannot build a button without the symbol

Label

  • Log in / Sign in with Kaiaks
  • Connect with Kaikas account

Can use (If necessary)

  • Log in / Sign in with Kaikas wallet
  • Log in / Sign in with Kaikas wallet account
  • Log in / Sign in with Kaikas account wallet

Container

Radius

  • The container follows the formula shown below :
    • {height of the container} x 0.35 = {radius of the container}
  • Although the formula above is suggested, modifying the radius by the screen design is allowed.

Size

  • The container does not have a designated width or height, which can be resized by your design. (However, min-width is 280px, and min-height is 44px)
  • You can utilize it with center alignment and left alignment, followed by the guidelines shown below.

Assets