Get started

The etisalat Consumer App design system ships as a single npm package built from one token source (variables.json, exported from the Figma DSL V1.2 library) — the same source that generates the SwiftUI and Compose tokens, so values never drift between platforms.

Install

npm install @eand/react-design-system

Components, design tokens, and the full etisalat App Icons set all come from this one package — there is no separate icons package.

Components are inline-token-styled, so they render correctly with no CSS import. If you want the raw --eand-* custom properties for your own styles, import the stylesheet once:

import '@eand/react-design-system/styles.css';

First screen

import { TopBar, Section, ListRow, Button, Icon } from '@eand/react-design-system';

export function Account() {
  return (
    <>
      <TopBar
        surface="brand"
        account={{ greeting: 'Hi, Ahmed', name: '050 •••• 567' }}
        actions={[<Icon name="notification" />, <Icon name="settings" />]}
      />
      <Section title="My Plan" context="Freedom Live Plan 200">
        <ListRow label="2 GB left" value="Local Data" chevron={false} />
        <ListRow label="200 min left" value="Minutes" chevron={false} />
      </Section>
      <Button variant="primary" block>Make your own deal</Button>
    </>
  );
}

TopBar is slot-based: surface picks the header card — brand red for the account home, midnight, white for pushed pages, or none on a grey or midnight canvas — account renders the greeting over a masked number, and children adds add-ons under the header: a search field, Tabs, chips or a Stepper. The older variant, greeting and actionBar props still compile but are deprecated aliases — reach for surface, account and children instead.

Typography

The ramp is designed for Suisse Int'l (Latin) with a parallel aed/* ramp for Arabic. The font is licensed — load it in your app yourself. Until it's present the components fall back to "Helvetica Neue", Inter, system-ui.

Icons

Icons are part of the package — never generate or inline ad-hoc SVGs:

import { Icon } from '@eand/react-design-system';

<Icon name="wallet" size={24} />
<Icon name="wallet-filled" size={24} />

Every icon has an outline form and a -filled form: 198 base names, 396 total. Browse the whole set in Icons.

Figma Make

@eand/react-design-system doubles as a Figma Make kit: register the package in Make and it assembles etisalat screens from these exact components.

Make kits install from an npm registry, so the package has to be published — to Figma's private org registry or to public npm. The release artifact lives at eand-dsl/eand-make-kit, which also carries the MAKE_KIT_GUIDELINES.md you paste into the kit's guidelines/guidelines.md. That file isn't optional — the package alone gives Make the components, the guidelines are what teach it how to assemble a screen.