Our design system helps us work together to build a great experience for all.
Use primary colors for primary actions like buttons, icons and text on navigation and tabs, and for the background in navigation and tab interactive states.
Use secondary colors for secondary and tertiary buttons and the background of form elements.
Surface colors affect surfaces of components, such as page, card, sheet, and popover.
Apply on-surface colors to elements that appear on neutral surfaces, usually borders, secondary icons, and text elements.
Use interactive colors for things like links, focus indicators, and selected interactive states.
Highlight colors indicate important elements that don’t require immediate action. They’re used with informational banners and badges, indicators that draw attention to new information, loading or progress bars, and data visualization.
Success colors indicate something positive, like the success of a merchant action or to illustrate growth.
Warning colors let the merchant know they need to take action and are applied to badges, banners, and exception lists.
Critical colors are for destructive interactive elements, errors, and critical events that require immediate action.
Placebo uses simple and informative icons that draw on the visual language of the Placebo design system.
We source the majority of our UI icons from Luca Burgio's Iconoir Icon Library. This helps us move quickly and maintain visual consistency.
Use SVGs instead of raster images for fast loading & better quality.
Typography is a major part of Suraasa's brand. We've taken care to select a family of fonts that promote legibility and accessibility in both English & Arabic languages.
We utilize system fonts at Suraasa, which allow for optimized performance. This design decision takes advantage of retina screens, dynamic kerning, additional font-weights, and improved readability.
Inter, Noto Sans Arabic, sans-serifAdd this to your CSS to preload system fonts and set up browsers for legibility:
/* Load system fonts */
font-family: "Inter", "Noto Sans Arabic", Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
/* Make type rendering look crisper */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Enable kerning and optional ligatures */
text-rendering: optimizeLegibility;
Copy this code into the <head> of your HTML document:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">Copy this code into the CSS document or <script> of your HTML document:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');Inter is available as an open source font through Google Fonts. It is licensed under the Open Font License.
Arabic (العربية) is a Middle Eastern abjad, written right-to-left (660 million users). 2nd- or 3rd-most used script in the world. Used for the Arabic language since the 4th century, and for many other languages, often in Islamic countries or communities in Asia, Africa and the Middle East, like Persian, Uyghur, Kurdish, Punjabi, Sindhi, Balti, Balochi, Pashto, Lurish, Urdu, Kashmiri, Rohingya, Somali, Mandinka, Kazakh (in China), Kurdish, or Azeri (in Iran). Was used for Turkish until 1928. Includes 28 basic consonant letters for the Arabic language, plus additional letters for other languages. Some letters represent a consonant or a long vowel, while short vowels are optionally written with diacritics. Variants include Kufi with a very simplified structure, the widely-used Naskh calligraphic variant, and the highly cursive Nastaliq used mainly for Urdu. Needs software support for complex text layout (shaping).
Copy this code into the <head> of your HTML document:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">Copy this code into the CSS document or <script> of your HTML document:
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');Noto Sans Arabic is available as an open source font through Google Fonts. It is licensed under the Open Font License.
Placebo UI is available as an yarn package. Followed by necessary necessary dependencies like
yarn add @suraasa/placebo-ui react-jss iconoir-reactThis package depends on external libraries. If your project is using Typescript then you will need to install their types externally.
yarn add -D @types/react-modalIn order to get on with placebo the application must be wrapped with ThemeProvider which can be imported from react-jss.
And import ThemeProvider from the package react-jss.
import { ThemeProvider } from "react-jss"With this we need to pass theme object (which can be imported from Placebo UI) to ThemeProvider in order to set up a default theme in the application.
import { theme } from "@suraasa/placebo-ui"CSSBaseline is used in order to reset css ie remove default html styling
import { CssBaseline } from "@suraasa/placebo-ui"Now wrap ThemeProvider around application and pass theme object.
import React from "react"
import { ThemeProvider } from "react-jss"
import { CssBaseline, theme } from "@suraasa/placebo-ui"
function App() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<HomePage />
</ThemeProvider>
)
}
export default AppThis gives access to create own css classes based on theme for the application by importing createUseStyles
import React from "react"
import { createUseStyles } from "react-jss"
const useStyles = createUseStyles(theme => ({
container: {
margin: theme.spacing(1),
},
}))
const HomePage = () => {
const classes = useStyles()
return (
<div className={classes.container}>
<h1>Hello World!</h1>
</div>
)
}
export default HomePageBy using createUseStyles we get access to the theme object passed through ThemeProvider.The theme provides us with spacing property that by default has the value of 8px and passing the value of 1 gives margin of 8px.
yarn storybookStarts the development server on http://localhost:6006
yarn create-component <name>Creates a new component with the following files:
index.tsName.tsxName.stories.tsxName.test.tsx
yarn testRun predefined test.
yarn lint:fixRuns eslint --fix on the entire project. Fixes all autofixable issues. Also comes in handy to find issues after a change that affects other files.