Settings
Settings open as an overlay on top of the main application, not as a separate page. They contain a horizontal menu of six tabs plus a Close settings button in the top-right corner.
Background: the dark blue gradient #122942 → #2f5e99, with a mountain landscape at 15 % opacity (blur 3px, mix-blend-overlay).
The application's top navigation bar is present on every settings page: Study, AMADEQ (logo), Home, Avatars, Library.
5.1 Settings menu
A horizontal menu of six icons with labels, placed beneath the top navbar:
| Tab | Icon | Figma name |
|---|---|---|
| Profile | 👤 | Menu icon: Profile |
| Notifications | 🔔 | Menu icon: Bell |
| Plans | 💳 | Menu icon: Card |
| Privacy | 🔒 | Menu icon: Shield |
| Data | ✏️ | Menu icon: Data |
| Settings | ⚙️ | Menu icon: Gear |
The active tab is at full opacity with a drop shadow; inactive tabs are at 50 % opacity.
5.2 Profile tab
Figma node: 5394:16014 · Route: /settings/profile
Content of the centre column:
| Field | Type | Placeholder / value |
|---|---|---|
| Username | Text input | "Profile Name" |
| Password | Password input with an eye toggle | *********** |
| Country | Dropdown | "Ukraine" |
| My Age | Dropdown | "27" |
| Your tokens | Display | 15 (gold) |
| Your rate | Display | 15 (gold) |
| About Me | Textarea / read-only | Bio text |
Buttons at the bottom: Log Out (neutral) and Delete Account (red / danger).
Technical requirements
- Inputs: white background, inner shadow,
rounded-tr-[32px] rounded-br-[28px]. - Dropdowns: glass effect with a chevron icon.
- Password: visibility toggle (eye icon).
- Tokens and rate: display only, not editable.
Delete Accountopens theDeleteAccountModal.
5.3 Notifications tab
Figma node: 5394:17668 · Route: /settings/notifications
Heading: Notifications & Reminders
Settings rows, each a label plus an On/Off switcher:
| Name | Switcher type |
|---|---|
| Daily learning reminder | On 10:00 / Off (with a time) |
| Weekly progress report | On / Off |
| New content alerts | On / Off |
| Achievement notifications | On / Off |
| Subscribe to news and updates | On / Off |
Switcher component: pill-shaped, a gold gradient for "On", with the "Off" label to its right.
Technical requirements
- "Daily learning reminder" needs a time picker for the reminder time.
- The state is persisted in the user's profile through an API endpoint.
5.4 Plans tab — compact view
Figma node: 5394:18089 · Route: /settings/plans
Three-column layout
Left column — "My Plan": the user's current plan as a Plan (PC) card, showing the plan name in gold, the price, a feature list, and a red Unsubscribe button.
Centre column — details:
- The heading
My plan. - Method of payment —
Cart (...4111). - Date —
01.01.26. - Automatic payment — an On/Off switcher.
- Password — the text button
Open history. - A
Show all plansbutton, which expands the four cards.
Right column — "Update To": the next or recommended plan as a card, with an Upgrade button (gold border, gold text).
5.5 Plans tab — all plans view
Figma node: 5394:19037 · Route: /settings/plans (expanded)
Clicking Show all plans replaces the centre area with four cards in a row:
| Card | Name | Price | Button |
|---|---|---|---|
| 1 | Visitor (Free Demo) | $0 | Unsubscribe (red) |
| 2 | Explorer (Free Demo) | $20/month | Upgrade (gold) |
| 3 | Founders Edition (Limited — 1000 users) | $100 lifetime | Upgrade (gold) |
| 4 | Organizations (Early Access) | Custom pricing | Upgrade (gold) |
A Hide all plans button at the bottom returns to the compact view.
The Plan (PC) card: 5394:18457 — a glassmorphism card, linear-gradient(180deg, rgba(97,146,199,0) 0%, rgba(97,146,199,0.5) 50%, rgba(97,146,199,0) 100%), drop shadow 16px.
5.6 Plans tab — payment history modal
Figma node: 5394:22371. Opens when Open history is clicked in the Plans tab.
A payment table on the left of the screen:
| Column | Example value |
|---|---|
| Chat / name | Chat 1 |
| Date | 25.03.2026 |
| Total | USD 20.00 |
| Status | Paid |
The row repeats for each payment. A Close button sits at the bottom.
5.7 Privacy tab
Figma node: 5394:19424 · Route: /settings/privacy
Heading: Privacy & Data
Section 1 — permissions (toggles)
| Name | Switcher |
|---|---|
| Voice recording permission | On / Off |
| Data used for AI learning | On / Off |
| Anonymous analytics | On / Off |
A divider line separates the sections.
Section 2 — GDPR rights (toggles with descriptions)
| Name | Description |
|---|---|
| Right of access | The right to know which data is processed |
| Right to deletion | The "right to be forgotten"; deletion within one month |
| The right to restrictions | Temporary restriction of data processing |
| Withdrawal of consent | Withdraw consent through "Unsubscribe" in an email |
| Right to rectification | Correction of incorrect data |
Technical requirements
- The GDPR toggles are effectively informational: they show whether each right is enabled.
- Keep a consent log in the database.
5.8 Data tab
Figma node: 5394:20195 · Route: /settings/data
Heading: Data Management
| Name | Action |
|---|---|
| Location permission | An On/Off switcher with a description |
| Archived chats | The button Open List |
| Archive all chats | The button Archive |
Bottom button: Deleting Data (red / danger), which opens the delete modal.
5.9 Delete account / chat modal
Figma node: 5394:20444. Opens as an overlay on top of Settings.
Content
- Heading:
Deleting account. - A warning with four points about the deletion being irreversible.
- The field
Confirm password, with an eye toggle. - The buttons
Cancel(neutral) andDelete(red, at 50 % opacity until a password is entered).
Technical requirements
- The
Deletebutton activates only once a password has been entered. - It calls
DELETE /api/user/accountwith the confirmation. - On success, redirect to the landing page.