# Nano AI Proactive Hero Component - Figma Design Specifications

**Last Updated:** 2026-02-04  
**Source:** Figma screens provided for proactive Nano AI hero component  
**Implementation Status:** Pixel-perfect implementation completed - all values match Figma exactly

## Figma API integration

When a Figma personal access token is configured, design tokens (colors, dimensions) can be pulled directly from the Figma REST API instead of screenshots. See [FIGMA_API_INTEGRATION.md](../../development/FIGMA_API_INTEGRATION.md) for setup, scopes, and usage of `v2/scripts/nano-ai/fetch-figma-file.py` and `extract-figma-design-tokens.py`.

### API-derived design tokens (node 53851-1058)

Values below were extracted from `GET /v1/files/:key/nodes?ids=53851:1058` for the hero chat frame. Figma uses 0–1 RGB; hex conversion: `round(r*255)`, etc.

| Element                                | Figma (r,g,b)       | Hex       | Usage                        |
| -------------------------------------- | ------------------- | --------- | ---------------------------- |
| Main card stroke                       | 0.855, 0.859, 0.875 | `#DADBDF` | Chat window border           |
| Header divider (Line 10)               | 0.933, 0.937, 0.945 | `#EEEEF1` | Border below header          |
| Input / quick action fill              | 0.961, 0.961, 0.961 | `#F5F5F5` | Input pill & quick button bg |
| Input / quick stroke                   | 0.926, 0.927, 0.928 | `#ECECED` | Input & quick button border  |
| Placeholder "Wie kann ich dir helfen?" | 0.624, 0.631, 0.655 | `#9FA1A7` | Input placeholder text       |
| Quick action button text               | 0.373, 0.376, 0.392 | `#5F6064` | Quick button label text      |
| Fill (white)                           | 1.0, 1.0, 1.0       | `#FFFFFF` | Card background              |

**Typography (from TEXT nodes):** `fontFamily: "Inter"`, `fontWeight: 400`, placeholder and quick-action text; Figma font sizes are at design scale (e.g. 50, 36) — use 14px for body/placeholder and quick buttons in CSS.

**Radii (from RECTANGLE nodes):** Main card ~36px (scale to 16px for 500px width); input area ~90px (pill); quick action rects ~58px (use 8px in CSS for buttons).

## Color Palette

### Primary Colors

- **Background (White):** `#FFFFFF`
- **Text Primary:** `#111827` (dark gray/black)
- **Text Secondary:** `#6B7280` (medium gray)
- **Text Tertiary:** `#9CA3AF` (light gray, placeholders)

### Accent Colors

- **Ordio Blue (Active Accent):** `#4D8EF3` (for active shift card top bar)
- **Blue Light:** `#E8F2FF` (light blue backgrounds)
- **Blue Dark:** `#286bcd` (darker blue variant)

### Interactive Elements

- **CTA Button Background:** `#1F2937` or `#111827` (dark gray/black)
- **CTA Button Text:** `#FFFFFF` (white)
- **Button Hover:** Slightly lighter shade

### Borders & Dividers

- **Border Light:** `#EDEFF3` (light gray)
- **Border Medium:** `#E5E5E5` (medium gray)
- **Divider:** `#F0F0F0` (very light gray)

### Status Colors

- **Critical Alert Background:** `#FEE2E2` (light red/pink)
- **Critical Alert Text:** `#DC2626` (red)
- **Success/Positive:** `#10B981` (green)

### Chat Window

- **Window Background:** `#FFFFFF` (white)
- **Header Background:** `#FFFFFF` (white - exact Figma value)
- **Input Background:** `#EDEFF3` (light gray - exact Figma value)
- **Input Border:** None (no border in Figma design)

## Typography

### Font Family

- **Primary:** `Inter`, `-apple-system`, `BlinkMacSystemFont`, `sans-serif`
- **Fallback:** System sans-serif stack

### Font Sizes

- **Chat Window Title:** `14px` (regular weight, `line-height: 1.5`)
- **Nano Action Title:** `18px` (bold, `font-weight: 700`, `line-height: 1.2`, `letter-spacing: -0.01em`)
- **Scenario Title:** `18px` (bold, `font-weight: 700`, `line-height: 1.3`, `letter-spacing: -0.01em`)
- **Body Text:** `14px` (regular, `font-weight: 400`)
- **Shift Card Time:** `14px` (regular)
- **Shift Card Name:** `14px` (regular)
- **Shift Card Duration Badge:** `12-13px` (regular)
- **CTA Button Text:** `14px` (bold, `font-weight: 600`)
- **Quick Action Buttons:** `14px` (regular)

### Font Weights

- **Regular:** `400`
- **Medium:** `500`
- **Semibold:** `600`
- **Bold:** `700`

### Line Heights

- **Headings:** `1.2` or `1.3`
- **Body Text:** `1.6`
- **Compact:** `1.4`

### Letter Spacing

- **Normal:** `0` (default)
- **Tight:** `-0.01em` (for large headings)

## Spacing & Layout

### Border Radius

- **Chat Window:** `16px` (rounded corners - exact Figma value)
- **Nano Action Card:** `16px` (all corners - exact Figma value)
- **Shift Cards:** `12px` or `16px` (rounded corners)
- **Buttons:** `8px` or `12px` (rounded corners)
- **Input Field:** `24px` (pill-shaped, fully rounded)
- **Badges/Pills:** `6px` or `8px` (small rounded)

### Padding

- **Chat Window Header:** `16px 20px` (vertical horizontal - exact Figma value)
- **Nano Action Card:** `24px` (all sides - exact Figma value)
- **Shift Cards:** `12px 16px` (vertical horizontal)
- **Content Section:** `16px 0` (vertical horizontal)
- **Action Footer:** `16px 0` (vertical horizontal)
- **Input Field:** `12px 20px` (vertical horizontal)

### Gaps & Margins

- **Between Shift Cards:** `12px` or `16px`
- **Between Sections:** `16px` or `20px`
- **Card Shadow Offset:** `0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)`
- **Large Card Shadow:** `0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)`

### Component Dimensions

#### Chat Window

- **Width:** `500px` (desktop, max-width)
- **Height:** `600px` (desktop, flexible)
- **Mobile Width:** `100%` (responsive)
- **Mobile Height:** `450-500px` (responsive)

#### Shift Cards

- **Width:** `120-150px` (each card)
- **Height:** `80-100px` (flexible based on content)
- **Active Card:** Blue top bar `4px` height
- **Gap between cards:** `12px`

#### Nano Action Card

- **Width:** `100%` (fills chat content area)
- **Padding:** `20-24px`
- **Border Radius:** `16px`
- **Shadow:** Subtle drop shadow

#### CTA Button

- **Height:** `44px` (touch target)
- **Padding:** `12px 20px`
- **Border Radius:** `8px` or `12px`
- **Min Width:** `120px`

#### Icons

- **Size:** `16px` or `18px` (standard)
- **Small Icons:** `14px` (in buttons)
- **Large Icons:** `20px` (prominent actions)

## Shadows & Effects

### Card Shadows

```css
/* Standard Card Shadow */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

/* Large Card Shadow */
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

/* Button Shadow */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
```

### Hover Effects

- **Cards:** Slight elevation (increase shadow)
- **Buttons:** Slight darken or lighten
- **Icons:** Color change on hover
- **Transitions:** `0.2s` or `0.3s` ease-in-out

## Component Specifications

### Chat Window Header

- **Height:** `48px` or `52px`
- **Background:** `#F8F9FA` or `#FFFFFF`
- **Border Bottom:** `1px solid #F0F0F0`
- **Padding:** `12px 16px` or `16px 20px`
- **Elements:** Dropdown chevron, "Neuer Chat" text, window controls (plus, maximize, close)

### Nano Action Card Header

- **Height:** `48px` or `52px`
- **Padding:** `16px 20px`
- **Elements:** "Nano Action" title (bold, left), close button (X icon, right)

### Shift Cards Carousel

- **Container:** Horizontal scrollable
- **Card Width:** `120-150px`
- **Card Height:** `80-100px`
- **Active State:** Blue top bar (`#4D8EF3`, `4px` height), white background
- **Inactive State:** Light gray background, placeholder content
- **Content:** Time range (top-left), count ratio (top-right), name (center), duration badge (bottom-right)

### Content Section

- **Title:** Bold, `16-18px`, dark gray (`#111827`)
- **Description:** Regular, `14px`, dark gray (`#111827`), line-height `1.6`
- **Spacing:** `16px` gap between title and description

### Action Footer

- **Height:** `48px` or `52px`
- **Padding:** `16px 0`
- **Layout:** Flexbox, space-between
- **Left:** Two icon buttons (refresh, feedback)
- **Right:** CTA button with AI icon

### Chat Input Field

- **Height:** `44px` (touch target)
- **Background:** `#F5F5F5`
- **Border:** `1px solid #E5E5E5`
- **Border Radius:** `24px` (fully rounded)
- **Padding:** `12px 20px`
- **Placeholder:** "Wie kann ich dir helfen?" (`#9CA3AF`)
- **Elements:** Plus icon (left), send arrow (right)

### Quick Action Buttons

- **Height:** `44px` (touch target)
- **Background:** `#F5F5F5` or `#EDEFF3`
- **Border:** `1px solid #E5E5E5`
- **Border Radius:** `8px` or `12px`
- **Padding:** `12px 16px`
- **Gap:** `12px` between buttons
- **Text:** `14px`, regular weight

## Visual Component Types

### 1. Shift Cards (Default)

- Horizontal scrollable carousel
- 2-3 cards visible at once
- Active card highlighted with blue top bar

### 2. Percentage Cards (Overstaffing Scenario)

- Two cards side by side
- Left card: Current state (light red/pink background, `#FEE2E2`)
- Right card: Suggested state (dark gray background, `#1F2937`)
- Large percentage text (`42%`, `35%`)
- Hint text above right card: "4 Stunden ausplanen" (dashed border)

### 3. Grid Visualization (Pattern Recognition)

- 3x4 grid (3 rows, 4 columns)
- Light gray cells (`#EDEFF3`)
- One highlighted cell (dark gray, `#1F2937`, contains "61€")
- Rounded corners on each cell

### 4. Chart Visualization (Critical Quota)

- Bar chart with line overlay
- Light blue bars (`#E8F2FF` or `#DBEAFE`)
- Dark blue line (`#4D8EF3`)
- One bar highlighted in light red/pink (`#FEE2E2`)
- No explicit axes or labels (simplified)

## Animation Specifications

### Transition Duration

- **Card Fade In/Out:** `400-600ms`
- **Shift Card Transition:** `300ms`
- **Button Hover:** `200ms` or `300ms`
- **Auto-Cycle Delay:** `5000-6000ms` (5-6 seconds)

### Easing Functions

- **Standard:** `cubic-bezier(0.4, 0, 0.2, 1)` (ease-in-out)
- **Smooth:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)` (ease-out)
- **Bounce:** Not used (keep smooth)

### Animation Properties

- **Fade:** `opacity` from `0` to `1`
- **Slide:** `transform: translateY()` or `translateX()`
- **Scale:** `transform: scale()` (minimal, if used)

## Responsive Breakpoints

### Mobile (< 640px)

- Chat window: `100%` width
- Shift cards: `100px` width each
- Padding: Reduced to `12px`
- Font sizes: Slightly smaller (`13px` body)
- Card height: `450px`

### Tablet (640px - 1024px)

- Chat window: `90%` width, max `500px`
- Shift cards: `130px` width each
- Padding: `16px`
- Card height: `550px`

### Desktop (> 1024px)

- Chat window: `500px` width
- Shift cards: `150px` width each
- Padding: `20-24px`
- Card height: `600px`

## Accessibility

### Focus States

- **Outline:** `2px solid #4D8EF3`
- **Offset:** `2px`
- **Border Radius:** Match element radius

### ARIA Labels

- "Nano Action suggestion"
- "Shift card"
- "Accept suggestion"
- "Close Nano Action"
- "Refresh suggestion"
- "Provide feedback"

### Keyboard Navigation

- **Tab:** Navigate through interactive elements
- **Enter/Space:** Activate buttons
- **Arrow Keys:** Navigate scenarios (if implemented)
- **Escape:** Close Nano Action card

### Reduced Motion

- Respect `prefers-reduced-motion: reduce`
- Disable auto-cycle animations
- Use instant transitions instead of fades

## Icon Specifications

### Refresh Icon

- Circular arrow (clockwise)
- Size: `16px` or `18px`
- Color: `#6B7280` (gray)
- Hover: `#111827` (dark gray)

### Feedback Icon

- Speech bubble with star inside
- Size: `16px` or `18px`
- Color: `#6B7280` (gray)
- Hover: `#111827` (dark gray)

### AI Icon

- Stylized "AI" text with sparkle/starburst
- Size: `16px` or `18px`
- Color: `#FFFFFF` (white, on dark button)
- Sparkle: Small star or sparkle symbol

### Close Icon (X)

- Simple X shape
- Size: `16px` or `18px`
- Color: `#6B7280` (gray)
- Hover: `#111827` (dark gray)

### Window Controls

- **Plus:** `+` symbol, `14px`
- **Maximize:** Square outline with two diagonal arrows (top-right and bottom-left L-shapes), `14px`
- **Close:** `X` symbol, `14px`
- Color: `#6B7280` (gray)
- Hover: `#111827` (dark gray)

## Nano Action Card - "Offene Schicht" (node 53851-1048)

### Card Structure

- **Container**: White background (`#FFFFFF`), `16px` border radius, standard card shadow
- **Header**: `16px 20px` padding, `1px solid #EEEEF1` bottom border
- **Content**: `24px` padding, flex column with `16px` gap

### Typography

- **Header Title ("Nano Action")**: `18px`, `font-weight: 700`, `line-height: 1.2`, `letter-spacing: -0.01em`
- **Category Badge**: `12px`, `font-weight: 500`, `line-height: 1.5`
- **Card Title**: `18px`, `font-weight: 700`, `line-height: 1.3`, `letter-spacing: -0.01em`
- **Description**: `14px`, `font-weight: 400`, `line-height: 1.6`
- **CTA Button**: `14px`, `font-weight: 600`, `line-height: 1.5`

### Colors

- **Category Badge**: Background `#F3F4F6`, border `#E5E7EB`, text `#6B7280`
- **CTA Button**: Background `#1F2937`, text `#FFFFFF`, hover `#374151`

### Spacing

- **Card Padding**: `24px` (content area)
- **Header Padding**: `16px 20px`
- **Content Gap**: `16px` between elements
- **CTA Button**: `12px 20px` padding, `44px` height

### Components

- **Close Button**: `28px × 28px`, transparent background, hover `rgba(0, 0, 0, 0.05)`
- **CTA Button**: `44px` height, `8px` border radius, includes arrow icon (`16px`)

## Notes

- All measurements are approximate based on Figma screen analysis
- Colors may need slight adjustment to match exact Figma values
- Spacing should be consistent throughout component
- Shadows should be subtle, not heavy
- All interactive elements should have clear hover states
- Icons should be SVG for scalability
- Font rendering should match Inter font exactly