Design system

Hasanat’s visual identity is calm and clear: emerald on a warm paper background, a small touch of gold, and one Arabic typeface. hasanat.dev, the project briefs, and this platform use it.

Core colours

Colour	Value	Use
Emerald	`#047857`	Buttons, links, active states
Deep emerald	`#064e3b`	Strong text accents, pressed states
Gold	`#b8860b`	Small decorative accents only, never text
Paper	`#f7f5ee`	Page background
Ink	`#16271d`	Primary text

Emerald on paper has a contrast of about 5:1, and white text on emerald about 5.5:1, so both work for text. Gold on paper reaches only about 3:1, so never use it for text.

Supporting colours

From the briefs’ stylesheet:

Colour	Value	Use
Raised	`#fffefb`	Cards and surfaces above the page
Mint	`#eef4ec`	Quiet section backgrounds
Ink 2	`#3a5446`	Secondary text
Muted	`#526b5e`	Notes and labels
Gold light	`#f1d58a`	Gold highlight background
Hairline	`#dde5da`	Dividers
Hairline strong	`#c3d1c5`	Stronger borders

Dark mode

In dark mode, this platform uses the dark-mode colours of the previous Hasanat site:

Colour	Value	Use
Background	`#08110d`	Page background
Raised	`#0f1d18`	Header and sidebar
Primary text	`#e8f2ec`	Headings
Body text	`#a7c6b6`	Running text
Emerald	`#10b981`	Active elements
Light emerald	`#8ee0b7`	Links
Gold	`#e3b341`	Decorative accents

Typeface

The typeface is IBM Plex Sans Arabic, under the SIL Open Font License. It covers both Arabic and Latin letters. This platform uses weights 400, 600, and 700.

Self-host the font with your app, for example with the @fontsource/ibm-plex-sans-arabic package, instead of loading it from an external service.
Give Arabic text a generous line height: 1.8 in the briefs and 1.85 on this platform.
Never add letter spacing to Arabic text; it breaks the joined letters.
Do not use italics for Arabic. The typeface has no italic styles.

Applying it to the starter

The starter still uses an older palette (#0f766e) and the Inter and Noto Sans Arabic fonts from Google Fonts. To apply the Hasanat identity:

Install the font:

npm install @fontsource/ibm-plex-sans-arabic

At the top of src/styles/global.css, replace the Google Fonts line and the @theme values:

@import "@fontsource/ibm-plex-sans-arabic/400.css";
@import "@fontsource/ibm-plex-sans-arabic/600.css";
@import "@fontsource/ibm-plex-sans-arabic/700.css";
@import "tailwindcss";

@theme {
  --color-hasanat: #047857;
  --color-hasanat-light: #10b981;
  --color-hasanat-dark: #064e3b;
  --color-gold: #b8860b;
  --color-ink: #16271d;
  --color-surface: #f7f5ee;
  --color-surface-dark: #08110d;
  --font-sans: "IBM Plex Sans Arabic", system-ui, sans-serif;
}

In the base layer of the same file, replace text-slate-800 with text-ink.

We tried these changes on a copy of the starter, and the build passed.

The starter’s ready-made btn-primary class picks up the emerald automatically, because it is built on the hasanat colour. btn-secondary and card use slate colours and white, so adjust them in the same file if you want.

Principles

Arabic first: right-to-left is the default. See Arabic and RTL.
Clarity over decoration: one primary action per page, and short, clear text.
Real content: design with the product’s real text, not placeholder text. Do not put emoji in the interface.
Accessibility: visible focus states, at least 4.5:1 contrast for normal text, full keyboard use, and labels for screen readers.
Mobile first: check every page at 360px wide and with text zoomed to 200%.
Icons: the starter uses lucide-react. Name meaningful icons, hide decorative ones from screen readers, and flip directional arrows in Arabic.
Dark mode is optional: the starter does not include it by default.