StudyRise — DESIGN.mdLegacy format

### Primary Logo (Full Lockup)

• File: /logo.svg

• Dimensions: 755 × 285 (aspect ratio ~2.65:1)

• Contains: S-mark icon + "StudyRise" wordmark + tagline

• Background: transparent

### Icon / Favicon

• File: /favicon.svg

• Dimensions: 172 × 254 (aspect ratio ~0.68:1)

• Contains: S-mark only (gradient S with upward arrow)

• Background: transparent

• Use for: browser favicon, app icon, small UI placements

### Logo Usage Rules

• Minimum width for full lockup: 160px

• Minimum width for icon-only: 24px

• Never recolor, stretch, or add drop shadows

• On dark backgrounds: use as-is (transparent bg works on any surface)

• Clear space: at least 0.5× icon-height on all sides

---

### Buttons

| Variant | Background | Text | Border |

|---------|-----------|------|--------|

| Primary | #2563EB | white | none |

| Secondary | #EFF6FF | #2563EB | #BFDBFE |

| Danger | #FEF2F2 | #EF4444 | #FECACA |

| Ghost | transparent | #64748B | #E2E8F0 |

### Badges / Pills

| Variant | Background | Text |

|---------|-----------|------|

| Blue | #DBEAFE | #1D4ED8 |

| Green | #D1FAE5 | #065F46 |

| Amber | #FEF3C7 | #92400E |

| Red | #FEE2E2 | #991B1B |

| Purple | #EDE9FE | #5B21B6 |

| Gray | #F1F5F9 | #475569 |

### Cards

• Background: #FFFFFF

• Border: 1px solid #E2E8F0

• Border-radius: 12px

• Shadow: 0 1px 3px rgba(0,0,0,0.08)

• Padding: 20px–24px

### Sidebar (dark surface)

• Background: #0F172A

• Active item bg: rgba(37,99,235,0.15)

• Active item text: #93C5FD

• Inactive text: #94A3B8

• Hover bg: rgba(255,255,255,0.05)

---

```css

:root {

/ Brand /

--color-brand-navy: #0D1B3E;

--color-brand-blue: #2563EB;

--color-brand-blue-light:#3B82F6;

--color-brand-cyan: #06B6D4;

--color-brand-purple: #7C3AED;

/ Surfaces /

--color-surface: #FFFFFF;

--color-soft-blue: #EFF6FF;

--color-border: #E2E8F0;

--color-navy-sidebar: #0F172A;

/ Text /

--color-ink: #1E293B;

--color-muted: #64748B;

/ Semantic /

--color-success: #10B981;

--color-warning: #F59E0B;

--color-danger: #EF4444;

--color-info: #3B82F6;

/ Shape /

--rounded-card: 12px;

--rounded-btn: 8px;

--rounded-pill: 9999px;

/ Shadow /

--shadow-card: 0 1px 3px rgba(0,0,0,0.08);

--shadow-modal: 0 20px 60px rgba(0,0,0,0.15);

}

```

---

```jsx

// src/components/Logo.jsx

export default function Logo({ variant = 'full', className = '', style = {} }) {

if (variant === 'icon') {

return (

);

}

return (

);

}

// Usage:

// — full lockup

// — S-mark only

// — full lockup, 32px tall

```

---

• Confident, not arrogant — speaks to serious exam candidates

• Clinical clarity — precise, no fluff

• Motivating — progress-focused language

• Tagline energy: "PLAN TODAY. RISE TOMORROW." — all caps, tracked, understated

---

| ✅ Do | ❌ Don't |

|------|---------|

| Use navy + blue as the primary pairing | Use the gradient colors for text |

| Use pill badges for status | Use square badges |

| Keep sidebar always dark (#0F172A) | Use light sidebar |

| Use Inter for all UI text | Mix in decorative fonts |

| Transparent background for logos | Add white boxes behind logos |

| Uppercase + tracking for labels | Use uppercase for body text |