Saphyte Client Portal Foundations | Public Design System Documentation

Design systemsSelect design system

Search this documentation

Foundations

One foundation for branded client portals.
Explore branded themes, reusable interaction states, navigation, and patterns that connect the portal experience.

Created & adapted by Insan NurjamanPrimitive + semantic variables foundationCurated public preview

primitivesemanticcomponent

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.

The semantic collection includes InstantFunding dark/light, VoltFunded dark/light, and Eafghan light modes. The reviewed Button binds its fill to background/bg-brand-soft and label to text/text-brand-primary. Palette documentation credits Tailwind foundations.

Selected source relationships
Context	Semantic role	Primitive reference
`InstantFunding · Dark`	`background/bg-brand-soft`	`Colors/Brand/InstantFunding/950`
`InstantFunding · Light`	`background/bg-brand-soft`	`Colors/Brand/InstantFunding/50`
`VoltFunded · Dark`	`background/bg-brand-soft`	`Colors/Brand/VoltFunded/960`
`VoltFunded · Light`	`background/bg-brand-soft`	`Colors/Cyan/50`

Hierarchy before decoration.

Source typography choices
Mode / role	Family	Body / size
Product type	Inter	Source styles across sizes and weights

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

Make the rhythm visible.

Navigation

Account scope + destination groups

State cards

Small / Large

Stepper

Default / Current / Finished

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