رافور | منصة إدارة الصالونات

Design Specification — رافور | منصة إدارة الصالونات

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#9B66FF). Display headings use a distinct face (ui-serif, Georgia, serif) over the body stack (ravoor). Detected font weights: 500, 600, 700, 900. Detected style signatures: gradient-rich / aurora; technical / mono accents.

Logo asset(s): https://ravoor.com/icon.svg?dpl=dpl_2gfaEnz6yMQwNnpS9D5Ri3jHAVCq · https://ravoor.com/logo.svg?dpl=dpl_2gfaEnz6yMQwNnpS9D5Ri3jHAVCq

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)

Gradients

• linear-gradient(in lab, red, red))
• radial-gradient(circle at 50% -20%,#7234e60d,#0000 60%)
• radial-gradient(circle,#7234e61a,#0000 50%)
• radial-gradient(circle at center,rgba(,.1),transparent 70%)
• radial-gradient(at 50% -10%,#ffffff26,#0000 60%)
• radial-gradient(at 50% 0,#ffffff12,#0000 70%)
• radial-gradient(circle,#7234e626,#0000 70%)

> 1 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: ravoor — stack: ravoor

Display / heading typeface: ui-serif, Georgia, serif (used for large headings; body uses the primary stack)

Font stacks (most used first)

• ravoor
• var(--font-ravoor),ui-sans-serif,system-ui,sans-serif
• var(--font-ravoor),ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
• ravoor Fallback
• var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji")
• var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)
• var(--font-ravoor),ui-serif,Georgia,serif

Derived type scale

Font sizes (by frequency)

Weights in use: 500, 600, 700, 900

Line heights (by frequency)

Spacing

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 20px 40px #7234e614,0 0 0 1px #7234e61a
• 0 0 20px #7234e61a
• 0 0 40px #7234e640

Layout

Container max-width: 768px

Grid columns (largest detected grid): 6

Breakpoints

• 40rem
• 48rem
• 64rem
• 80rem
• 96rem

Animation & Motion

Transitions

• all .4s cubic-bezier(.4,0,.2,1)

Easing curves

• cubic-bezier(0,0,.2,1)
• cubic-bezier(.4,0,.6,1)
• cubic-bezier(.4,0,.2,1)
• var(--tw-ease,var(--default-transition-timing-function))
• cubic-bezier(.4,0,.2,1)

Keyframes

@keyframes shimmer { 0%{background-position:-200%}to{background-position:200%} }
@keyframes float { 0%,to{transform:translateY(0)}50%{transform:translateY(-10px)} }
@keyframes pulse-glow { 0%,to{box-shadow:0 0 20px #7234e61a}50%{box-shadow:0 0 40px #7234e640} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes ping { 75%,to{opacity:0;transform:scale(2)} }
@keyframes pulse { 50%{opacity:.5} }

Animations

• var(--animate-ping)
• var(--animate-pulse)
• var(--animate-spin)

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “ar”

button-secondary — sample text: “ابدأ مجاناً”

navigation-link

badge

Source Design Tokens (CSS custom properties)

:root {
  --font-ravoor: "ravoor","ravoor Fallback";
  --color-red-400: #ff6568;
  --color-red-500: #fb2c36;
  --color-amber-400: #fcbb00;
  --color-yellow-300: #ffe02a;
  --color-green-500: #00c758;
  --color-blue-400: #54a2ff;
  --color-blue-500: #3080ff;
  --color-pink-400: #fb64b6;
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cad5e2;
  --color-slate-400: #90a1b9;
  --color-slate-500: #62748e;
  --color-slate-600: #45556c;
  --color-slate-700: #314158;
  --color-slate-800: #1d293d;
  --color-slate-900: #0f172b;
  --color-black: #000;
  --color-white: #fff;
  --spacing: .25rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
  --text-xs: .75rem;
  --text-xs--line-height: calc(1/.75);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25/.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5/1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75/1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75/1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2/1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25/1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5/2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --text-7xl: 4.5rem;
  --text-7xl--line-height: 1;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --tracking-tighter: -.05em;
}

Do's and Don'ts

Do

• Do reserve the accent #9B66FF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do set large headings in ui-serif, Georgia, serif, and body copy in the primary stack.
• Do stick to the detected font weight(s): 500, 600, 700, 900.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #7234E6;
  --color-accent: #9B66FF;
  --color-background: #FFFFFF;
  --color-surface: #F0F5F2;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #D8D6DF;
  --color-border: #E2E8F0;
  --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: #F7F5F0;
  --color-surface-container-high: #F0F5F2;
  --color-surface-container-highest: #F1EFF7;
  --font-sans: ravoor;
  --font-size-body-md: 16px;
  --font-size-label-sm: 11px;
  --radius-sm: 4px;
  --radius-lg: 40px;
  --shadow-sm: 0 20px 40px #7234e614,0 0 0 1px #7234e61a;
  --shadow-md: 0 0 20px #7234e61a;
  --shadow-lg: 0 0 40px #7234e640;
  --font-display: ui-serif, Georgia, serif;
  --container-max: 768px;
}