AccelByte Foundations | Public Design System Documentation

Design systemsSelect design system

Search this documentation

Foundations

A shared language for complex admin workflows.
Explore theme-aware foundations, cloud navigation, responsive page structures, and reusable data states.

Created & adapted by Insan NurjamanAnt Design foundationCurated public preview

Color

Brand values meet semantic roles, from surface to action.

Readable by role.Heading / Body / Label

Typography

A consistent hierarchy with room for product identity.

space
with
intent

Layout

Rhythm and density make complex pages easier to scan.

Save changesFoundation → reusable decision

Into components

See how a Button carries shared decisions into an action.

Color with a job to do.

Light and Dark are color modes. Base values feed brand roles and component tokens through aliases; that relationship is documented here without claiming automatic production-code synchronization.

Selected source relationships
Base value	Brand role	Component role
`Colors/Base/AccelBlue/6`	`Colors/Brand/Primary/colorPrimary`	`Components/Button/Global/colorPrimary`

Hierarchy before decoration.

Source typography choices
Mode / role	Family	Body / size
Default	Roboto	14px
Compact	SF Pro Text	12px

Native documentation uses the portfolio’s Manrope. Source exports keep their own typography.

Make the rhythm visible.

Default density

controlHeight · 32px

Compact density

controlHeight · 28px

Responsive page headers

Desktop · Tablet · Mobile

The catalog spacing bars are conceptual, not a verified numeric token scale.

Curated design documentation by Insan Nurjaman. Native examples are illustrative, not a production package or a standards certification.

Explore the story