MyRHIS Next Gen | Logiciel de gestion RH multi-sites

Design Specification — MyRHIS Next Gen | Logiciel de gestion RH multi-sites

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FBFAF9), ink text (#000000), a vivid accent (#FF5D30). All type is set in 'Inter'. Detected font weights: 300, 400, 500, 600, 700. Detected style signatures: technical / mono accents.

Logo asset(s): https://www.rhis-solutions.com/favicon.ico

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Typography

Primary typeface: Inter — stack: 'Inter'

Font stacks (most used first)

• 'Inter'
• var(--all-font-family--primary-font)
• sans-serif
• Arial,sans-serif
• monospace
• webflow-icons
• webflow-icons!important

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 600, 700

Line heights (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Layout

Container max-width: 991px

Breakpoints

• 479px
• 767px
• 991px

Animation & Motion

Keyframes

@keyframes fa-spin { 0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)} }
@keyframes spin { 0%{transform:rotate(0)}to{transform:rotate(360deg)} }

Source Design Tokens (CSS custom properties)

:root {
  --all-color--neutral-02: #fbfaf9;
  --all-font-family--primary-font: Inter, sans-serif;
  --all-heading--body-16: 16px;
  --line-height--xxl: 170%;
  --all-font-weight--regular: 400;
  --all-color--neutral-04: #111;
  --all-heading--heading-1: 64px;
  --line-height--m: 105%;
  --all-font-weight--semibold: 600;
  --all-letter-spacing--xxxxl: -3.5px;
  --all-heading--heading-2: 44px;
  --line-height--xl: 120%;
  --all-letter-spacing--xxxl: -3px;
  --all-heading--heading-3: 32px;
  --line-height--l: 140%;
  --all-font-weight--medium: 500;
  --all-letter-spacing--xl: -1.5px;
  --all-heading--heading-4: 24px;
  --all-letter-spacing--l: -1px;
  --all-heading--body-18: 18px;
  --all-color--neutral-03: #46484d;
  --all-gap--ls: 14px;
  --all-gap--lss: 16px;
  --all-color--neutral-01: white;
  --all-heading--body-14: 14px;
  --all-gap--xxl: 80px;
  --all-color--color-02: #1167f4;
  --all-gap--xl: 30px;
  --all-gap--xxls: 56px;
  --all-gap--xxxl: 120px;
  --all-gap--l: 24px;
  --all-gap--m: 12px;
  --all-heading--body-20: 20px;
  --all-letter-spacing--m: -.5px;
  --all-color--color-01: #ff5d30;
  --all-heading--body-12: 12px;
  --all-font-weight--bold: 700;
  --all-letter-spacing--xxl: -2px;
  --header-border: rgba(0, 0, 0, .1);
  --header-shadow: rgba(0, 0, 0, .06);
  --header-dropdown-shadow: 0 10px 25px #0000000f;
  --header-mega-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 16px 40px rgba(15, 23, 42, .1);
}

Do's and Don'ts

Do

• Do reserve the accent #FF5D30 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FBFAF9; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 300, 400, 500, 600, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add gradients — the source page uses flat fills exclusively.
• Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-primary: #1167F4;
  --color-accent: #FF5D30;
  --color-background: #FBFAF9;
  --color-surface: #FFFFFF;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #46484D;
  --color-border: #333333;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FBFAF9;
  --color-surface-container: #F2F2F0;
  --color-surface-container-high: #E2E2E2;
  --color-surface-container-highest: #DDDDDD;
  --font-sans: 'Inter';
  --font-size-headline-lg: 38px;
  --font-size-headline-md: 24px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --space-sm: 10px;
  --space-md: 16px;
  --space-xl: 70px;
  --container-max: 991px;
}