# Amaze Stocks — Design System
> An AI-driven stock market analysis and investment discovery platform.
- **Canonical:** https://uiuxskills.com/library/amaze-stocks
- **Source:** https://amazestocks.com/
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:15:36.871Z

---

---
version: alpha
name: Amaze Stocks
description: An AI-driven stock market analysis and investment discovery platform.
tone: >-
  Professional, analytical, and empowering. The tone is direct and focused on removing subjectivity
  from trading decisions.
color-scheme: light
colors:
  primary: "#0056B3"
  surface: "#FFFFFF"
  surface-dim: "#F8F9FA"
  on-surface: "#212529"
  on-primary: "#FFFFFF"
  outline: "#DEE2E6"
  success: "#28A745"
  error: "#DC3545"
  secondary: "#6C757D"
  focus-ring: "#80BDFF"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#004494"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#004494"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-primary}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-secondary:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Amaze Stocks serves as a bridge between complex financial data and retail investors, prioritizing clarity and trust. The visual identity is functional and data-centric, designed to remove subjectivity from trading decisions through a clean, accessible interface.

## Colors

The color palette is built for high readability and professional trust, utilizing a light-themed background to ensure financial data remains the focal point.

*   Primary (inferred) (#0056B3): The core brand color used for primary CTAs and identity elements.
*   Surface (inferred) (#FFFFFF): The primary background color for the application and landing page.
*   Surface-dim (inferred) (#F8F9FA): Used for section backgrounds to create visual separation.
*   On-surface (inferred) (#212529): The primary text color for high readability against light surfaces.
*   On-primary (inferred) (#FFFFFF): Text color for buttons and elements using the primary brand color.
*   Outline (inferred) (#DEE2E6): Used for borders and dividers to maintain a structured layout.
*   Success (inferred) (#28A745): Used for positive market indicators and growth metrics.
*   Error (inferred) (#DC3545): Used for risk warnings and negative market alerts.
*   Secondary (inferred) (#6C757D): Used for secondary information and supporting text.
*   Focus-ring (inferred) (#80BDFF): Used for accessibility focus states on interactive elements.

## Typography

Typography is strictly sans-serif to maintain a modern, clean, and professional aesthetic that aids in data scannability.

*   Display-lg (inferred): Used for main hero headlines.
*   Headline-lg (inferred): Used for major section headers.
*   Headline-md (inferred): Used for feature sub-headers.
*   Body-md (inferred): Standard body text for paragraphs.
*   Body-sm (inferred): Used for captions and secondary descriptions.
*   Label-md (inferred): Used for button labels.
*   Label-sm (inferred): Used for small UI indicators.

## Layout

The layout utilizes a container-based grid system with generous vertical rhythm to prevent cognitive overload when viewing financial data.

*   **Section Order:** nav, hero, features, stats, why-us, team, testimonials, footer.
*   **Hero Pattern:** Centered headline and subhead with prominent app store download buttons.
*   **Spacing:** Maintain `{spacing.2xl}` between major content sections to ensure readability.
*   **Responsive Behaviour:** Mobile-first design; content stacks vertically on smaller screens with adjusted padding.

## Elevation & Depth

Depth is used sparingly to maintain a clean, flat aesthetic. Elevation values are inferred to be subtle, primarily distinguishing cards from the background.

*   `elevation.sm`: Subtle lift for minor UI elements.
*   `elevation.md`: Standard card lift.
*   `elevation.lg`: Modal or drawer overlay.

## Shapes

The design system employs a moderate corner radius to balance professional rigidity with approachability. The `{rounded.md}` (8px) value is the standard for cards and inputs, creating a cohesive, modern feel across the interface.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses `{colors.primary}` with `{typography.label-md}`. Use these for main conversion points. Secondary buttons should use a transparent background with a `{colors.primary}` border.

### Card
Cards utilize `{colors.surface}` with a `{rounded.md}` border radius. Always include a `{colors.outline}` border to maintain structure, especially when elevation is not used.

### Input Field
Inputs use `{rounded.sm}` for a tighter, more precise look. Ensure the `{components.input-field-focus}` border color is applied on focus to meet accessibility standards.

### Badge
Badges are used for status indicators. Use `{badge-success}` for positive market data and `{badge-error}` for risk warnings, ensuring the text remains legible against the background.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Avoid using `{colors.surface-dim}` for primary button backgrounds. |
| Apply `{rounded.md}` to all card components for consistency. | Do not remove borders from `{components.card}` if it lacks elevation. |
| Use `{typography.headline-lg}` for main section titles. | Do not use `{typography.display-lg}` for body text. |
| Maintain `{spacing.2xl}` between major content sections. | Avoid using `{spacing.xs}` for primary section margins. |
| Use `{colors.success}` for positive market data points. | Do not use `{colors.error}` for non-critical information. |
| Ensure all interactive elements have a `{colors.focus-ring}` state. | Avoid mixing different font families in the same section. |
| Use `{components.input-field}` for all user input forms. | Do not use `{components.swatch-secondary}` for primary actions. |
| Apply `{components.badge-success}` for positive market indicators. | Avoid using large, non-standard radii on data cards. |

## Content Style

CTA style uses imperative verbs and clear, benefit-driven labels (e.g., "Start your investment journey now"). Keep labels concise and actionable.

Heading tone is direct, benefit-focused, and authoritative. Headlines should clearly state the value proposition of the section without unnecessary fluff.

Copy density is optimized for scannability. Use short paragraphs and frequent bullet points to break up complex financial concepts, ensuring the content remains accessible to both novice and experienced traders.

## Imagery & Icons

The imagery style is mixed, incorporating high-quality product screenshots, app store badges, and professional headshots. Icons should remain clean and minimal to match the data-centric, professional tone. Avoid decorative imagery that does not serve a functional or illustrative purpose.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Amaze Stocks, a minimal, data-centric financial platform with a professional and analytical tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{spacing.lg}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or font sizes.
2. Render only the component variants defined under `components:`. Do not invent variants (e.g. a ghost button, a pill input) that the spec does not list.
3. Follow the Layout section for section order, hero pattern, and the `{spacing.2xl}` rhythm between major sections. Follow Elevation & Depth when deciding shadow levels; keep depth sparse.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g. removing card borders, using `{colors.error}` decoratively), surface the conflict before proceeding.
5. All tokens marked "(inferred)" are visual approximations. If an authoritative source exists (theme file, Storybook), those values take precedence over the spec.

## Output contract

**Must:**
- Use tokens by name for every color, spacing, radius, elevation, and typography decision.
- Cover hover, focus, and disabled states for all interactive components where the spec defines them — including `{colors.focus-ring}` on every focusable element.
- Apply `{rounded.md}` to cards, `{rounded.sm}` to inputs, exactly as specified.
- Use `{colors.success}` and `{colors.error}` only for their designated semantic roles (positive market data; risk warnings).
- Match CTA copy style — imperative verbs, concise, benefit-driven — per the Content Style section.

**Must NOT:**
- Invent colors, font families, radii, or spacing values outside the spec.
- Use generic utility defaults when a brand token exists.
- Add emoji, decorative imagery, or filler copy.
- Remove borders from `{components.card}` when elevation is absent.
- Rewrite, replace, or invent page copy, headings, labels, or navigation items.
- Alter information architecture as a side effect of applying design tokens.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; use `{colors.surface-dim}` for section-level separation only.
- For unspecified breakpoints, follow mobile-first with one breakpoint at 768px per the Layout section.
- "(inferred)" tokens are approximations — flag this if precision matters for production.