Mobile App

Mobile application screens: settings, agents, and onboarding/auth.

9. Mobile app settings

Shared patterns

Background: bg-gradient-to-b from-[#2e5f98] to-[#0d2440].

Top horizontal settings menu: six tabs — Profile | Notifications | Plans | Privacy | Data | Settings.

• Container: border-4 border-[rgba(13,36,64,0.25)] rounded-[87px], pb-[6px] pt-[12px] px-[24px].
• Active tab: drop-shadow-[12px_12px_6px_rgba(0,0,0,0.25)], 109px high.
• Inactive tab: opacity-50.

Bottom navigation bar (5 icons): Study | Symbol | Home | Avatars | Library — each 96px.

Breadcrumb: "Settings > [Section]" on the left (opacity-50), the AMADEQ logo on the right (96px).

Toggle

• Container: rounded-[64px], glass gradient.
• Active state: a gold gradient from-[rgba(201,162,39,0.25)] to-[rgba(242,210,122,0.25)] plus border border-[rgba(242,210,122,0.5)].
• "On" / "Off" text: 48px, Alexandria Medium.

9.1 My Profile (3628:561)

Active menu tab: Profile.

Profile fields — a vertical list; each field is a glass card, rounded-[24px]:

• Username (with an Edit icon).
• Password (with an Edit icon; the value is masked as ••••••••).
• Country.
• Age.

Tokens and rating block — a horizontal row of two cards:

• Tokens: a numeric value plus a coin icon.
• Rate: a star rating plus a numeric value.

About me: a rounded-[24px] text field, multiline, glass.

Bottom buttons

• Log Out — secondary, transparent with a border.
• Delete Account — destructive, red accent or opacity-50.

9.2 Notifications & Reminders (3974:1032)

Active menu tab: Notifications.

Five toggle rows — each flex justify-between items-center in a glass card, rounded-[24px]:

#	Name	Default state
1	Daily learning reminder	On (10:00 time picker)
2	Weekly progress report	On
3	New content alerts	On
4	Achievement notifications	On
5	Subscribe to news and updates	On

Time picker for "Daily learning reminder": a 10:00 time input to the right of the toggle, rounded-[16px], glass.

9.3 My Plan (3974:1173)

Active menu tab: Plans.

Payment block (glass card, rounded-[24px])

• Payment method: a card icon plus Cart ...4111.
• Date: 01.01.26.

Weekly report toggle: a "Weekly report" row with the toggle On.

"Open history" button: secondary, rounded-[64px], opens the payment history.

Plan cards (horizontal scroll or a stack)

• Visitor — $0 / month, basic features.
• Founders Edition — $20 / month, full access, gold accent.

Card style: the pricing gradient linear-gradient(180deg, rgba(97,146,199,0) 0%, rgba(97,146,199,0.45) 40%, rgba(97,146,199,0.5) 50%), rounded-[36px], with a shadow.

9.4 Payment History (3974:1275)

Active menu tab: Plans.

Transaction table (glass container, rounded-[24px])

Column	Example value
Date	25.03.2026
Total	USD 20.00
Status	Paid

Multiple repeated rows form the payment list, separated by thin dividers.

"Close" button: rounded-[64px], returns to My Plan, centred at the bottom.

9.5 Visitor Plan Detail (4013:2)

Active menu tab: Plans.

Large plan card (740×1298px, pricing gradient, rounded-[36px])

• Name: Visitor.
• Price: $0 / month.
• Feature list (bulleted, with check icons): basic learning capabilities · limited agent access · the standard library.

"Unsubscribe" button: destructive, rounded-[64px], placed under or inside the card.

Navigation between plans: ← / → arrows for paging through the plan cards.

9.6 Explorer Plan Detail (4013:123)

Active menu tab: Plans.

Large plan card (740×1298px, pricing gradient, rounded-[36px])

• Name: Explorer (Free Demo).
• Price: $0.
• Feature list (bulleted, with check icons): demo access to agents · a limited number of sessions · introductory materials.

"Upgrade" button: primary gold, bg-gradient-to-r from-[#C9A227] to-[#F2D27A], rounded-[64px].

Navigation between plans: ← / → arrows.

9.7 Privacy & Data (3974:1385)

Active menu tab: Privacy.

Basic settings section (three toggle rows)

#	Name	State
1	Voice recording	On
2	Data for AI improvement	On
3	Anonymous analytics	On

A divider separates the sections.

GDPR rights section — heading "Your rights", four or more rows each with a toggle and descriptive text:

#	Right	State
1	Right of access	On
2	Right to deletion	On
3	Right to restrictions	On
4	Withdrawal of consent	On

• The description under each right: opacity-50, 32px, Alexandria Regular.
• The bottom two rows render at opacity-25–opacity-50 as a scroll fade-out effect.

10. Mobile app — agents

Shared patterns

Background: bg-gradient-to-b from-[#2e5f98] to-[#0d2440].

Top My Agents / Marketplace switcher

• Container: border-2 border-[rgba(13,36,64,0.25)] rounded-[44px].
• Active tab: shadow-[12px_12px_12px_0px_rgba(0,0,0,0.25)].
• Inactive tab: opacity-50.

YouAgentsMenu (the My Agents context, five tabs)

• Tabs: Avatar | Information | Market | Comments | Settings.
• Container: border-4 border-[rgba(13,36,64,0.25)] rounded-[87px].
• Active tab: drop-shadow-[12px_12px_6px_rgba(0,0,0,0.25)]; inactive: opacity-50.

MarketMenu (the Marketplace context, three tabs)

• Tabs: Avatar | Information | Comments, with the same container and state styles.

Agent card (a two-column grid, 496px wide)

• Container: rounded-[20px], shadow-[16px_16px_24px_0px_rgba(0,0,0,0.16)].
• Avatar photo: 471×471px, rounded-[8px], object-bottom.
• Rating overlay: three stars (opacity-50) plus the text "4.2/5" and an info icon.
• Subject tags: bg-gradient-to-r from-[rgba(231,240,250,0.08)] to-[rgba(231,240,250,0)] rounded-[36px], 32px.
• Agent name: text-[#e6b84c] text-[48px].
• Description: text-[#e7f0fa] text-[24px], Space Grotesk Regular.
• Price badge: bg-gradient-to-r from-[rgba(230,184,76,0.25)] to-[rgba(230,184,76,0.13)] rounded-[36px], the text "$32".

Comment component (188px high, 12px between elements)

• Avatar: a 136px circle, rounded-[146px], shadow-[inset_4px_4px_4px_0px_rgba(0,0,0,0.25)].
• Date: Space Grotesk Regular 24px, white at opacity-[66%].
• Comment text: Space Grotesk Regular 32px, white at opacity-[66%].
• Row fade-out sequence: 100 % → 100 % → 75 % → 50 % → 25 %.

Comment input

• Container: rounded-[64px], bg-[#e7f0fa].
• Placeholder "Leave your comment": Space Grotesk Light 40px, text-[#0d2440] opacity-50.
• Send button: a 96px circle with a gold arrow.

Bottom navigation bar: Study | Symbol | Home | Avatars | Library — Avatars active (96px icons).

10.1 My Agents — listing (4034:243)

Purpose: the list of agents in the user's personal library.

• Breadcrumb: "Agents" on the left (opacity-50), the AMADEQ logo on the right (96px).
• The My Agents / Marketplace switcher, with My Agents active.
• Search and sort row:
  • Search field: rounded-[64px], bg-[rgba(231,240,250,0.12)], a search icon plus a 40px placeholder.
  • Sort button: rounded-[32px], bg-[rgba(231,240,250,0.12)], a filter icon.
• Horizontal category filter (chips):
  • Style: bg-[rgba(231,240,250,0.12)] border-2 border-[rgba(255,255,255,0)] rounded-[32px].
  • Example categories: All | Math | Science | History | Language | …
• Agent grid: two columns, 496px cards, gap-[24px].

10.2 Agent Detail (Marketplace) — Avatar / Demo tab (4059:840)

Purpose: the agent's detail view in the Marketplace context, on the Avatar tab with demo mode.

• Breadcrumb: "← Close" (opacity-50, rounded-[46px]) plus "Agents → Adam".
• Switcher: Marketplace active.
• Adam's photo: 882×1180px, rounded-[12px], object-bottom.
• Name "Adam" plus rating: text-[#e6b84c] text-[64px], 36px stars, "4.2/5".
• MarketMenu (three tabs): Avatar active.
• START DEMO button (centred in the lower area):
  • bg-gradient-to-t from-[rgba(201,162,39,0.25)] to-[rgba(242,210,122,0.25)]
  • border-2 border-[#e6b84c]
  • text-[#c9a227] text-[96px]
  • rounded-[72px]
• GET AGENT button with the price "$32": border-2 border-[#e6b84c] text-[#c9a227] text-[64px] rounded-[72px].

10.3 Agent Detail (My Agents) — Avatar / Customize tab (4049:186)

Purpose: the detail view of your own agent, on the Avatar tab.

Differences from §10.2 (Marketplace)

• Switcher: My Agents active.
• YouAgentsMenu (five tabs) instead of MarketMenu, with Avatar active.
• A Customize button instead of START DEMO: border-2 border-[#e6b84c] text-[#c9a227] text-[64px] rounded-[72px].
• No GET AGENT or price — the agent is already owned.

Shared with §10.2: breadcrumb, agent photo, name plus rating.

10.4 Agent Detail (Marketplace) — Information tab (4059:1057)

Purpose: the agent's descriptive information in the Marketplace context.

• Breadcrumb plus the Marketplace switcher, as in §10.2.
• MarketMenu: Information active.
• Agent description block:
  • The heading "Adam" plus the rating at the top.
  • Long description text: text-[#e7f0fa], Space Grotesk Regular 32px.
  • Subject tags: chips with rounded-[36px].
  • Statistics: number of students, ratings, and so on.
• GET AGENT button ($32) at the bottom, in the same border-2 border-[#e6b84c] style.

10.5 Agent Detail (My Agents) — Information tab (4049:579)

Purpose: the descriptive information for your own agent.

Differences from §10.4

• Switcher: My Agents active.
• YouAgentsMenu: Information active.
• A To Study button at the bottom instead of GET AGENT: border-2 border-[#e6b84c] text-[#c9a227] text-[64px] rounded-[72px].

Shared with §10.4: the description block, tags, and statistics.

10.6 Agent Detail — Comments tab (4059:1183)

Purpose: comments and reviews about the agent.

• Breadcrumb plus the switcher (Marketplace or My Agents).
• MarketMenu or YouAgentsMenu: Comments active.
• A list of five comments; each row is the comment component (a 136px avatar plus date and text). Fade-out: rows 1–2 at full opacity, row 3 at 75 %, row 4 at 50 %, row 5 at 25 %.
• The comment input at the bottom: bg-[#e7f0fa] rounded-[64px], placeholder "Leave your comment" in Space Grotesk Light 40px, and a 96px circular send button with a gold arrow.

10.7 Marketplace — agents with sort filters (4059:1320)

Purpose: the extended marketplace catalogue view with filters.

• Breadcrumb plus the switcher, with Marketplace active.
• A search row identical to §10.1.
• A horizontal filter row (sort chips): Stars | Gender | Sort | Price.
  • Style: bg-[rgba(231,240,250,0.12)] border-2 border-[rgba(255,255,255,0)] rounded-[32px].
  • Each chip carries an icon plus a text label.
• Agent grid: two columns, 496px cards, identical to the shared component with the "$32" price badge.

11. Mobile app — onboarding and auth

Shared patterns

Background: bg-gradient-to-b from-[#122942] to-[#2f5e99] plus a photograph of the globe (positioned left-[-108%] top-[-1.3%] w-[414%]) and a translucent radial-gradient vignette texture at 20 % opacity.

Canvas: 1080×2340px portrait.

AMADEQ logo: the wordmark at w-[702px] h-[164px], at the top of every onboarding screen.

Glass card container

• bg-gradient-to-b from-[rgba(13,36,64,0)] via-[rgba(13,36,64,0.75)] to-[rgba(13,36,64,0)]
• rounded-[36px], shadow-[16px_16px_24px_0px_rgba(0,0,0,0.16)]
• 964px wide, with p-[64px] padding.

Primary action button: border-2 border-[#e6b84c] text-[#c9a227] text-[64px] rounded-[72px] (Alexandria Regular).

"Skip for now" link: Space Grotesk Regular 32px, opacity-50, a white-to-grey gradient.

Onboarding navigator (UpNavigation, 225px)

• Three step icons in a row: the active step is a large 128px icon (BigLogo); inactive steps use a small 64px icon (SmallLogo) or a numbered icon.
• The active step's name sits under the icon: Space Grotesk Regular 64px, a white → white 50 % gradient.

Selection card (Box)

• bg-[rgba(231,240,250,0.06)] border-2 border-[rgba(255,255,255,0)] rounded-[24px].
• Size 386×264px, padding pb-[12px] pt-[18px] px-[12px].
• Icon: 128px (a rounded 3D icon).
• Text: Space Grotesk Bold 36px, text-[#fff2c2], centred.

11.1 Profile entry — Welcome (2562:1725)

Purpose: the first screen after a new user launches the app, or after signing out.

• At the top: a Power/Back icon (96px, opacity-50).
• Central glass card:
  • LOGO BIG (512px, the AMADEQ Q mark in a dashed circle).
  • The text "Let's start the adventure": Space Grotesk Regular 64px, text-[#fff2c2], text-shadow-[12px_12px_12px_rgba(0,0,0,0.25)].
  • The "My profile" button: border-2 border-[#e6b84c] text-[#c9a227] text-[64px] rounded-[72px].

11.2 Sign Up (4103:321)

Purpose: registering a new account.

• The AMADEQ logo at the top.
• The card (glass, p-[64px]):
  • LOGO BIG (512px) plus two 36px arrow icons on either side.
  • Social sign-in (four rows): Sign in with Google / Apple / Facebook / Microsoft.
    • Container: bg-gradient-to-r from-[rgba(231,240,250,0.25)] to-[rgba(231,240,250,0)] rounded-[53px].
    • A 48px icon plus Space Grotesk Regular 48px text, in a white-to-grey gradient.
  • Input fields (three fields, identical styling):
    • Wrapper: bg-gradient-to-r from-[rgba(231,240,250,0.25)] to-[rgba(231,240,250,0)] rounded-[52px].
    • Inner field: bg-white rounded-[41px], shadow-[inset_0px_4px_4px_0px_rgba(0,0,0,0.25)].
    • Placeholder: Space Grotesk Light 48px, text-[#0d2440] opacity-50.
    • Fields: Email... / Password... / Confirm Password...
  • Checkboxes (two rows):
    • "Subscribe to news and updates (optional):" — toggle off (grey, bg-[rgba(231,240,250,0.75)], shadow-[inset_0px_4px_4px_0px_rgba(0,0,0,0.25)]).
    • "Consent to personal data processing (required):" — toggle on.
    • Text: Space Grotesk Regular 32px, white-to-grey gradient.
  • The Sign Up button: border-2 border-[#e6b84c] text-[#c9a227] text-[64px] rounded-[72px].
  • The link "Already have an account? Sign In": 32px, with "Sign In" in text-[#fff2c2].

11.3 Sign In (4103:417)

Purpose: signing in to an existing account.

Differences from §11.2 (Sign Up)

• No "Confirm Password..." field.
• No checkboxes.
• The button reads Sign in instead of Sign Up.
• An access row (AccesText, 810px): "Don't have an account?" (white-to-grey gradient) plus "Sign Up" (text-[#fff2c2]) plus "Forgot password?" (white-to-grey gradient), in Space Grotesk Regular 32px with justify-between.

Shared elements: the logo, the card, LOGO BIG, social sign-in (four providers), and the Email plus Password fields.

11.4 Onboarding — Role (4103:250)

Purpose: onboarding step 1 of 3 — choosing the user's role.

UpNavigation: the active step is "Role" (BigLogo on the left).

Selection grid (2 columns × 3 rows, six Box cards)

Left column	Right column
Student	Partner
Parent	Dev/Tech
Teacher	Organization

Each card: a 128px 3D-style icon plus Space Grotesk Bold 36px text in text-[#fff2c2].

"Skip for now" sits under the grid (opacity-50, 32px).

11.5 Onboarding — Usage Method (4103:167)

Purpose: onboarding step 2 of 3 — choosing the usage platform.

UpNavigation: the active step is "Usage method" (BigLogo centred).

Selection list (one column, three centred Box cards)

1. Web (browser) — a browser icon.
2. Mobile — a smartphone icon.
3. Desktop App — a monitor icon.

"Skip for now" sits under the list.

11.6 Onboarding — Goal (4103:40)

Purpose: onboarding step 3 of 3 — choosing the usage goal.

UpNavigation: the active step is "Goal" (BigLogo on the right).

Selection grid (2 columns × 3 rows, six Box cards)

Left column	Right column
I want to test the avatar	Integrate this into my school/company
I want to use it for employee upskilling	I want to create AI-generated content
I want AI assistant for planning	I want interactive learning modules

"Skip for now" sits under the grid.