...
This commit is contained in:
parent
4b637b7e04
commit
4a8f65e155
@ -1,56 +0,0 @@
|
||||
|
||||
|
||||
- login
|
||||
- change profile (email(s), linkedin, websites, telnr's, ...)
|
||||
- KYC
|
||||
- wallet
|
||||
- with EUR/CHF/USD, ability to topup wallet... (stripe, make sure to describe well)
|
||||
- with real world digital assets (RWDA)
|
||||
- the RWDA can be transfered to someone else if allowed
|
||||
- tickets (see own tickets)
|
||||
- a ticket can have workflow attached to it (as set by rhai script)
|
||||
- on a workflow step needs to be clear for user if they need to do something
|
||||
- has type, subject, priority, level, comments (user can add comment)
|
||||
- if new comment message is sent to inbox as well, if new action needed as well
|
||||
- inbox
|
||||
- info we can send to the user, user can reply
|
||||
- has labels
|
||||
- actions
|
||||
- if something to do for user, is part of the workflow
|
||||
- RWDA'S
|
||||
- overview (in tiles like blogs) of the RWDA's, has tags user can filter
|
||||
- if user clicks on one then goes to mini site (like ebook), is shown in app
|
||||
- on RWDA we see nr of RWDA (marketcap, ... and other core financials, ...)
|
||||
- use can select RWDA, and buy into it, if not enough cash will be asked to put more cash in
|
||||
- contracts
|
||||
- as markdown
|
||||
- user can sign
|
||||
- see who signed
|
||||
|
||||
# user flows
|
||||
|
||||
## registration
|
||||
|
||||
- login, user choses secret (done by means of the webassembly component)
|
||||
- verification level, user can do KYC
|
||||
|
||||
|
||||
# rwda
|
||||
|
||||
- name
|
||||
- description
|
||||
- link to website
|
||||
- nr of shares
|
||||
- share value
|
||||
- vesting period, lockin period
|
||||
- symbol
|
||||
|
||||
|
||||
|
||||
# Dynex
|
||||
|
||||
- meeting with
|
||||
|
||||
|
||||
|
||||
|
19
specs/README.md
Normal file
19
specs/README.md
Normal file
@ -0,0 +1,19 @@
|
||||
# Digital Freezone Customer Portal UI Specifications
|
||||
|
||||
This directory contains the comprehensive specifications for the Digital Freezone Customer Portal UI.
|
||||
|
||||
everything having (*) at end of line means next phase.
|
||||
|
||||
## Directory Structure
|
||||
|
||||
- [Overview](overview/README.md) - Platform purpose and high-level description
|
||||
- [Features](features/README.md) - Detailed specifications for all platform features
|
||||
- [User Flows](user_flows/README.md) - Step-by-step user journeys through the platform
|
||||
- [RWDA](rwda/README.md) - Real World Digital Asset specifications
|
||||
- [Technical](technical/README.md) - Technical requirements and constraints
|
||||
- [Design](design/README.md) - Design guidelines and UI/UX principles
|
||||
- [Implementation](implementation/README.md) - Implementation considerations and technologies
|
||||
|
||||
## Getting Started
|
||||
|
||||
Start by reviewing the [Overview](overview/README.md) to understand the platform's purpose and scope, then explore the [User Flows](user_flows/README.md) to understand how users will interact with the system.
|
690
specs/design/README.md
Normal file
690
specs/design/README.md
Normal file
@ -0,0 +1,690 @@
|
||||
# Design Guidelines
|
||||
|
||||
This document outlines the design guidelines for the Digital Freezone Customer Portal, covering visual design, interaction patterns, and user experience principles.
|
||||
|
||||
|
||||
> AI MADE THIS NOT SURE HOW GOOD THIS IS???
|
||||
|
||||
## Design Principles
|
||||
|
||||
### 1. Core Principles
|
||||
|
||||
#### 1.1. User-Centered
|
||||
- **Focus on User Needs**: Design decisions should be driven by user needs and goals.
|
||||
- **Reduce Cognitive Load**: Minimize the mental effort required to use the platform.
|
||||
- **Progressive Disclosure**: Present information and options gradually, as needed.
|
||||
- **Contextual Relevance**: Show information and actions relevant to the user's current context.
|
||||
|
||||
#### 1.2. Clarity
|
||||
- **Clear Communication**: Use clear, concise language throughout the interface.
|
||||
- **Visual Hierarchy**: Establish a clear visual hierarchy to guide attention.
|
||||
- **Purposeful Design**: Every element should serve a clear purpose.
|
||||
- **Reduce Ambiguity**: Prevent confusion through clear labeling and feedback.
|
||||
|
||||
#### 1.3. Consistency
|
||||
- **Visual Consistency**: Maintain consistent visual elements across the platform.
|
||||
- **Behavioral Consistency**: Interactions should work consistently throughout.
|
||||
- **Pattern Recognition**: Leverage familiar patterns to reduce learning curve.
|
||||
- **Platform Conventions**: Follow established conventions for the web platform.
|
||||
|
||||
#### 1.4. Efficiency
|
||||
- **Streamlined Workflows**: Optimize common tasks for efficiency.
|
||||
- **Reduce Steps**: Minimize the number of steps to complete tasks.
|
||||
- **Smart Defaults**: Provide sensible defaults to reduce user effort.
|
||||
- **Keyboard Accessibility**: Support efficient keyboard navigation.
|
||||
|
||||
#### 1.5. Trust and Security
|
||||
- **Transparent Operations**: Make system operations visible and understandable.
|
||||
- **Security Visibility**: Make security features visible to build trust.
|
||||
- **Error Prevention**: Design to prevent errors before they occur.
|
||||
- **Data Protection**: Visibly demonstrate respect for user data.
|
||||
|
||||
## Visual Design
|
||||
|
||||
### 1. Color System
|
||||
|
||||
#### 1.1. Primary Color Palette
|
||||
- **Primary Blue**: #3A86FF
|
||||
- Used for primary actions, key navigation, and brand elements
|
||||
- Variations: Light #7AADFF, Dark #0D47A1
|
||||
- **Secondary Purple**: #8338EC
|
||||
- Used for secondary actions and highlights
|
||||
- Variations: Light #B78AFF, Dark #5E35B1
|
||||
- **Accent Pink**: #FF006E
|
||||
- Used sparingly for emphasis and calls to action
|
||||
- Variations: Light #FF5E9F, Dark #C2185B
|
||||
|
||||
#### 1.2. Functional Color Palette
|
||||
- **Success Green**: #06D6A0
|
||||
- Used for success states, confirmations, and positive trends
|
||||
- Variations: Light #67E8C2, Dark #00A878
|
||||
- **Warning Yellow**: #FFD166
|
||||
- Used for warnings, pending states, and caution indicators
|
||||
- Variations: Light #FFE4A3, Dark #FFC233
|
||||
- **Error Red**: #EF476F
|
||||
- Used for errors, alerts, and negative trends
|
||||
- Variations: Light #F47A98, Dark #D81B60
|
||||
|
||||
#### 1.3. Neutral Color Palette
|
||||
- **Background White**: #FFFFFF
|
||||
- Primary background color
|
||||
- **Light Gray**: #F5F7FA
|
||||
- Secondary background, cards, containers
|
||||
- **Medium Gray**: #E1E5EB
|
||||
- Borders, dividers, disabled states
|
||||
- **Dark Gray**: #6B7280
|
||||
- Secondary text, icons, less important elements
|
||||
- **Text Black**: #1F2937
|
||||
- Primary text color
|
||||
|
||||
#### 1.4. Color Usage Guidelines
|
||||
- **Accessibility**: All color combinations must meet WCAG 2.1 AA contrast requirements.
|
||||
- **Meaning**: Don't rely solely on color to convey meaning.
|
||||
- **Consistency**: Use colors consistently for the same purpose across the platform.
|
||||
- **Hierarchy**: Use color to reinforce visual hierarchy.
|
||||
- **Cultural Considerations**: Consider cultural implications of colors for international users.
|
||||
|
||||
### 2. Typography
|
||||
|
||||
#### 2.1. Font Families
|
||||
- **Headings**: Montserrat, sans-serif
|
||||
- Clean, modern sans-serif for all headings
|
||||
- Weights: Regular (400), Medium (500), Semi-Bold (600), Bold (700)
|
||||
- **Body**: Open Sans, sans-serif
|
||||
- Highly readable sans-serif for all body text
|
||||
- Weights: Regular (400), Semi-Bold (600)
|
||||
- **Monospace**: Roboto Mono, monospace
|
||||
- For code, technical information, and tabular data
|
||||
- Weights: Regular (400)
|
||||
|
||||
#### 2.2. Type Scale
|
||||
- **Display**: 40px/48px, Montserrat Bold
|
||||
- For major page headers and hero sections
|
||||
- **H1**: 32px/40px, Montserrat Bold
|
||||
- For page titles
|
||||
- **H2**: 24px/32px, Montserrat Semi-Bold
|
||||
- For section headings
|
||||
- **H3**: 20px/28px, Montserrat Medium
|
||||
- For subsection headings
|
||||
- **H4**: 18px/24px, Montserrat Medium
|
||||
- For card headings and minor sections
|
||||
- **Body Large**: 16px/24px, Open Sans Regular
|
||||
- For primary content
|
||||
- **Body**: 14px/20px, Open Sans Regular
|
||||
- For secondary content and general text
|
||||
- **Caption**: 12px/16px, Open Sans Regular
|
||||
- For labels, captions, and helper text
|
||||
- **Button**: 14px/20px, Open Sans Semi-Bold
|
||||
- For buttons and interactive elements
|
||||
|
||||
#### 2.3. Typography Guidelines
|
||||
- **Line Length**: Aim for 50-75 characters per line for optimal readability.
|
||||
- **Alignment**: Use left alignment for most text (RTL languages will use right alignment).
|
||||
- **Hierarchy**: Establish clear typographic hierarchy through size, weight, and spacing.
|
||||
- **Responsive Adjustments**: Scale typography appropriately for different screen sizes.
|
||||
- **Accessibility**: Ensure text can be resized up to 200% without loss of content or functionality.
|
||||
|
||||
### 3. Iconography
|
||||
|
||||
#### 3.1. Icon Style
|
||||
- **Style**: Line icons with consistent 2px stroke weight
|
||||
- **Corner Radius**: 2px rounded corners where applicable
|
||||
- **Size**: Base size of 24x24px with clear 1px padding
|
||||
- **Consistency**: Visually consistent across the icon set
|
||||
- **Simplicity**: Simple, recognizable shapes without unnecessary detail
|
||||
|
||||
#### 3.2. Icon Usage
|
||||
- **Functional Icons**: Used for actions and navigation
|
||||
- **Categorical Icons**: Used to represent categories or types
|
||||
- **Status Icons**: Used to indicate status or state
|
||||
- **Illustrative Icons**: Used to visually represent concepts
|
||||
- **Always pair icons with text** except for universally recognized icons
|
||||
|
||||
#### 3.3. Icon Guidelines
|
||||
- **Accessibility**: Icons should not be the only means of conveying information.
|
||||
- **Consistency**: Use the same icon for the same action throughout the platform.
|
||||
- **Recognition**: Choose icons that clearly represent their purpose.
|
||||
- **Sizing**: Scale appropriately for different contexts (navigation, buttons, etc.).
|
||||
- **Color**: Follow color system guidelines for icon coloring.
|
||||
|
||||
### 4. Layout and Spacing
|
||||
|
||||
#### 4.1. Grid System
|
||||
- **Base Grid**: 8px grid for all measurements and spacing
|
||||
- **Column Grid**: 12-column responsive grid system
|
||||
- **Margins**: Consistent outer margins based on screen size
|
||||
- Desktop: 64px
|
||||
- Tablet: 32px
|
||||
- Mobile: 16px
|
||||
- **Gutters**: Consistent spacing between columns
|
||||
- Desktop: 24px
|
||||
- Tablet: 16px
|
||||
- Mobile: 8px
|
||||
|
||||
#### 4.2. Spacing Scale
|
||||
- **4px**: Micro spacing (within components)
|
||||
- **8px**: Extra small spacing (between related elements)
|
||||
- **16px**: Small spacing (between component elements)
|
||||
- **24px**: Medium spacing (between components)
|
||||
- **32px**: Large spacing (between groups of components)
|
||||
- **48px**: Extra large spacing (between major sections)
|
||||
- **64px**: 2x large spacing (major page divisions)
|
||||
|
||||
#### 4.3. Layout Guidelines
|
||||
- **Consistency**: Use consistent spacing throughout the interface.
|
||||
- **Proximity**: Group related elements together.
|
||||
- **Alignment**: Maintain strong alignment of elements.
|
||||
- **White Space**: Use white space deliberately to improve readability and focus.
|
||||
- **Responsive Behavior**: Define how layouts adapt to different screen sizes.
|
||||
|
||||
### 5. Imagery and Graphics
|
||||
|
||||
#### 5.1. Photography
|
||||
- **Style**: Clean, professional imagery with natural lighting
|
||||
- **Subject**: Diverse representation of users and contexts
|
||||
- **Purpose**: Support content rather than dominate
|
||||
- **Quality**: High-resolution, properly cropped and scaled
|
||||
- **Consistency**: Visual consistency across all photography
|
||||
|
||||
#### 5.2. Illustrations
|
||||
- **Style**: Simple, geometric illustrations with consistent line weight
|
||||
- **Color**: Using the established color palette
|
||||
- **Purpose**: Explain concepts, add visual interest, guide users
|
||||
- **Consistency**: Consistent illustration style throughout
|
||||
- **Scalability**: Works at various sizes
|
||||
|
||||
#### 5.3. Data Visualization
|
||||
- **Clarity**: Focus on clear communication of data
|
||||
- **Simplicity**: Avoid chart junk and unnecessary decoration
|
||||
- **Consistency**: Consistent styles across all visualizations
|
||||
- **Color**: Strategic use of color to highlight important data
|
||||
- **Accessibility**: Multiple ways to distinguish data (not just color)
|
||||
|
||||
#### 5.4. Imagery Guidelines
|
||||
- **Relevance**: All imagery should be relevant to the content.
|
||||
- **Performance**: Optimize for fast loading without quality loss.
|
||||
- **Accessibility**: Provide alternative text for all meaningful images.
|
||||
- **Responsive Behavior**: Define how images scale and crop at different screen sizes.
|
||||
- **Cultural Sensitivity**: Ensure imagery is culturally appropriate for the audience.
|
||||
|
||||
## UI Components
|
||||
|
||||
### 1. Navigation Components
|
||||
|
||||
#### 1.1. Main Navigation
|
||||
- **Desktop**: Sidebar navigation with expandable sections
|
||||
- Width: 240px (expanded), 64px (collapsed)
|
||||
- Clearly indicates current section
|
||||
- Supports up to 3 levels of hierarchy
|
||||
- **Tablet**: Collapsible sidebar, expanded on demand
|
||||
- **Mobile**: Bottom navigation for primary sections, hamburger menu for full navigation
|
||||
- **States**: Normal, Hover, Active, Focused
|
||||
|
||||
#### 1.2. Secondary Navigation
|
||||
- **Tabs**: For switching between related views
|
||||
- Horizontal arrangement
|
||||
- Clear active state
|
||||
- Scrollable on smaller screens
|
||||
- **Breadcrumbs**: For hierarchical navigation and context
|
||||
- Shows path from home to current page
|
||||
- Truncates middle sections when space is limited
|
||||
- **States**: Normal, Hover, Active, Focused
|
||||
|
||||
#### 1.3. Page Navigation
|
||||
- **Pagination**: For navigating through multi-page content
|
||||
- Shows current page and total pages
|
||||
- Provides previous/next and first/last options
|
||||
- **Infinite Scroll**: For content feeds and continuous data
|
||||
- Clear loading indicators
|
||||
- Maintains scroll position when navigating back
|
||||
- **States**: Normal, Hover, Active, Disabled, Loading
|
||||
|
||||
### 2. Input Components
|
||||
|
||||
#### 2.1. Text Inputs
|
||||
- **Text Field**: For single-line text input
|
||||
- Clear labeling above field
|
||||
- Placeholder text for guidance
|
||||
- Validation states with helpful messages
|
||||
- **Text Area**: For multi-line text input
|
||||
- Resizable when appropriate
|
||||
- Character/word count when limits apply
|
||||
- **Search Field**: For search functionality
|
||||
- Search icon for recognition
|
||||
- Clear button when text is entered
|
||||
- Suggestions as user types
|
||||
- **States**: Normal, Focus, Filled, Error, Disabled
|
||||
|
||||
#### 2.2. Selection Inputs
|
||||
- **Dropdown**: For selecting from a list of options
|
||||
- Clear labeling
|
||||
- Support for option groups
|
||||
- Search functionality for long lists
|
||||
- **Multi-select**: For selecting multiple options
|
||||
- Clear indication of selected items
|
||||
- Ability to remove selections individually
|
||||
- **Radio Buttons**: For mutually exclusive options
|
||||
- Vertical arrangement by default
|
||||
- Clear labeling for each option
|
||||
- **Checkboxes**: For multiple selections or toggles
|
||||
- Clear labeling for each option
|
||||
- Support for indeterminate state when appropriate
|
||||
- **States**: Normal, Hover, Selected, Focused, Disabled
|
||||
|
||||
#### 2.3. Date and Time Inputs
|
||||
- **Date Picker**: For selecting dates
|
||||
- Calendar view with month/year navigation
|
||||
- Highlight relevant dates (today, selected)
|
||||
- Support for date ranges
|
||||
- **Time Picker**: For selecting times
|
||||
- 12/24 hour format based on locale
|
||||
- Minute increments appropriate to context
|
||||
- **Date-Time Picker**: For selecting both date and time
|
||||
- Combined interface or sequential selection
|
||||
- **States**: Normal, Hover, Selected, Focused, Disabled
|
||||
|
||||
#### 2.4. File Inputs
|
||||
- **File Upload**: For uploading files
|
||||
- Drag-and-drop area
|
||||
- File browser button
|
||||
- Progress indication during upload
|
||||
- Preview for uploaded files
|
||||
- Support for multiple files when appropriate
|
||||
- **States**: Normal, Drag Over, Uploading, Success, Error
|
||||
|
||||
### 3. Action Components
|
||||
|
||||
#### 3.1. Buttons
|
||||
- **Primary Button**: For main actions
|
||||
- Filled background (Primary Blue)
|
||||
- High visibility
|
||||
- Used sparingly (typically one per section)
|
||||
- **Secondary Button**: For alternative actions
|
||||
- Outlined style (border only)
|
||||
- Medium visibility
|
||||
- **Tertiary Button**: For less important actions
|
||||
- Text only, no background or border
|
||||
- Low visibility
|
||||
- **Icon Button**: For common actions with recognizable icons
|
||||
- Clear tooltip on hover
|
||||
- Consistent sizing
|
||||
- **States**: Normal, Hover, Active, Focused, Loading, Disabled
|
||||
|
||||
#### 3.2. Links
|
||||
- **Text Links**: For navigation within or between pages
|
||||
- Underlined or distinctly colored
|
||||
- Clear hover state
|
||||
- **Action Links**: For triggering actions (similar to tertiary buttons)
|
||||
- No underline by default
|
||||
- Clear hover state
|
||||
- **External Links**: For navigation to external sites
|
||||
- Visual indicator for external destination
|
||||
- Consider opening in new tab
|
||||
- **States**: Normal, Hover, Visited, Focused
|
||||
|
||||
#### 3.3. Action Menus
|
||||
- **Dropdown Menu**: For presenting multiple actions
|
||||
- Clear trigger element (often an icon)
|
||||
- Consistent positioning
|
||||
- Logical grouping of options
|
||||
- **Context Menu**: For context-specific actions
|
||||
- Triggered by right-click or long press
|
||||
- Positioned near the target element
|
||||
- **States**: Normal, Hover, Active, Focused, Disabled
|
||||
|
||||
### 4. Feedback Components
|
||||
|
||||
#### 4.1. Notifications
|
||||
- **Toast**: For temporary notifications
|
||||
- Appears briefly and auto-dismisses
|
||||
- Non-blocking
|
||||
- Used for confirmations and non-critical information
|
||||
- **Alert**: For important information requiring attention
|
||||
- Persistent until dismissed
|
||||
- Different styles for different severity levels
|
||||
- May require action
|
||||
- **Banner**: For system-wide announcements
|
||||
- Appears at the top of the interface
|
||||
- Can be dismissible or persistent
|
||||
- **States**: Information, Success, Warning, Error
|
||||
|
||||
#### 4.2. Progress Indicators
|
||||
- **Progress Bar**: For operations with known duration
|
||||
- Linear representation of progress
|
||||
- Percentage or step indication when appropriate
|
||||
- **Spinner**: For operations with unknown duration
|
||||
- Indicates activity without specific progress
|
||||
- Consistent animation
|
||||
- **Skeleton Screens**: For content loading
|
||||
- Approximates the layout of loading content
|
||||
- Reduces perceived loading time
|
||||
- **States**: Active, Paused, Completed, Error
|
||||
|
||||
#### 4.3. Validation Feedback
|
||||
- **Inline Validation**: For immediate feedback during input
|
||||
- Appears near the relevant field
|
||||
- Clear error messages
|
||||
- Success confirmation when appropriate
|
||||
- **Form Validation**: For feedback upon form submission
|
||||
- Summary of errors at top of form
|
||||
- Individual field highlighting
|
||||
- Clear guidance for correction
|
||||
- **States**: Success, Warning, Error
|
||||
|
||||
### 5. Container Components
|
||||
|
||||
#### 5.1. Cards
|
||||
- **Standard Card**: For containing related content
|
||||
- Consistent padding (16px)
|
||||
- Optional header and footer
|
||||
- Clear visual boundaries
|
||||
- **Action Card**: For selectable or interactive content
|
||||
- Clear hover and selected states
|
||||
- Optional action buttons
|
||||
- **Status Card**: For displaying status information
|
||||
- Visual indicators of status
|
||||
- Consistent status positioning
|
||||
- **States**: Normal, Hover, Selected, Focused, Disabled
|
||||
|
||||
#### 5.2. Modals and Dialogs
|
||||
- **Modal Dialog**: For focused tasks requiring attention
|
||||
- Blocks interaction with the main interface
|
||||
- Clear purpose and actions
|
||||
- Dismissible via close button, ESC key, or clicking overlay
|
||||
- **Confirmation Dialog**: For confirming destructive or important actions
|
||||
- Clear question or statement
|
||||
- Explicit action buttons (avoid Yes/No in favor of specific actions)
|
||||
- **Side Panel**: For supplementary information or tasks
|
||||
- Slides in from edge of screen
|
||||
- Does not fully block the main interface
|
||||
- **States**: Opening, Open, Closing, Closed
|
||||
|
||||
#### 5.3. Tables and Lists
|
||||
- **Data Table**: For structured data presentation
|
||||
- Consistent column alignment
|
||||
- Sortable columns when appropriate
|
||||
- Pagination or virtualization for large datasets
|
||||
- Row selection when actions apply to items
|
||||
- **List**: For sequential information
|
||||
- Consistent item structure
|
||||
- Clear item separation
|
||||
- Support for various content types within items
|
||||
- **Grid**: For visual collections
|
||||
- Consistent item sizing
|
||||
- Responsive behavior
|
||||
- Support for filtering and sorting
|
||||
- **States**: Normal, Hover, Selected, Focused, Loading, Empty
|
||||
|
||||
## Interaction Patterns
|
||||
|
||||
### 1. Navigation Patterns
|
||||
|
||||
#### 1.1. Information Architecture
|
||||
- **Hierarchical Structure**: Clear parent-child relationships
|
||||
- **Flat Structure**: For peer-level content
|
||||
- **Hub and Spoke**: Central dashboard with specialized sections
|
||||
- **Search-Oriented**: For large content repositories
|
||||
- **Task-Oriented**: Organized around user tasks and workflows
|
||||
|
||||
#### 1.2. Navigation Methods
|
||||
- **Direct Navigation**: Clear paths to specific destinations
|
||||
- **Exploratory Navigation**: Supporting discovery of content
|
||||
- **Contextual Navigation**: Related content suggestions
|
||||
- **Search**: For finding specific content quickly
|
||||
- **Filters**: For narrowing down large sets of content
|
||||
|
||||
#### 1.3. Transitions
|
||||
- **Page Transitions**: Subtle animations between pages
|
||||
- **Content Transitions**: Smooth changes within a page
|
||||
- **State Transitions**: Clear feedback when state changes
|
||||
- **Loading Transitions**: Indicating content is loading
|
||||
- **Keep transitions under 300ms** for perceived immediacy
|
||||
|
||||
### 2. Input Patterns
|
||||
|
||||
#### 2.1. Form Design
|
||||
- **Single-Column Layout**: For most forms
|
||||
- **Logical Grouping**: Related fields grouped together
|
||||
- **Progressive Disclosure**: Show fields as needed
|
||||
- **Inline Validation**: Immediate feedback on input
|
||||
- **Clear Submission**: Obvious submission button
|
||||
- **Autofocus**: First field focused automatically
|
||||
- **Tabbing Order**: Logical progression through form
|
||||
|
||||
#### 2.2. Input Assistance
|
||||
- **Autocomplete**: Suggestions based on input
|
||||
- **Type-Ahead**: Predictions as user types
|
||||
- **Default Values**: Smart defaults when possible
|
||||
- **Formatting Assistance**: Automatic formatting of specialized inputs
|
||||
- **Contextual Help**: Guidance specific to the current field
|
||||
- **Error Prevention**: Constraints that prevent invalid input
|
||||
- **Error Correction**: Suggestions for fixing errors
|
||||
|
||||
#### 2.3. Complex Inputs
|
||||
- **Multi-Step Forms**: Breaking complex forms into manageable steps
|
||||
- **Dependent Fields**: Fields that change based on other inputs
|
||||
- **Repeating Sections**: For variable numbers of similar inputs
|
||||
- **Drag and Drop**: For spatial arrangement or file uploads
|
||||
- **Rich Text Editing**: For formatted text input
|
||||
- **Specialized Inputs**: For specific data types (color, range, etc.)
|
||||
|
||||
### 3. Feedback Patterns
|
||||
|
||||
#### 3.1. System Status
|
||||
- **Loading States**: Clear indication when system is working
|
||||
- **Success States**: Confirmation when actions complete successfully
|
||||
- **Error States**: Clear explanation when something goes wrong
|
||||
- **Empty States**: Helpful guidance when no content exists
|
||||
- **Partial States**: Indication when content is partially loaded
|
||||
|
||||
#### 3.2. User Guidance
|
||||
- **Tooltips**: Brief explanations on hover
|
||||
- **Popovers**: More detailed contextual information
|
||||
- **Coachmarks**: Highlighting features for new users
|
||||
- **Walkthroughs**: Step-by-step guidance for complex tasks
|
||||
- **Contextual Help**: Assistance specific to current context
|
||||
- **Progressive Disclosure**: Revealing complexity as needed
|
||||
|
||||
#### 3.3. Confirmation and Alerts
|
||||
- **Confirmation Before Action**: For destructive or significant actions
|
||||
- **Undo Capability**: Allow reversal of actions when possible
|
||||
- **Non-Modal Feedback**: Toast notifications for non-blocking information
|
||||
- **Modal Alerts**: For critical information requiring acknowledgment
|
||||
- **Persistent Notifications**: For ongoing conditions or system status
|
||||
|
||||
### 4. Data Visualization Patterns
|
||||
|
||||
#### 4.1. Chart Types
|
||||
- **Line Charts**: For trends over time
|
||||
- **Bar Charts**: For comparing discrete categories
|
||||
- **Pie/Donut Charts**: For part-to-whole relationships (use sparingly)
|
||||
- **Scatter Plots**: For correlation between variables
|
||||
- **Heat Maps**: For showing intensity across two dimensions
|
||||
- **Tables**: For precise values and multiple metrics
|
||||
|
||||
#### 4.2. Data Interaction
|
||||
- **Filtering**: Narrowing data based on criteria
|
||||
- **Sorting**: Reordering data for different perspectives
|
||||
- **Drilling Down**: Moving from summary to detail
|
||||
- **Highlighting**: Emphasizing specific data points
|
||||
- **Tooltips**: Revealing details on hover
|
||||
- **Selection**: Choosing specific data for further action
|
||||
- **Comparison**: Viewing multiple datasets side by side
|
||||
|
||||
#### 4.3. Data Presentation
|
||||
- **Progressive Disclosure**: Starting with overview, details on demand
|
||||
- **Appropriate Scale**: Choosing scales that don't distort perception
|
||||
- **Consistent Baselines**: For accurate comparison
|
||||
- **Clear Labeling**: Explicit labels for all data elements
|
||||
- **Legends**: Clear explanation of visual encodings
|
||||
- **Annotations**: Highlighting important points or anomalies
|
||||
- **Responsive Adaptation**: Appropriate visualizations for different screen sizes
|
||||
|
||||
## Responsive Design
|
||||
|
||||
### 1. Breakpoints
|
||||
|
||||
#### 1.1. Major Breakpoints
|
||||
- **Mobile**: 320px - 767px
|
||||
- **Tablet**: 768px - 1023px
|
||||
- **Desktop**: 1024px - 1439px
|
||||
- **Large Desktop**: 1440px and above
|
||||
|
||||
#### 1.2. Component-Specific Breakpoints
|
||||
- Use additional breakpoints as needed for specific components
|
||||
- Focus on content needs rather than specific devices
|
||||
- Consider orientation changes (portrait/landscape)
|
||||
|
||||
### 2. Responsive Patterns
|
||||
|
||||
#### 2.1. Layout Patterns
|
||||
- **Stacking**: Converting horizontal layouts to vertical
|
||||
- **Column Drop**: Reducing multi-column layouts
|
||||
- **Off-Canvas**: Moving navigation off-screen
|
||||
- **Reveal**: Showing/hiding content based on screen size
|
||||
- **Reflow**: Reorganizing content for different screen sizes
|
||||
|
||||
#### 2.2. Navigation Patterns
|
||||
- **Desktop**: Sidebar or horizontal navigation
|
||||
- **Tablet**: Collapsible navigation or tabs
|
||||
- **Mobile**: Bottom navigation, hamburger menu, or priority navigation
|
||||
|
||||
#### 2.3. Content Patterns
|
||||
- **Progressive Disclosure**: Showing less content initially on smaller screens
|
||||
- **Prioritization**: Emphasizing most important content on smaller screens
|
||||
- **Simplification**: Reducing complexity on smaller screens
|
||||
- **Optimization**: Different content formats for different screen sizes
|
||||
|
||||
### 3. Touch Considerations
|
||||
|
||||
#### 3.1. Touch Targets
|
||||
- **Minimum Size**: 44x44px for all interactive elements
|
||||
- **Spacing**: Adequate spacing between touch targets (minimum 8px)
|
||||
- **Positioning**: Placing important actions within easy reach
|
||||
- **Feedback**: Clear visual feedback for touch interactions
|
||||
|
||||
#### 3.2. Touch Gestures
|
||||
- **Tap**: Primary interaction for buttons and links
|
||||
- **Swipe**: For scrolling, navigation, or dismissal
|
||||
- **Pinch/Spread**: For zooming when appropriate
|
||||
- **Long Press**: For contextual actions
|
||||
- **Provide visible alternatives** for all gesture-based interactions
|
||||
|
||||
## Accessibility Guidelines
|
||||
|
||||
### 1. Visual Accessibility
|
||||
|
||||
#### 1.1. Color and Contrast
|
||||
- **Contrast Ratio**: Minimum 4.5:1 for normal text, 3:1 for large text
|
||||
- **Color Independence**: Don't rely solely on color to convey information
|
||||
- **Text Over Images**: Ensure sufficient contrast with backgrounds
|
||||
- **Focus Indicators**: High-contrast focus states for keyboard navigation
|
||||
- **Dark Mode**: Support for system dark mode preference
|
||||
|
||||
#### 1.2. Typography and Readability
|
||||
- **Text Sizing**: Support for browser text resizing up to 200%
|
||||
- **Line Height**: Minimum 1.5 times the font size
|
||||
- **Letter Spacing**: Adequate spacing for readability
|
||||
- **Font Weight**: Sufficient contrast between weights
|
||||
- **Text Alignment**: Left-aligned text for LTR languages (right for RTL)
|
||||
- **Line Length**: Maximum 80 characters per line
|
||||
|
||||
#### 1.3. Visual Information
|
||||
- **Text Alternatives**: For all non-text content
|
||||
- **Captions**: For video content
|
||||
- **Transcripts**: For audio content
|
||||
- **Visual Hierarchy**: Clear without relying on color
|
||||
- **Iconography**: Paired with text for clarity
|
||||
|
||||
### 2. Interaction Accessibility
|
||||
|
||||
#### 2.1. Keyboard Navigation
|
||||
- **Focus Order**: Logical tab order following visual layout
|
||||
- **Focus Visibility**: Clear visual indication of keyboard focus
|
||||
- **Keyboard Shortcuts**: For common actions
|
||||
- **Skip Links**: For bypassing repetitive navigation
|
||||
- **No Keyboard Traps**: Ensure users can navigate away from all elements
|
||||
|
||||
#### 2.2. Input Methods
|
||||
- **Device Independence**: Support for various input methods
|
||||
- **Touch Targets**: Adequately sized for all users
|
||||
- **Error Prevention**: Confirmation for consequential actions
|
||||
- **Error Correction**: Clear guidance for fixing input errors
|
||||
- **Labels**: Explicit labels for all form controls
|
||||
|
||||
#### 2.3. Time-Based Interactions
|
||||
- **Timeout Warnings**: Advance notice of session timeouts
|
||||
- **Extend Time**: Option to extend time limits
|
||||
- **No Time Limits**: For essential functions when possible
|
||||
- **Pause/Stop/Hide**: Controls for moving content
|
||||
- **Reduced Motion**: Support for reduced motion preference
|
||||
|
||||
### 3. Cognitive Accessibility
|
||||
|
||||
#### 3.1. Content Clarity
|
||||
- **Plain Language**: Clear, simple writing
|
||||
- **Consistent Navigation**: Predictable placement of navigation elements
|
||||
- **Consistent Functionality**: Similar elements function similarly
|
||||
- **Meaningful Sequence**: Content presented in a logical order
|
||||
- **Section Headings**: Clear organization of content
|
||||
|
||||
#### 3.2. User Assistance
|
||||
- **Clear Instructions**: Explicit guidance for complex tasks
|
||||
- **Error Messages**: Specific, constructive error messages
|
||||
- **Contextual Help**: Assistance available when needed
|
||||
- **Predictable Interactions**: Consistent behavior across the platform
|
||||
- **Forgiving Interfaces**: Allow for user errors and provide recovery paths
|
||||
|
||||
## Design System Implementation
|
||||
|
||||
### 1. Component Library
|
||||
|
||||
#### 1.1. Component Structure
|
||||
- **Atomic Design Methodology**: Atoms, molecules, organisms, templates, pages
|
||||
- **Component Hierarchy**: Clear parent-child relationships
|
||||
- **Composition Over Inheritance**: Favoring component composition
|
||||
- **Stateful Components**: Clear definition of component states
|
||||
- **Responsive Variants**: Adaptations for different screen sizes
|
||||
|
||||
#### 1.2. Component Documentation
|
||||
- **Usage Guidelines**: When and how to use each component
|
||||
- **Properties/Props**: All configurable options
|
||||
- **Accessibility Considerations**: Specific accessibility requirements
|
||||
- **Code Examples**: Implementation examples
|
||||
- **Visual Examples**: All states and variations
|
||||
- **Do's and Don'ts**: Best practices and anti-patterns
|
||||
|
||||
### 2. Design Tokens
|
||||
|
||||
#### 2.1. Token Categories
|
||||
- **Colors**: All color values
|
||||
- **Typography**: Font families, sizes, weights, line heights
|
||||
- **Spacing**: Margin and padding values
|
||||
- **Sizing**: Component and element dimensions
|
||||
- **Borders**: Width, style, radius
|
||||
- **Shadows**: Box and text shadows
|
||||
- **Z-index**: Layering values
|
||||
- **Animation**: Timing, easing functions
|
||||
|
||||
#### 2.2. Token Implementation
|
||||
- **Platform-Agnostic Format**: For cross-platform consistency
|
||||
- **Naming Convention**: Clear, consistent naming
|
||||
- **Semantic Tokens**: Named by purpose, not value
|
||||
- **Token Hierarchy**: Base tokens and derived tokens
|
||||
- **Documentation**: Clear explanation of token usage
|
||||
|
||||
### 3. Design-to-Development Workflow
|
||||
|
||||
#### 3.1. Design Handoff
|
||||
- **Design Specs**: Detailed specifications for implementation
|
||||
- **Asset Delivery**: Optimized assets in appropriate formats
|
||||
- **Interaction Specifications**: Clear definition of interactive behaviors
|
||||
- **Accessibility Requirements**: Specific accessibility considerations
|
||||
- **Edge Cases**: Handling of extreme content or conditions
|
||||
|
||||
#### 3.2. Collaboration Process
|
||||
- **Shared Language**: Common terminology between design and development
|
||||
- **Regular Reviews**: Ongoing review of implementation
|
||||
- **Feedback Channels**: Clear process for providing feedback
|
||||
- **Version Control**: Tracking changes to design specifications
|
||||
- **Design QA**: Process for verifying implementation matches design intent
|
19
specs/features/README.md
Normal file
19
specs/features/README.md
Normal file
@ -0,0 +1,19 @@
|
||||
# Digital Freezone Customer Portal Features
|
||||
|
||||
This directory contains detailed specifications for all features of the Digital Freezone Customer Portal.
|
||||
|
||||
## Feature Categories
|
||||
|
||||
- [Authentication & User Management](authentication.md) - Login, profile management, and KYC
|
||||
- [Financial Management](financial.md) - Wallet functionality and transaction handling
|
||||
- [RWDA Management](rwda.md) - Real World Digital Asset management features
|
||||
- [Communication & Support](communication.md) - Tickets, inbox, and notification systems
|
||||
- [Legal & Compliance](legal.md) - Contract management and regulatory compliance
|
||||
|
||||
Each feature specification includes:
|
||||
- Detailed description
|
||||
- User interface requirements
|
||||
- Functional requirements
|
||||
- Data requirements
|
||||
- Integration points
|
||||
- Security considerations
|
58
specs/features/authentication.md
Normal file
58
specs/features/authentication.md
Normal file
@ -0,0 +1,58 @@
|
||||
# Authentication & User Management
|
||||
|
||||
## 1. Login
|
||||
|
||||
### Description
|
||||
|
||||
The login system provides secure access to the Digital Freezone Customer Portal, ensuring that only authorized users can access the platform and their personal information.
|
||||
|
||||
### UI Requirements
|
||||
|
||||
- Clean, minimalist login form
|
||||
- Fields for username/email and password
|
||||
- "Forgot password" link (*)
|
||||
- Two-factor authentication option (*)
|
||||
- Error messaging for invalid credentials
|
||||
- Loading state during authentication (use webassembly?)
|
||||
- Redirect to last accessed page after successful login (*)
|
||||
|
||||
### Functional Requirements
|
||||
|
||||
- WebAssembly-based secret management & private key mgmt
|
||||
- Email verification
|
||||
- Two-factor authentication via SMS or authenticator app (*)
|
||||
- Session management with configurable timeout (*)
|
||||
- Account lockout after multiple failed attempts(*)
|
||||
- Password strength enforcement(*)
|
||||
- Audit logging of login attempts (successful and failed) (*)
|
||||
|
||||
|
||||
## 2. Profile Management
|
||||
|
||||
### Description
|
||||
|
||||
The profile management system allows users to maintain their personal information, contact details, and preferences, ensuring that the platform has accurate and up-to-date information.
|
||||
|
||||
### UI Requirements
|
||||
|
||||
- Comprehensive profile dashboard
|
||||
- Editable fields with inline validation (*)
|
||||
- Profile completeness indicator
|
||||
- Section-based organization (personal info, contact details, preferences) (*)
|
||||
- Avatar/profile picture upload with preview (*)
|
||||
- Save/cancel buttons for each section
|
||||
- Success/error notifications for updates
|
||||
|
||||
## 3. KYC (Know Your Customer)
|
||||
|
||||
### Description
|
||||
The KYC system enables users to verify their identity in compliance with regulatory requirements, allowing them to access higher-level services within the Digital Freezone.
|
||||
|
||||
### UI Requirements (3e party)
|
||||
- Step-by-step verification wizard
|
||||
- Document upload interface with drag-and-drop
|
||||
- Mobile camera integration for document capture
|
||||
- Verification status dashboard
|
||||
- Progress indicators for multi-step processes
|
||||
- Clear instructions for each verification step
|
||||
- Verification history and document archive
|
110
specs/features/communication.md
Normal file
110
specs/features/communication.md
Normal file
@ -0,0 +1,110 @@
|
||||
# Communication & Support
|
||||
|
||||
## 1. Tickets
|
||||
|
||||
### Description
|
||||
The ticket system provides a structured way for users to request support, report issues, or initiate processes that require staff intervention, ensuring that all requests are tracked and resolved efficiently.
|
||||
|
||||
### UI Requirements
|
||||
|
||||
- Ticket creation form with type selection and priority
|
||||
- Ticket listing with status indicators and filtering
|
||||
- Detailed ticket view with comment thread
|
||||
- File attachment capability with preview
|
||||
- Status and workflow progress indicators
|
||||
- Related ticket suggestions
|
||||
- Search functionality across tickets
|
||||
- Sorting and filtering options
|
||||
|
||||
### Functional Requirements
|
||||
|
||||
- Ticket creation with:
|
||||
- Type selection (support, technical, billing, etc.)
|
||||
- Subject and description fields
|
||||
- Priority selection
|
||||
- Attachment upload
|
||||
- Ticket workflow management:
|
||||
- +- evert flow will be managed this way
|
||||
- Status tracking (open, in progress, resolved, etc.)
|
||||
- Assignment to staff members
|
||||
- SLA tracking and escalation
|
||||
- Workflow steps based on ticket type
|
||||
- Comment system:
|
||||
- Rich text formatting (markdown)
|
||||
- @mentions for staff or departments
|
||||
- File attachments
|
||||
- Internal notes (staff only)
|
||||
- Notification system for ticket updates
|
||||
- Ticket linking and relationship management
|
||||
- Knowledge base integration for suggested solutions
|
||||
- Satisfaction surveys upon resolution
|
||||
- Linking to RWDA, Companies (Entities), Voting Request, ...
|
||||
|
||||
### Data Requirements
|
||||
- Ticket metadata (type, subject, priority, etc.)
|
||||
- Ticket status and history
|
||||
- Comment thread
|
||||
- File attachments (need generic way how to deal with files, the webdav?)
|
||||
- Workflow configuration by ticket type
|
||||
- SLA definitions and tracking data
|
||||
- User and staff assignment information
|
||||
|
||||
|
||||
## 2. Inbox
|
||||
|
||||
### Description
|
||||
The inbox system provides a centralized communication channel between users and the Digital Freezone platform, enabling efficient information exchange and notification delivery.
|
||||
|
||||
### UI Requirements
|
||||
- Message listing with unread indicators
|
||||
- Message categorization with visual labels
|
||||
- Message detail view with threaded replies
|
||||
- Compose interface with formatting options (*)
|
||||
- Search and filter functionality (*)
|
||||
- Attachment handling with preview (*)
|
||||
- Bulk action capabilities (mark read, archive, etc.) (*)
|
||||
- Mobile-responsive design for on-the-go access (*)
|
||||
|
||||
### Functional Requirements
|
||||
|
||||
- Message reception from system and staff
|
||||
- Message composition and replies
|
||||
- Message categorization with labels (*)
|
||||
- Attachment handling (upload and download) (*)
|
||||
- Search across message content and metadata (*)
|
||||
- Filtering by date, sender, label, etc. (*)
|
||||
- Read/unread status tracking
|
||||
- Message archiving and deletion (*)
|
||||
- Integration with ticket system (comments appear in inbox)
|
||||
|
||||
## 3. Actions
|
||||
|
||||
> TODO: maybe this is part of the ticketing system?
|
||||
|
||||
### Description
|
||||
|
||||
The actions system provides users with a clear overview of tasks that require their attention or input, ensuring that workflow processes progress efficiently and users are aware of their responsibilities.
|
||||
|
||||
### UI Requirements (*)
|
||||
|
||||
- Action center dashboard with priority indicators
|
||||
- Action cards with clear descriptions and deadlines
|
||||
- Filtering and sorting options
|
||||
- Calendar view for deadline management
|
||||
- Completion tracking with progress indicators
|
||||
- Related entity links (tickets, RWDAs, etc.)
|
||||
- Mobile notifications for urgent actions
|
||||
- Historical view of completed actions
|
||||
|
||||
### Functional Requirements (*)
|
||||
|
||||
- Action creation based on workflow triggers
|
||||
- Action assignment to specific users
|
||||
- Deadline setting and tracking
|
||||
- Priority assignment and escalation
|
||||
- Action completion verification
|
||||
- Dependency management between actions
|
||||
- Reminder generation for approaching deadlines
|
||||
- Action delegation (if permitted)
|
||||
- Audit trail of action history
|
||||
- Reporting on action completion rates
|
46
specs/features/financial.md
Normal file
46
specs/features/financial.md
Normal file
@ -0,0 +1,46 @@
|
||||
# Financial Management
|
||||
|
||||
## 1. Wallet
|
||||
|
||||
### Description
|
||||
The wallet system provides users with the ability to manage their funds within the Digital Freezone platform, enabling them to deposit, withdraw, and track their financial assets.
|
||||
|
||||
### UI Requirements
|
||||
- Dashboard showing current balances across all currencies
|
||||
- Transaction history with filtering and search capabilities
|
||||
- Visual graphs of balance history and spending patterns
|
||||
- Top-up interface with multiple payment options
|
||||
- Withdrawal interface with security verification
|
||||
- Receipt generation for all transactions
|
||||
- Currency conversion calculator
|
||||
- Spending analytics with categorization
|
||||
|
||||
### Functional Requirements
|
||||
|
||||
- Multi-currency support (EUR, CHF, USD)
|
||||
- Deposit functionality via:
|
||||
- Credit/debit card (Stripe integration)
|
||||
- Bank transfer
|
||||
- Other payment methods as applicable
|
||||
- Withdrawal functionality to verified bank accounts (*)
|
||||
- Transaction history with detailed metadata
|
||||
- Balance tracking and reconciliation (*)
|
||||
- Currency conversion with real-time rates (*)
|
||||
- Transaction notifications
|
||||
|
||||
|
||||
## 2. Real World Digital Assets (RWDA) Financial Management
|
||||
|
||||
### Description
|
||||
The RWDA financial management system enables users to purchase, sell, and track the financial performance of their Real World Digital Assets within the platform.
|
||||
|
||||
### UI Requirements
|
||||
- Portfolio dashboard showing asset allocation and value
|
||||
- Purchase interface with asset selection and payment options
|
||||
- Transaction confirmation screens with terms and conditions
|
||||
- Asset performance tracking with visual charts
|
||||
- Dividend/return tracking and history
|
||||
- Tax reporting interface
|
||||
- Portfolio diversification visualization
|
||||
- Risk assessment indicators
|
||||
|
62
specs/features/legal.md
Normal file
62
specs/features/legal.md
Normal file
@ -0,0 +1,62 @@
|
||||
# Legal & Compliance
|
||||
|
||||
## 1. Contracts
|
||||
|
||||
### Description
|
||||
The contract management system enables users to view, sign, and manage legal agreements related to their activities within the Digital Freezone, ensuring proper documentation and compliance with legal requirements.
|
||||
|
||||
### UI Requirements
|
||||
|
||||
- Contract listing with status indicators
|
||||
- Contract detail view with markdown rendering
|
||||
- Signature interface (based on signing with private key)
|
||||
- Signature status visualization
|
||||
- Version comparison view (*)
|
||||
- Contract template browser (*)
|
||||
- Search and filter functionality (*)
|
||||
- Print and download options (*)
|
||||
|
||||
### Functional Requirements
|
||||
|
||||
- Contract presentation in readable format (markdown)
|
||||
- Digital signature collection:
|
||||
- Certificate-based signatures
|
||||
- Multi-party signing workflow:
|
||||
- Sequential or parallel signing
|
||||
- Reminder notifications (use tickets)
|
||||
- Deadline enforcement
|
||||
- Signature verification and validation
|
||||
- Contract versioning and change tracking (*)
|
||||
- Contract template management (*)
|
||||
- Audit trail of all contract activities (*)
|
||||
- Expiration and renewal management (*)
|
||||
- Contract search by content or metadata (*)
|
||||
|
||||
|
||||
## 2. Terms & Conditions (Policies)
|
||||
|
||||
### Description
|
||||
The terms and policies system manages the presentation, acceptance, and tracking of legal terms, privacy policies, and other agreements that govern the use of the Digital Freezone platform.
|
||||
|
||||
### UI Requirements
|
||||
|
||||
- Terms and policies listing with version information
|
||||
- Policy viewer with clear formatting (markdown viewer)
|
||||
- Version comparison view (*)
|
||||
- Acceptance tracking and history (*)
|
||||
- Notification center for policy updates (*)
|
||||
- Search functionality across policy content (*)
|
||||
- Language selection for multilingual policies (*)
|
||||
- Print and download options (*)
|
||||
|
||||
### Functional Requirements
|
||||
|
||||
- Policy presentation in readable format
|
||||
- Version management with effective dates (*)
|
||||
- Acceptance collection and tracking (*)
|
||||
- Notification of policy updates requiring acceptance (*)
|
||||
- Forced acceptance for critical policy changes
|
||||
- Policy acceptance history for audit purposes (*)
|
||||
- Language localization of policies (*)
|
||||
- Search across policy content (*)
|
||||
- Policy update workflow with approval process (*)
|
55
specs/overview/README.md
Normal file
55
specs/overview/README.md
Normal file
@ -0,0 +1,55 @@
|
||||
# Digital Freezone Customer Portal Overview
|
||||
|
||||
## Introduction
|
||||
|
||||
The Digital Freezone Customer Portal is a comprehensive platform designed to provide customers with access to various services related to the digital freezone. This platform serves as the primary interface between customers and the digital freezone services, enabling seamless interaction, transaction management, and service utilization.
|
||||
|
||||
## Purpose
|
||||
|
||||
The Digital Freezone Customer Portal aims to:
|
||||
|
||||
1. Provide a secure and user-friendly interface for customers to access digital freezone services
|
||||
2. Facilitate the management of digital assets and financial transactions
|
||||
3. Enable efficient communication between customers and support staff
|
||||
4. Ensure compliance with regulatory requirements through structured workflows
|
||||
5. Offer a transparent view of customer assets, transactions, and obligations
|
||||
|
||||
## Target Users
|
||||
|
||||
The platform is designed for:
|
||||
|
||||
- Individual investors seeking to participate in the digital economy
|
||||
- Businesses establishing a presence in the digital freezone
|
||||
- Financial advisors managing client portfolios
|
||||
- Legal representatives handling compliance matters
|
||||
- Support staff assisting customers with their needs
|
||||
|
||||
## Core Value Proposition
|
||||
|
||||
The Digital Freezone Customer Portal delivers value through:
|
||||
|
||||
1. **Accessibility**: Providing 24/7 access to digital freezone services from anywhere in the world
|
||||
2. **Transparency**: Offering clear visibility into assets, transactions, and obligations
|
||||
3. **Security**: Implementing robust security measures to protect sensitive information
|
||||
4. **Efficiency**: Streamlining processes through intuitive workflows and automation
|
||||
5. **Compliance**: Ensuring adherence to regulatory requirements through structured processes
|
||||
|
||||
## Platform Scope
|
||||
|
||||
The platform encompasses:
|
||||
|
||||
1. **User Management**: Registration, authentication, profile management, and KYC processes
|
||||
2. **Financial Services**: Wallet management, currency handling, and transaction processing
|
||||
3. **Asset Management**: RWDA browsing, purchasing, management, and transfer
|
||||
4. **Communication**: Ticket system, inbox, notifications, and action management
|
||||
5. **Legal & Compliance**: Contract management, signature collection, and compliance tracking
|
||||
|
||||
## Integration Points
|
||||
|
||||
The platform integrates with:
|
||||
|
||||
1. **Payment Processors**: For handling financial transactions (e.g., Stripe)
|
||||
2. **KYC Providers**: For identity verification and compliance
|
||||
3. **Banking Systems**: For currency management and transfers
|
||||
4. **Asset Registries**: For RWDA tracking and management
|
||||
5. **Communication Systems**: For notifications and messaging
|
336
specs/rwda/README.md
Normal file
336
specs/rwda/README.md
Normal file
@ -0,0 +1,336 @@
|
||||
# Real World Digital Asset (RWDA) Specifications
|
||||
|
||||
This document outlines the specifications for Real World Digital Assets (RWDAs) within the Digital Freezone Customer Portal.
|
||||
|
||||
## Overview
|
||||
|
||||
Real World Digital Assets (RWDAs) represent digitized ownership of real-world assets, providing users with the ability to invest in, trade, and manage these assets through the Digital Freezone platform. RWDAs bridge traditional assets with digital infrastructure, enabling fractional ownership, improved liquidity, and streamlined management.
|
||||
|
||||
## RWDA Core Components
|
||||
|
||||
### 1. Asset Information
|
||||
|
||||
#### 1.1. Basic Information
|
||||
- **Name**: Unique, descriptive name of the asset
|
||||
- **Symbol**: Trading symbol/ticker (e.g., BTC, ETH)
|
||||
- **Description**: Comprehensive description of the asset and its underlying value
|
||||
- **Asset Type**: Classification (e.g., Real Estate, Business Equity (Shares), Commodity (Gold, Copper))
|
||||
- **Creation Date**: When the RWDA was created/tokenized
|
||||
- **Issuer**: Entity responsible for creating and managing the RWDA, needs to be linked to a Entity in ZAZ
|
||||
|
||||
#### 1.2. Media and Documentation
|
||||
- **Logo/Image**: Visual representation of the asset
|
||||
- **Documents**: Associated legal documents, prospectus, terms and conditions
|
||||
- **Website**: Link to official website or documentation
|
||||
- **Video**: Promotional or explanatory video content (if available)
|
||||
|
||||
#### 1.3. Categorization
|
||||
- **Primary Category**: Main classification
|
||||
- **Subcategories**: More specific classifications
|
||||
- **Tags**: Keywords for searchability
|
||||
- **Geographic Location**: Physical location of the underlying asset (if applicable)
|
||||
- **Industry/Sector**: Economic sector classification
|
||||
|
||||
### 2. Financial Details
|
||||
|
||||
#### 2.1. Ownership Structure
|
||||
- **Total Shares/Units**: Number of shares/units available
|
||||
- **Share Value**: Current value per share/unit
|
||||
- **Minimum Investment**: Smallest amount/units that can be purchased
|
||||
- **Maximum Investment**: Largest amount/units that can be purchased by a single investor (if limited)
|
||||
- **Market Cap**: Total value of all shares (Share Value × Total Shares)
|
||||
|
||||
#### 2.2. Performance Metrics
|
||||
- **Historical Performance**: Price history and trends
|
||||
- **Return on Investment (ROI)**: Historical and projected returns
|
||||
- **Volatility Metrics**: Measures of price stability
|
||||
- **Benchmark Comparison**: Performance relative to relevant benchmarks
|
||||
- **Risk Assessment**: Quantitative and qualitative risk evaluation
|
||||
|
||||
#### 2.3. Financial Operations
|
||||
- **Dividend Information**: Frequency, calculation method, distribution mechanism
|
||||
- **Fee Structure**: Management fees, transaction fees, performance fees
|
||||
- **Liquidity Provisions**: Mechanisms for buying/selling, liquidity guarantees
|
||||
- **Valuation Methodology**: How asset value is determined and updated
|
||||
- **Financial Reporting**: Frequency and type of financial reports provided
|
||||
|
||||
### 3. Terms & Conditions
|
||||
|
||||
#### 3.1. Ownership Rights
|
||||
- **Voting Rights**: Whether ownership confers voting rights and how they work
|
||||
- **Dividend Rights**: Entitlement to profits or revenue
|
||||
- **Underlying Asset Rights**: Access or rights to the physical asset (if applicable)
|
||||
- **Governance Participation**: Ability to participate in management decisions
|
||||
|
||||
#### 3.2. Restrictions
|
||||
- **Vesting Period**: Time before shares become fully owned
|
||||
- **Lock-in Period**: Time during which shares cannot be sold
|
||||
- **Transfer Restrictions**: Rules governing asset transfers between users
|
||||
- **Jurisdictional Limitations**: Geographic or regulatory restrictions
|
||||
- **Investor Qualification**: Requirements for investors (accreditation, KYC level, etc.)
|
||||
|
||||
#### 3.3. Legal Framework
|
||||
- **Governing Law**: Jurisdiction governing the asset (will normally be ZAZ)
|
||||
- **Regulatory Compliance**: Applicable regulations and compliance status (there should be a default)
|
||||
- **Dispute Resolution**: Process for resolving disputes (ZAZ)
|
||||
- **Liability Limitations**: Extent of issuer and platform liability
|
||||
- **Termination Conditions**: Circumstances under which the RWDA can be terminated
|
||||
|
||||
## RWDA User Interface Requirements
|
||||
|
||||
### 1. RWDA Listing and Discovery
|
||||
|
||||
#### 1.1. Marketplace View
|
||||
- Grid/list view with filtering and sorting options
|
||||
- Search functionality with advanced filters (*)
|
||||
- Category and tag-based navigation
|
||||
- Featured and trending asset highlights (*)
|
||||
|
||||
#### 1.2. RWDA Cards
|
||||
- Asset name and symbol
|
||||
- Primary image/logo
|
||||
- Current price and change percentage
|
||||
- Key metrics (market cap, risk level, etc.)
|
||||
- Quick action buttons (view details, add to watchlist)
|
||||
|
||||
#### 1.3. Search and Filter
|
||||
- Text search across name, description, and tags
|
||||
- Filters for:
|
||||
- Asset type
|
||||
- Price range
|
||||
- Location
|
||||
|
||||
|
||||
### 2. RWDA Detail View
|
||||
|
||||
#### 2.1. Overview Section
|
||||
- Asset name, symbol, and type
|
||||
- Current price and historical chart
|
||||
- Key metrics dashboard
|
||||
- Description and highlights
|
||||
- Action buttons (buy, add to watchlist, share)
|
||||
- Link to our main website/wiki (ebook e.g. docusaurus)
|
||||
|
||||
#### 2.2. Financial Information
|
||||
- Detailed price information
|
||||
- Historical performance charts (*)
|
||||
- Return metrics
|
||||
- Dividend history (if applicable) (*)
|
||||
- Fee structure
|
||||
- Financial projections (if available)
|
||||
|
||||
#### 2.3. Documentation
|
||||
|
||||
- Prospectus and offering documents
|
||||
- Legal agreements
|
||||
- Financial reports
|
||||
- Regulatory filings
|
||||
- Terms and conditions
|
||||
|
||||
#### 2.4. Asset-Specific Information
|
||||
|
||||
Will all be part of the ebook, doesn't have to be structured in DB
|
||||
|
||||
- For Real Estate: Location, size, amenities, occupancy
|
||||
- For Business Equity: Business model, team, market position
|
||||
- For Commodities: Storage, quality, certification
|
||||
- For Intellectual Property: Protection status, licensing terms
|
||||
|
||||
### 3. RWDA Transaction Interfaces
|
||||
|
||||
#### 3.1. Purchase Interface
|
||||
|
||||
- Quantity/amount selection
|
||||
- Price information with total calculation
|
||||
- Fee disclosure
|
||||
- Payment method selection (money comes from wallet)
|
||||
- Terms acceptance
|
||||
- Confirmation process
|
||||
|
||||
#### 3.2. Portfolio View
|
||||
|
||||
- Holdings summary with total value
|
||||
- Individual asset performance
|
||||
- Allocation visualization
|
||||
- Transaction history
|
||||
- Dividend/return tracking
|
||||
|
||||
#### 3.3. Transfer Interface (if allowed)
|
||||
|
||||
- Recipient selection/input
|
||||
- Quantity/amount specification
|
||||
- Fee disclosure
|
||||
- Transfer confirmation
|
||||
- Receipt generation
|
||||
|
||||
## RWDA Data Model
|
||||
|
||||
### 1. Core Asset Data
|
||||
|
||||
> TODO: needs to be checked
|
||||
|
||||
```
|
||||
RWDA {
|
||||
id: String // Unique identifier
|
||||
name: String // Asset name
|
||||
symbol: String // Trading symbol
|
||||
description: String // Comprehensive description
|
||||
assetType: AssetType // Type classification
|
||||
creationDate: DateTime // Creation timestamp
|
||||
issuer: Entity // Issuing entity
|
||||
|
||||
// Media
|
||||
logo: ImageURL // Primary image
|
||||
gallery: [ImageURL] // Additional images
|
||||
documents: [Document] // Associated documents
|
||||
website: URL // Official website
|
||||
videoURL: URL // Promotional video
|
||||
|
||||
// Categorization
|
||||
primaryCategory: Category // Main classification
|
||||
subcategories: [Category] // Specific classifications
|
||||
tags: [String] // Search keywords
|
||||
geographicLocation: Location // Physical location
|
||||
industrySector: Sector // Economic sector
|
||||
|
||||
// Financial
|
||||
totalShares: Number // Total available shares
|
||||
shareValue: Currency // Value per share
|
||||
minimumInvestment: Number // Minimum purchase
|
||||
maximumInvestment: Number // Maximum purchase
|
||||
marketCap: Currency // Total value
|
||||
|
||||
// Performance
|
||||
historicalPrices: [PricePoint] // Price history
|
||||
roi: Percentage // Return on investment
|
||||
volatility: Number // Volatility metric
|
||||
riskAssessment: RiskLevel // Risk evaluation
|
||||
|
||||
// Operations
|
||||
dividendStructure: Dividend // Dividend information
|
||||
feeStructure: [Fee] // Associated fees
|
||||
liquidityProvisions: String // Liquidity details
|
||||
valuationMethod: String // Valuation approach
|
||||
reportingFrequency: String // Reporting schedule
|
||||
|
||||
// Terms
|
||||
votingRights: Boolean // Has voting rights
|
||||
dividendRights: Boolean // Has dividend rights
|
||||
underlyingAssetRights: String // Rights to physical asset
|
||||
governanceRights: String // Governance participation
|
||||
|
||||
// Restrictions
|
||||
vestingPeriod: Duration // Vesting timeframe
|
||||
lockInPeriod: Duration // Lock-in timeframe
|
||||
transferRestrictions: String // Transfer rules
|
||||
jurisdictionalLimitations: [String] // Geographic restrictions
|
||||
investorQualifications: [String] // Investor requirements
|
||||
|
||||
// Legal
|
||||
governingLaw: String // Governing jurisdiction
|
||||
regulatoryCompliance: String // Compliance status
|
||||
disputeResolution: String // Dispute process
|
||||
liabilityLimitations: String // Liability details
|
||||
terminationConditions: String // Termination rules
|
||||
|
||||
// Technical
|
||||
digitalRepresentation: String // Digital representation method
|
||||
fractionalPrecision: Number // Decimal places
|
||||
ownershipTracking: String // Tracking mechanism
|
||||
certificateFormat: String // Certificate details
|
||||
|
||||
// Security
|
||||
ownershipVerification: String // Verification method
|
||||
transferSecurity: String // Transfer security
|
||||
auditTrail: Boolean // Has audit trail
|
||||
backupMechanisms: String // Backup details
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Related Data Structures
|
||||
|
||||
```
|
||||
PricePoint {
|
||||
timestamp: DateTime // Time of price
|
||||
price: Currency // Price value
|
||||
volume: Number // Trading volume
|
||||
}
|
||||
|
||||
Dividend {
|
||||
frequency: String // Payment frequency
|
||||
calculationMethod: String // How calculated
|
||||
distributionMechanism: String // How distributed
|
||||
nextPaymentDate: DateTime // Next payment
|
||||
historicalPayments: [Payment] // Payment history
|
||||
}
|
||||
|
||||
Payment {
|
||||
date: DateTime // Payment date
|
||||
amount: Currency // Payment amount
|
||||
perShareAmount: Currency // Amount per share
|
||||
}
|
||||
|
||||
Fee {
|
||||
type: String // Fee type
|
||||
amount: Currency or Percentage // Fee amount
|
||||
frequency: String // When charged
|
||||
description: String // Fee details
|
||||
}
|
||||
|
||||
Document {
|
||||
type: String // Document type
|
||||
title: String // Document title
|
||||
url: URL // Document location
|
||||
uploadDate: DateTime // Upload timestamp
|
||||
version: String // Document version
|
||||
}
|
||||
```
|
||||
|
||||
## RWDA Workflows
|
||||
|
||||
### 1. RWDA Creation and Listing
|
||||
|
||||
> will be manual scripts populating the DB
|
||||
|
||||
1. Asset identification and valuation
|
||||
2. Legal structure establishment
|
||||
3. Digital representation creation
|
||||
4. Documentation preparation
|
||||
5. Regulatory compliance verification
|
||||
6. Platform listing and publication
|
||||
|
||||
### 2. RWDA Purchase
|
||||
|
||||
1. User discovers RWDA
|
||||
2. User reviews RWDA details
|
||||
3. User initiates purchase
|
||||
4. User specifies quantity/amount
|
||||
5. User confirms purchase
|
||||
6. System processes transaction
|
||||
7. Ownership is recorded
|
||||
8. User receives confirmation
|
||||
|
||||
### 3. RWDA Management (operator)
|
||||
|
||||
1. User views portfolio
|
||||
2. User monitors performance
|
||||
3. User receives dividends/returns
|
||||
4. User accesses documentation
|
||||
5. User participates in governance (if applicable)
|
||||
|
||||
### 4. RWDA Transfer (if allowed)
|
||||
|
||||
1. User initiates transfer
|
||||
2. User specifies recipient and amount
|
||||
3. System verifies eligibility
|
||||
4. User confirms transfer
|
||||
5. System processes transfer
|
||||
6. Both parties receive confirmation
|
||||
|
||||
### 5. RWDA Termination (if applicable) (*)
|
||||
|
||||
1. Termination conditions are met
|
||||
2. Users are notified
|
||||
3. Final distributions are calculated
|
||||
4. Payments are processed
|
||||
5. RWDA is archived
|
128
specs/specs.md
Normal file
128
specs/specs.md
Normal file
@ -0,0 +1,128 @@
|
||||
# Digital Freezone Customer Portal Specifications
|
||||
|
||||
## Overview
|
||||
The Digital Freezone Customer Portal is a comprehensive platform designed to provide customers with access to various services related to the digital freezone. The platform enables users to manage their profile, complete KYC procedures, manage digital assets, handle financial transactions, communicate with support, and participate in various workflows.
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
The platform includes the following core feature categories:
|
||||
|
||||
### Authentication & User Management
|
||||
- Login and secure authentication
|
||||
- Profile management
|
||||
- KYC (Know Your Customer) verification
|
||||
|
||||
For detailed specifications, see:
|
||||
- [Authentication & User Management](features/authentication.md)
|
||||
|
||||
### Financial Management
|
||||
|
||||
- Multi-currency wallet
|
||||
- Deposits and withdrawals
|
||||
- Currency conversion
|
||||
- Transaction history and reporting
|
||||
|
||||
For detailed specifications, see:
|
||||
- [Financial Management](features/financial.md)
|
||||
|
||||
### RWDA Management
|
||||
|
||||
- RWDA marketplace
|
||||
- Purchase and ownership
|
||||
- Analytics and reporting
|
||||
- Information and education
|
||||
|
||||
For detailed specifications, see:
|
||||
- [RWDA Management](features/rwda.md)
|
||||
|
||||
### Communication & Support
|
||||
|
||||
- Ticket system
|
||||
- Inbox and messaging
|
||||
- Action center
|
||||
- Notifications
|
||||
|
||||
For detailed specifications, see:
|
||||
- [Communication & Support](features/communication.md)
|
||||
|
||||
### Legal & Compliance
|
||||
|
||||
- Contract management
|
||||
- Compliance requirements
|
||||
- Regulatory reporting
|
||||
- Terms and policies
|
||||
|
||||
For detailed specifications, see:
|
||||
- [Legal & Compliance](features/legal.md)
|
||||
|
||||
## User Flows
|
||||
|
||||
The platform supports the following key user flows:
|
||||
|
||||
### Registration & Onboarding
|
||||
- Initial registration
|
||||
- Profile completion
|
||||
- KYC verification
|
||||
- Account recovery
|
||||
|
||||
For detailed flow specifications, see:
|
||||
- [Registration & Onboarding Flows](user_flows/registration.md)
|
||||
|
||||
### RWDA Interactions
|
||||
|
||||
- Browsing and discovering RWDAs
|
||||
- Purchasing an RWDA
|
||||
- Managing RWDA portfolio
|
||||
- Transferring an RWDA
|
||||
- Receiving an RWDA transfer
|
||||
|
||||
For detailed flow specifications, see:
|
||||
- [RWDA Interaction Flows](user_flows/rwda.md)
|
||||
|
||||
### Financial Management
|
||||
|
||||
- Wallet top-up
|
||||
- Currency conversion
|
||||
- Wallet withdrawal
|
||||
- Transaction history and reporting
|
||||
|
||||
For detailed flow specifications, see:
|
||||
- [Financial Management Flows](user_flows/financial.md)
|
||||
|
||||
### Support & Communication
|
||||
|
||||
- Creating and managing support tickets
|
||||
- Managing inbox and notifications
|
||||
- Handling action items
|
||||
- Participating in workflows
|
||||
|
||||
For detailed flow specifications, see:
|
||||
- [Support & Communication Flows](user_flows/support.md)
|
||||
|
||||
### Legal & Compliance
|
||||
|
||||
- Reviewing and signing contracts
|
||||
- Completing compliance requirements
|
||||
- Managing regulatory reporting
|
||||
- Responding to regulatory inquiries
|
||||
|
||||
For detailed flow specifications, see:
|
||||
- [Legal & Compliance Flows](user_flows/legal.md)
|
||||
|
||||
## RWDA Specifications
|
||||
|
||||
Real World Digital Assets (RWDAs) are a core component of the platform. The RWDA specifications cover:
|
||||
|
||||
- Asset information structure
|
||||
- Financial details
|
||||
- Terms and conditions
|
||||
- Technical implementation
|
||||
- User interface requirements
|
||||
- Data model
|
||||
- Workflows
|
||||
- Integration requirements
|
||||
- Compliance requirements
|
||||
|
||||
For detailed RWDA specifications, see:
|
||||
- [RWDA Specifications](rwda/README.md)
|
Loading…
Reference in New Issue
Block a user