# Design System Inspired by Users

> Auto-extracted from `http://172.209.216.129:5000/Admin/User` on 2026-05-01

## 1. Visual Theme & Atmosphere

Friendly, approachable design with rounded shapes and generous whitespace.

The hero section leads with "Users".

**Key Characteristics:**
- Public Sans as the heading font
- Public Sans as the body font for all running text
- Heading weight 700, letter-spacing -0.36px
- Light/white background (#ffffff) as the primary canvas
- Primary accent `#dc3545` used for CTAs and brand highlights
- 2 shadow level(s) detected — tinted shadows
- Rounded corners (4px+) creating a friendly, approachable feel
- Tags: light, rounded, accented, compact, sans-serif

## 2. Color Palette & Roles

### Primary
- **Primary Accent** (`#dc3545`) · `--color-primary`: Brand color, CTA backgrounds, link text, interactive highlights.
- **Background** (`#ffffff`) · `--color-bg`: Page background, primary canvas.
- **Background Secondary** (`#f3f4f5`) · `--color-bg-secondary`: Cards, surfaces, alternating sections.

### Text
- **Text Primary** (`#222222`) · `--color-text`: Headings and body text.
- **Text Secondary** (`#737b82`) · `--color-text-secondary`: Muted text, captions, placeholders.

### Borders & Surfaces
- **Border** (`#f3f4f5`) · `--color-border`: Dividers, outlines, input borders.

### Full Extracted Palette

| # | Hex | CSS Variable | Role | Area | Contrast |
|---|---|---|---|---|---|
| 1 | `#ffffff` | `--palette-1` | block | large | text-dark |
| 2 | `#f3f4f5` | `--palette-2` | section | large | text-dark |
| 3 | `#ebebeb` | `--palette-3` | button | medium | text-dark |
| 4 | `#2a6572` | `--palette-4` | text-accent | small | text-light |
| 5 | `#737b82` | `--palette-5` | badge | small | text-light |
| 6 | `#566b7c` | `--palette-6` | text-accent | small | text-light |
| 7 | `#dc3545` | `--palette-7` | text-accent | small | text-light |

## 3. Typography Rules

- **Heading Font:** `Public Sans`, sans-serif
- **Body Font:** `Public Sans`, sans-serif

### Type Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing |
|---|---|---|---|---|---|
| H1 | Public Sans | 18px | 700 | 21.6px | -0.36px |

### Type Scale

| Token | Size | Suggested Usage |
|---|---|---|
| Display | `18px` | headings |
| H1 | `17px` | headings |
| H2 | `16px` | headings |
| H3 | `13px` | headings |
| H4 | `12px` | headings |

## 4. Component Stylings

### Primary Button

```css
.btn-primary {
  background: transparent;
  color: #222222;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0);
  cursor: pointer;
}
```

### Filled Button

```css
.btn-filled {
  background: #ffffff;
  color: #6b7280;
  border-radius: 50px;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 400;
  border: 1px solid rgb(229, 231, 235);
  cursor: pointer;
}
```

### Ghost Button

```css
.btn-ghost {
  background: transparent;
  color: #566b7c;
  border-radius: 4px;
  padding: 8px 8px;
  font-size: 12px;
  font-weight: 400;
  border: none;
  cursor: pointer;
}
```

### Filled Button 2

```css
.btn-filled-2 {
  background: transparent;
  color: #2a6572;
  border-radius: 4px;
  padding: 8px 8px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
```

### Ghost Button 2

```css
.btn-ghost-2 {
  background: transparent;
  color: #2a6572;
  border-radius: 4px;
  padding: 8px 8px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
}
```

### Filled Button 3

```css
.btn-filled-3 {
  background: #ffffff;
  color: #222222;
  border-radius: 4px;
  padding: 4.5px 8px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgb(207, 208, 211);
  cursor: pointer;
}
```

## 5. Layout Principles

- **Base spacing unit:** `8px` — use multiples (16px, 24px, 32px, etc.)

### Spacing Scale (extracted from real elements)

| Token | Value | Role |
|---|---|---|
| spacing-1 | `8px` | element |
| spacing-2 | `2px` | element |
| spacing-3 | `4.5px` | element |
| spacing-4 | `4px` | element |
| spacing-5 | `6px` | element |
| spacing-6 | `1px` | element |
| spacing-7 | `3px` | element |
| spacing-8 | `3.75px` | element |

### Border Radius Scale

| Token | Value | Element |
|---|---|---|
| radius-subtle | `4px` | subtle |
| radius-button | `8px` | button |
| radius-card | `50px` | card |
| radius-button | `6px` | button |
| radius-button | `12px` | button |

## 6. Depth & Elevation

| Level | Shadow | Usage |
|---|---|---|
| High | `rgba(16, 30, 54, 0.08) 0px 4px 24px 0px` | Modals, floating elements |
| Mid | `rgba(0, 0, 0, 0.1) 0px 4px 6px 0px` | Dropdowns, popovers |

> **Note:** This site uses chromatic (color-tinted) shadows rather than pure black — this is a deliberate brand choice that adds warmth to elevation.

## 7. Do's and Don'ts

### Do
- Use `#ffffff` as the primary background color
- Use `Public Sans` for all headings and `Public Sans` for body text
- Use `#dc3545` as the single dominant accent/CTA color
- Maintain `8px` as the base spacing unit — all gaps should be multiples
- Use rounded corners (`4px`+) consistently for all interactive elements
- Apply the shadow system for elevation — use the extracted shadow values
- Use weight 700 for headings to match the brand's typographic voice

### Don't
- Don't use colors outside the extracted palette without justification
- Don't substitute Public Sans/Public Sans with generic alternatives
- Don't use irregular spacing — stick to 8px grid
- Don't use dark/black backgrounds — this is a light-themed design
- Don't use sharp corners — they feel hostile in this rounded design language
- Don't use oversized hero text — this brand uses restrained type
- Don't use pure black (#000000) for text — use `#222222` instead
- Don't add decorative elements not present in the original design — no badges, ribbons, banners, or ornaments unless the source site uses them
- Don't invent UI patterns the source site doesn't have — if the original has no NEW badge, don't add one just because a red is in the palette

## 8. Responsive Behavior

| Breakpoint | Width | Notes |
|---|---|---|
| Mobile | < 640px | Single column, stack sections, reduce font sizes ~80% |
| Tablet | 640–1024px | 2-column where appropriate, maintain spacing ratios |
| Desktop | 1024–1440px | Full layout as designed |
| Wide | > 1440px | Max-width container, center content |

- Touch targets: minimum 44×44px on mobile
- Maintain 8px base unit across breakpoints — only scale multipliers

## 9. Agent Prompt Guide

### Quick Color Reference

```
Background:  #ffffff
Text:        #222222
Accent:      #dc3545
Border:      #f3f4f5
```

### Example Prompts

1. "Build a hero section with a `#ffffff` background, `Public Sans` heading in `#222222`, and a `#dc3545` CTA button with 50px radius."
2. "Create a pricing card using background `#f3f4f5`, border `#f3f4f5`, `Public Sans` for text, and 24px padding."
3. "Design a navigation bar — `#ffffff` background, `#222222` links, `#dc3545` for active state."
4. "Build a feature grid with 3 columns, 24px gap, each card using the card component style."
5. "Create a footer with `#222222` background, `#ffffff` text, and 16px padding."

### Iteration Guide

1. Start with layout structure (sections, grid, spacing)
2. Apply colors from the palette — background first, then text, then accents
3. Set typography — font families, sizes from the type scale, weights
4. Add components — buttons, cards, inputs using the specs above
5. Apply border-radius consistently across all elements
6. Add shadows for depth — use the extracted shadow values, not defaults
7. Check responsive behavior — test mobile and tablet layouts
8. Final pass — verify all colors match, spacing is consistent, fonts are correct

## 10. CSS Custom Properties

> 383 custom properties extracted from `:root` / `html` stylesheets.

### Color Variables

| Variable | Value |
|---|---|
| `--bs-blue` | `#0d6efd` |
| `--bs-indigo` | `#6610f2` |
| `--bs-purple` | `#6f42c1` |
| `--bs-pink` | `#d63384` |
| `--bs-red` | `#dc3545` |
| `--bs-orange` | `#fd7e14` |
| `--bs-yellow` | `#ffc107` |
| `--bs-green` | `#198754` |
| `--bs-teal` | `#20c997` |
| `--bs-cyan` | `#0dcaf0` |
| `--bs-white` | `#fff` |
| `--bs-gray` | `#6c757d` |
| `--bs-gray-dark` | `#343a40` |
| `--bs-gray-100` | `#f8f9fa` |
| `--bs-gray-200` | `#e9ecef` |
| `--bs-gray-300` | `#dee2e6` |
| `--bs-gray-400` | `#ced4da` |
| `--bs-gray-500` | `#adb5bd` |
| `--bs-gray-600` | `#6c757d` |
| `--bs-gray-700` | `#495057` |
| `--bs-gray-800` | `#343a40` |
| `--bs-gray-900` | `#212529` |
| `--bs-primary` | `#0d6efd` |
| `--bs-secondary` | `#6c757d` |
| `--bs-success` | `#198754` |
| `--bs-info` | `#0dcaf0` |
| `--bs-warning` | `#ffc107` |
| `--bs-danger` | `#dc3545` |
| `--bs-light` | `#f8f9fa` |
| `--bs-dark` | `#212529` |
| ... | *(52 more)* |

### Spacing Variables

| Variable | Value |
|---|---|
| `--radius-sm` | `2px` |
| `--radius-md` | `4px` |
| `--radius-lg` | `16px` |
| `--spacing-xs` | `4px` |
| `--spacing-sm` | `8px` |
| `--spacing-md` | `16px` |
| `--spacing-lg` | `24px` |
| `--sidebar-width` | `270px` |
| `--sidebar-width-collapsed` | `59px` |
| `--topbar-height` | `60px` |
| `--breadcrumb-height` | `40px` |
| `--page-title-height` | `40px` |
| `--container-padding-x` | `16px` |
| `--container-padding-mobile` | `16px` |
| `--container-padding-tablet` | `24px` |
| `--container-padding-desktop` | `24px` |
| `--mobile-xs` | `320px` |
| `--gutter-x` | `1.5rem` |
| `--kendo-spacing-0` | `0` |
| `--kendo-zindex-popup` | `1000` |
| ... | *(2 more)* |

### Typography Variables

| Variable | Value |
|---|---|
| `--bs-font-sans-serif` | `system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"` |
| `--bs-font-monospace` | `SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace` |
| `--bs-body-font-family` | `var(--bs-font-sans-serif)` |
| `--bs-body-font-size` | `1rem` |
| `--bs-body-font-weight` | `400` |
| `--bs-body-line-height` | `1.5` |
| `--text-color` | `var(--text)` |
| `--font-family-base` | `Public Sans, Arial, sans-serif` |
| `--font-family-heading` | `Public Sans, Arial, sans-serif` |
| `--font-family-body` | `Public Sans, Arial, sans-serif` |
| `--font-size-base` | `12px` |
| `--font-weight-normal` | `400` |
| `--font-weight-bold` | `600` |
| `--success-text-rgb` | `6, 118, 71` |
| `--warning-text-rgb` | `180, 83, 9` |
| `--danger-text-rgb` | `185, 28, 28` |
| `--info-text-rgb` | `7, 89, 133` |
| `--kendo-color-text` | `var(--text-color)` |
| `--kendo-color-component-text` | `var(--text-color)` |
| `--kendo-button-text` | `var(--text-color)` |
| ... | *(63 more)* |

### Other Variables

| Variable | Value |
|---|---|
| `--bs-primary-rgb` | `13,110,253` |
| `--bs-secondary-rgb` | `108,117,125` |
| `--bs-success-rgb` | `25,135,84` |
| `--bs-info-rgb` | `13,202,240` |
| `--bs-warning-rgb` | `255,193,7` |
| `--bs-danger-rgb` | `220,53,69` |
| `--bs-light-rgb` | `248,249,250` |
| `--bs-dark-rgb` | `33,37,41` |
| `--bs-white-rgb` | `255,255,255` |
| `--bs-black-rgb` | `0,0,0` |
| `--bs-body-rgb` | `33,37,41` |
| `--primary-color-rgb` | `42, 101, 114` |
| `--primary-hover-color-rgb` | `31.01538, 74.58462, 84.18462` |
| `--primary-active-color-rgb` | `22.77692, 54.77308, 61.82308` |
| `--secondary-color-rgb` | `156, 189, 43` |
| ... | *(181 more)* |