EN

Stable release of version 2.0

01st Oct 2023

The design system version 2.0 has been released, with a plethora of updates and changes. Here is what we have in this version.

  • The first release of the design system as a plugin
  • Everything that is present in the TailwindCSS version 3.3. Read more about the latest additions to TailwindCSS.
  • 24 components added that includes:
    • Accordion, Alert, Avatar, Banner, Blockquote, Breadcrumbs, Button, Card, Checkbox, Dropdown, File input, Hyperlink, Input, Modal, Navigation, Pagination, Radio, Range slider, Select, Steps, Tabs, Textarea, Toggle, Tooltip
  • 10 blocks added that includes:
    • Content, Filter, Footer, Header, Hero, Login, Newsletter, Page rating, Slider, Team
  • 5 patterns added that includeds:
    • Address, Name, Contact number, Date, Emirates ID
  • Accessibility checks on all components and blocks.
  • Creation of the public repository.
  • Creation of a public issue's reporting center on GitHub.
  • Creation of a public discussion forum on GitHub

Major updates

  • Typography guidelines have introduced a new font for heading, and 2 new fonts for the use of Arabic content. There are further imporements on the use of font size and weights, and more information about how to space content.
  • The previous guideline called "Tone of Voice" was merged into the creation of a new guideline called "Content". This guideline covers more information and highlights the correct use of content for a website.
  • The existing colour palette was modified to include accessible colour combinations. Secondary colour palatte was also updated and we introduced the colour called "Fuchsia". A major change was bought to the environment colours and the use of background colour for websites.
  • The introduction of Phosporus Icons as the primary icon library was made. This replaces the use of Feather icons. The new icon library includes over 1,248 icon's - each in 6 variations.
  • Layout and containers used now support the use of flexbox and grid with all columns being messured in percentages.
  • Spacing is calculated based on - increments of 2px until the base font size, after which it moved to increments of 4px
  • A new accessibility guideline was added.
  • There are updates to all guidelines incrementally.

 

Back to roadmap