Sadeemhost

# Design System Inspired by Sadeemhost

## Visual Theme & Atmosphere
The design system draws inspiration from a modern, high-contrast web hosting platform with a dark-themed interface and bright accent highlights. The overall atmosphere evokes professionalism with energetic pops of color for emphasis and clarity.

**Key Characteristics:**
- Dark, muted backgrounds with vibrant accent colors.
- Clear hierarchy using large, bold typography for headings.
- Friendly, approachable feel through rounded shapes and generous spacing.
- Bright accent buttons and highlights to guide user attention.
- Minimalist, clean visual presentation with emphasis on content clarity.

## Color Palette & Roles

**Primary**
- Pink Rose `#ee5586` - Primary brand color used for important callouts, badges, and highlights.
- Blue Royal `#0d6efd` - Brand color used for links and secondary accents.

**Accent**
- Blue Accent `#007aff` - Accent color used in interactive elements and status indicators.
- Red Error `#dc3545` - Used for error states and critical alerts.
- Yellow Highlight `#ffc107` - Used for warnings, highlights, and call-to-action buttons.
- Green Success `#198754` - Used in success messages and positive indicators.

**Neutral Scale**
- Dark Gray `#212529` - Primary neutral text color on light backgrounds.
- White `#ffffff` - Surface and text on dark backgrounds.
- Medium Gray `#6c757d` - Secondary text and subdued UI elements.
- Darker Gray `#343a40` - Deeper neutral backgrounds or borders.
- Soft Gray `#f8f9fa` - Light background surfaces.
- Black `#000000` - Strong text or icons.
- Very Dark Gray `#181b22` - Dark surface backgrounds.
- Light Gray `#e9ecef` - Surface colors for subtle background panels.

**Surface & Borders**
- White `#ffffff` - Main surface and card backgrounds.
- Soft Gray `#f8f9fa` - Secondary surface backgrounds.
- Light Gray `#e9ecef` - Tertiary surface or border shading.

**Semantic**
- No explicit semantic colors defined beyond accent roles.

## Typography Rules

**Families**  
- Display: "Open Sans Bold"  
- Body: "Open Sans"

| Role    | Font            | Size (px) | Weight | Line Height | Letter Spacing | Notes            |
|---------|-----------------|-----------|--------|-------------|----------------|------------------|
| Display | Open Sans Bold  | 52        | 400    | 24px        | Not specified  | Large headline   |
| H1      | Open Sans       | 42        | 400    | 24px        | Not specified  | Primary page titles |
| H2      | Open Sans       | 32        | 400    | 24px        | Not specified  | Section headings  |
| H3      | Open Sans       | 26        | 400    | 24px        | Not specified  | Sub-headings     |
| Body    | Open Sans       | 20        | 400    | 24px        | Not specified  | Paragraph text   |
| Caption | Open Sans       | 18        | 400    | 24px        | Not specified  | Small descriptive text |

**Typography Principles:**
- Maintain consistent line height of 24px across all text roles for vertical rhythm.
- Use a single family to ensure brand cohesion and readability.
- Weight remains at 400 for a clean, modern look without heavy boldness except for display "Open Sans Bold".

## Component Stylings

**Buttons**
- Primary/Filled: Background `#ffc107` (Yellow Highlight), border-radius 15px, padding based on spacing scale, font weight 400.
- Ghost: Transparent background, no border or minimal border with primary color, border-radius 4px or 15px depending on size.
- Focus: Emphasized outlines or shadows are not explicitly defined in tokens but typically use accent colors for focus.

**Cards**
- Background: Transparent to surface colors (`#ffffff`, `#f8f9fa`, `#e9ecef`).
- Border-radius: 0px in detected token; likely override with radius scale for rounded corners.
- Padding & box-shadow: Detected as 0 or none, but elevation could be applied for raised effect.
  
**Inputs**
- Border-radius: 4px or 15px depending on usage (inferred from radii scale).
- Border color likely using neutral medium gray or accent colors on focus.
- Background: likely surface colors from neutral scale.
- Padding: based on spacing scale, around 10-20px vertical/horizontal.

**Navigation**
- Background: Transparent (`rgba(0,0,0,0)`).
- Color: `#212529` (neutral dark gray).
- Border-radius: 0px.
- Padding: 0px detected; probably uses margin or spacing elsewhere.
- Font-size: 16px, weight: 400.
  
## Layout Principles

- **Spacing Scale:** Base 10px; scales at 10, 20, 30, 40, 50, 80, 100 px increments.
- **Container/Grid Widths:** Not explicitly defined in tokens, assumed fluid or adaptive within breakpoints.
- **Whitespace:** Generous use of spacing around elements to focus attention and structure content clearly.
- **Radius Scale:**  
  - None: 0px  
  - Small: 4px  
  - Medium: 15px  
  - Large: 50px (used sparingly for pronounced pill shapes or big rounded corners)

## Depth & Elevation

| Level   | Shadow                                  | Use                                    |
|---------|-----------------------------------------|---------------------------------------|
| Flat    | rgba(0, 0, 0, 0) 0px 0px 0px 9999px inset | Base state, no shadow effect          |
| Raised  | rgba(110, 110, 110, 0.1) 0px 5px 15px 0px  | Elevated cards or buttons              |
| Overlay | rgba(62, 62, 79, 0.23) 0px 2px 8px 0px    | Light modal overlays                   |
| Modal   | rgba(62, 62, 79, 0.15) 0px 2px 8px 0px    | Modals with subtle shadow for depth   |

## Do's and Don'ts

**Do's**
- Use bright accent colors sparingly to highlight key actions or information.
- Maintain consistent vertical rhythm with the line height of 24px.
- Apply border radius clearly according to the radius scale for UI harmony.
- Use dark neutral backgrounds with white or light text for readability.

**Don'ts**
- Avoid mixing too many font families or font weights.
- Do not invent custom shadows or colors outside the palette.
- Avoid cluttered layouts with insufficient spacing.
- Do not use harsh color contrasts beyond the defined palette.

## Responsive Behavior

| Breakpoint | Min Width (px) | Max Width (px) |
|------------|----------------|---------------|
| Mobile     | 420            | 574.98        |
| Tablet     | 575.98         | 575           |
| Laptop     | 576            | 766           |
| Desktop    | 767            | 766.98        |
| Wide       | 767.98         | -             |

- Touch targets: Minimum 40-50px recommended based on spacing units (10-20px scale multiples).
- Collapsing strategy: Navigation and menus become stacked or hidden behind toggles below tablet breakpoints.
  
## Agent Prompt Guide

**Quick Colour Reference:**
- Primary: `#ee5586` (Pink Rose), `#0d6efd` (Blue Royal)
- Accent: `#007aff` (Blue), `#dc3545` (Red Error), `#ffc107` (Yellow Highlight), `#198754` (Green Success)
- Neutral: Dark Gray `#212529`, White `#ffffff`, Medium Gray `#6c757d`
- Surface: White `#ffffff`, Soft Gray `#f8f9fa`, Light Gray `#e9ecef`

**Iteration Rules:**
- Use tokens only; no extrapolated values.
- Preserve the declared typography scale and family usage strictly.
- Apply spacing increments as multiples of base 10px scale.
- Maintain consistent border radius from token radii values only.
- Shadows must use tokens exactly; do not invent new shadow styles.
- Color usage must align with palette role and usage notes only.
- Respect breakpoints strictly for responsive layouts.

This guide ensures code implementations match the Sadeemhost brand identity consistently.