Saphyte & E-Afghans Foundations | Public Design System Documentation

Design systemsSelect design system

Search this documentation

Foundations

One shared language. Two distinct identities.
Explore the color, type, and layout decisions behind the Saphyte and E-Afghan design systems.

Created & adapted by Insan NurjamanChakra UI 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.

Global palettes supply semantic roles while product palettes preserve identity. The reviewed solid fills reference the same listed primitive in both source color modes; foreground and subtle roles can change their referenced shade.

Selected source relationships
Context	Semantic role	Primitive reference
`Saphyte`	`brand/saphyte/solid`	`brand/saphyte/600`
`E-Afghans`	`brand/eafghan-1/solid`	`brand/eafghan-1/600`

Hierarchy before decoration.

Source typography choices
Mode / role	Family	Body / size
Inter	Inter	Inter
Geist	Geist	Geist
Eafghans	NewsReader	Inter

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

Make the rhythm visible.

Button sizing

2xs / xs / sm / md / lg / xl / 2xl

Product identity

Shared roles, brand-specific corners

Task rhythm

Controls → field groups → sections

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