FORMA
Components →
01 — Logo System

FORMA

Wordmark · dark surface

FORMA

Mark only · monochrome

Mark · Wordmark · Monochrome — use only approved variants on brand surfaces.

01 →
02 — Color System
NEUTRAL-900 #090D10
BLUE-500 #127AE6
BLUE-400 #549FFD
NEUTRAL-50 #F5F8FC
NEUTRAL-700 #383E44
NEUTRAL-400 #97A0A7
02 →
03 — Brand Essence
Every
interface,
by system.

A precision-built design system
for teams that ship with confidence.

03 →
04 — Typography
Aa Bb

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Display — Bebas Neue

H1 · 64px / −1.28ls

Component

H4 · 32px

Token System

Aa Bb

a b c d e f g h i j k l m n o p q r s t u v w x y z

Body — Barlow

Body LG · 18px / 1.6lh

Structured component tokens for consistent, scalable interfaces across every product surface.

Caption · 12px

tokens.css · --font-family-body

04 →
05 — Digital Application
forma.design/components
FORMA
Merged In Review Shipped v1.4.2
05 →
06 — Construction 06 →
07 — Components

Badges

Shipped In Review Planned

Buttons

Input

Alert

Tokens exported. Your design tokens have been saved to tokens.css.
07 →
FORMA
08 — Brand World

Precision
by design.

From design tokens to shipped components — FORMA is the foundation every interface is built on.

Dark Developer

08 →
09 — Token Reference
--color-blue-500
--color-blue-400
--font-family-headings Bebas Neue
--font-family-body Barlow
--gap-md 16px
--radius-8 8px
--color-neutral-900
--duration-fast 240ms
09 →