Public UI-Kit

Graphite interface design requirements: UI-kit in Figma

Layout and style

Layout

In Graphite we use classic layout with header and footer. Content can be structured in any way within the grid framework.

Main breakpoints

Desktop: 1400 px – 1200 px

Tablet: 1200 px – 768 px

Mobile: 768 px – 360 px

Grid

Columns

Gutter

Side margins

Top/bottom margins

Content weight

24px

80px

64px

1200px (max)

24px

64px

full (max 1152px)

16px

48px

full (max 736px)

Corner radius

Blocks in the interface, controls, and highlighted areas use border radius as follows:

Labels: 2px — for small ui-elements
Inputs: 4px — main radius for elements 48 pixels and smaller
Small blocks and controls: 8px — a universal radius for most UI elements.
Large blocks and pop-ups: 16px — used for modals and maintains a balanced proportion between element size and rounding.

Module

The 8-pixel module is the basic dimensional unit of Graphite interfaces. The module is used to build typography and controls, select sizes for icons, and calculate indents between elements.

For sizes up to 40 px, a half-module step is acceptable: 0.5 module = 4 px, for sizes smaller than 24 px — 0.25 module = 2 px.

We use the module wherever it doesn't compromise aesthetics or common sense. The module is a practical design guide — it helps define sizes and spacing, but it’s not an absolute rule. Layouts don’t need to rigidly follow the 8-pixel grid.

Colors and typography

Colors and mode

Graphite uses dark mode exclusively. Main interface colors are black and gray, white for text, green — accent. The background should always be darker than other elements. If you use a modal container or backdrop layer, the inputs and other filled elements should be lighter than the background of the modal window.

Text styles

headline-large

This style is intended for use only in the first block of a webpage on desktop, typically when:

the section contains only text (no images, cards, or complex layout),
the heading is short — no more than 1–2 lines, there are no other dominant elements competing for attention,
the goal is to create a strong, spacious, and minimal first impression.

It works best in hero sections where typography is the focal point — for example, hero headlines. Avoid using this heading style in sections with multiple visual components or dense content — it may appear oversized or out of balance.

headline-medium

The main header for the desktop and can be used for tablet.

headline-small

The main header for the mobile also can be used for tablet.

body-large

This text style is used to create a strong typographic hierarchy and guide the reader’s attention. It serves two main purposes:

Introductory paragraph in articles or long-form content Used as a lead paragraph to set the tone and provide context before the main body text. It should be concise, readable, and visually distinct from regular paragraphs.
Subheading beneath a headline-large When paired with a headline-large, this text functions as a supportive subtitle — offering additional context or clarifying the message without competing in visual weight.

body-big

Basic text for descriptions inside cards, modal windows and pop-ups, can be used on all resolutions.

body-medium

Used for texts inside elements — toggles, inputs for small resolutions, texts in tooltips, in pairs with radio buttons.

body-small

Used for text labels.

button-big and button-small

Used for buttons according to size.

Icons

Graphite interfaces use material design icons with rounded corners with outlining and without filling.

There are four main icon sizes — 12px, 16px, 20px, 24px. Icons could be scaled to other sizes inscribed in the module system.

Buttons and links

The name of the button is capitalized. The name of the button should be clear and concise, fitting completely within the button boundaries. Do not abbreviate button labels unless the full meaning is immediately clear.

There are 2 standard button sizes — big and small.

Small — when the button is next to small input fields or other types of buttons.
Big — use as main screen or form buttons to save and cancel, move to the next screen.

Text buttons

There are 3 types of text buttons — primary, secondary and plane.

Primary button — represents the main action on a screen, section, or component. It draws the most attention and guides the user toward the intended outcome.

Primary scenarios: main CTA on the page or section, highlighting the next step in a flow, single action within a component, destructive confirmation (with visual caution).

Secondary button — used for non-primary actions: actions that are important but not the main focus of the current screen or block.

Primary scenarios: in a pair with a primary CTA, as a standalone action in low-attention areas, for repeated/utility actions, inside components with visual hierarchy.

Plain button — a low-emphasis, minimal button style. It visually resembles a text link, but functions as a button for actions, not navigation.

Primary scenarios: lightweight or secondary actions within components, inline actions within copy or content, supplementary actions in forms or modals.

The name of the button can be complemented with an icon. It helps find the desired button faster and understand its function at a glance. For buttons with an icon apply the same rules as for buttons without an icon.

Icon buttons

Icon buttons are compact, visual-only buttons used for clear, self-explanatory actions. They contain only an icon, without a label, and are designed for high-recognition, low-ambiguity actions. Only use icon-only buttons for well-known actions — don’t assume users will guess less common ones.

Primary use cases: essential utility actions (search, copy, close), compact placement in tight UI (edit, delete, clear input).

Input Buttons

Input buttons are small action buttons placed next to input fields, usually inside or beside number or token inputs. They help users quickly insert a contextual value.

Common use cases: set max/min value, quick actions like “Paste”, “Clear”.

Links

Links are used to navigate between pages, sections, or external resources. Different link styles help distinguish their purpose and importance. There are 4 types of links — external link, inner primary link, inner secondary link and socials.

External link — used for links that lead outside the product or ecosystem. Opens in a new browser tab, accompanied by an external link icon.
Inner primary link — used for important internal links within the product or ecosystem. May lead to key pages, styled with accent color to stand out, can be used inline or as part of navigation elements.
Inner secondary link — used for less prominent internal links — still important, but not part of the main flow. Often used in footers, legal blocks, or secondary content, styled more subtly (neutral or gray tones).
Social link — an icon-based link that directs to a company’s social media profile. Opens in a new tab, uses in personal accounts.

Note: Social links are used to direct users to the company’s official social media profiles. They are styled and behave like secondary icon buttons, not like social links.

Checkboxes

Use checkboxes for:

Selecting items from a list. For example, choosing multiple documents for bulk actions.
Selecting options or preferences. For example, enabling notifications and choosing specific cases when notifications should be sent.

Checkboxes do not trigger an action immediately. Typically, the user needs to press a separate confirmation button to apply the change. If an action needs to happen instantly, a toggle is a better choice.

The checkbox is vertically aligned with the center of the first line of the text it belongs to. If the text spans multiple lines, the checkbox is aligned to the top edge of the text container.

Radio buttons

Use a radio button group when there are only a few options — typically 2 to 5. Radio buttons are vertically aligned with the center of the text line.

Note: if there are 5 to 25 options, a dropdown is more appropriate.

Tabs and toggles

Tabs

Tabs are used for secondary navigation, and for grouping or filtering content.

Do not use tabs to switch between states — use radio buttons, toggles, or switches instead.

There are 3 types of tabs — tab with background and icon, text tab with background, plain text tab.

When to use each type:

Tabs with background are used to switch between sections of content within a page — for example, multiple tables or data views. They should not be used inside other components (like modals). In those cases, use plain text tabs instead.

Tab with background and icon — used when there are only a few tabs (up to 5). The icon helps reinforce the meaning of the text but adds visual noise, so it’s not recommended for large sets.
Text tab with background — no icon is preferred when there are more than 5 tabs, to maintain a cleaner and more readable layout.
Plain text tab — used when tabs appear inside another component, such as a modal window. These tabs can also be placed outside the visual bounds of the component they control.

Best practice

Tab styles are flexible — choose the version that fits your layout best while maintaining usability and clarity. Tabs should be easy to use and understand, but should not create unnecessary visual noise.

Toggles

A toggle is used to switch between two states, such as changing the payment currency or switching a content view. Functionally, a toggle is similar to a checkbox, but the context of use is different: toggles are larger and more visually prominent than checkboxes. Ideally, a page should contain no more than 1–2 toggles, with 3 as a maximum.

There are two types of toggles:

Big toggle — used when the label is longer — typically 1–3 words, can be placed as a standalone UI element, works well in settings panels or feature switches.

Small toggle — used when the label is short such as an abbreviation or icon, best suited for compact interfaces like modals or dropdowns.

Toggles are best used when both states are clearly understood by the user (e.g., On/Off, USD/EUR). The change takes effect immediately. If confirmation is required, use a checkbox and button instead.

Inputs

There are 2 main types of input fields — standard input fields and search fields with advanced behavior.

Standard Input Field

Used in forms and feedback blocks to collect user data such as email, wallet address, phone number, etc.

Primary use cases:

can be used with or without a label, but always includes a placeholder
always includes a clear icon (a cross) to reset the field
supports various input types: text, email, number, etc.
used in contact forms, wallet connections, account creation, etc.

Search Field

Used as a standalone UI element, not typically placed inside other components like pop-ups or forms.

Primary use cases:

taller than a standard input field (on desktop)
may include a dropdown state — recent search history, autocomplete suggestions, country/region code selectors
can be full-width inside content container for better usability
designed for dynamic interaction, not static form submission

Use search fields when the user expects real-time feedback and standard input fields for structured data collection with or without submission confirmation.

Note: when an input field is placed next to a button, it's important that they are the same height to ensure visual consistency and alignment.

Dropdowns

The element that opens a dropdown list visually resembles a button, but behaves differently — does not trigger an action immediately, is used alongside other input fields. This component is best used when the user needs to choose one option from a list, especially in form-like contexts.

Dropdown panel behavior

The dropdown panel is aligned to the right edge of the trigger button, but may stretch to full width if needed.
The panel has a shadow to separate it from the background.
Items inside the dropdown are left-aligned.
The selected item is highlighted with a gray background.
Items can include labels and icons to provide additional context.

Labels

Text labels are small UI elements used to indicate status, type, or category of an object. They are compact, text-based, and serve a semantic and visual tagging function.

Purpose and usage

Indicate the status of a process or item (e.g., “Pending”, “Success”, “Failed”)
Show type or category (“Wallet”, “Beta”, “Layer 2”)
Can be used in lists, cards, tables, or inline with content

Visual style — use the smallest text size available (e.g., body-small). Labels include a background fill and 2px rounded corners.

Label types

Neutral (gray) labels — used for generic tags
Colored status labels — reflect specific states in a process

Labels should be short and readable, usually 1–2 words, and never behave like interactive elements.

Tooltips

A tooltip is a small informational element that provides contextual help or explains the state of a control.

Behavior

Appears on hover over an interface element
Should remain visible when the cursor moves from the target to the tooltip itself
Should disappear only when the cursor leaves both the target and the tooltip

Size & Placement

The tooltip can appear in any direction, depending on available space and layout
There must be a 4px gap between the tooltip and the element that triggered it
The tooltip should not span the full width of the screen, the maximum width of a tooltip is 280px

Content

Use body-medium or body-small text styles inside the tooltip, depending on content length and importance, keep the message concise, informative, and easy to scan.
The text inside a tooltip should always be left-aligned, regardless of the tooltip’s position on screen.

Tooltips should help users understand interface elements without overwhelming them. Use them only when necessary and never for critical information.

Notifications

To notify users, you can use either a toast or a modal window, depending on the context.

Toasts are used for brief, non-intrusive messages — such as status updates or confirmations. They appear in the top-right corner of the screen. Toasts can contain a short message and and may include a link or action button if needed.