Existing Page / Scope Wireframe
CRYPTPAD INSTANCE/
├── public-entry/ # Free: broad layout/media/copy changes
│ ├── / # home / landing
│ │ ├── instance title + description
│ │ ├── default CryptPad hero / logo
│ │ ├── product explanation / app entry
│ │ └── footer links
│ │ target: black page with RELiK / SLATES lockup + compact login bar
│ │ scope: replace composition, branding, background, copy, footer
│ ├── /login/ # login surface
│ │ ├── username/password form
│ │ ├── language selector
│ │ ├── default branding / support links
│ │ └── surrounding explanatory copy
│ │ target: black minimal RELiK / SLATES login treatment
│ │ scope: re-layout around form; preserve login behavior
│ ├── /register/ # registration surface
│ │ ├── registration form or closed-registration state
│ │ ├── password guidance
│ │ └── default branding / copy
│ │ scope: member-gated treatment; preserve account creation behavior
│ ├── /recovery/ # account recovery
│ │ ├── recovery inputs
│ │ └── warning/explanation copy
│ │ scope: restyle; preserve warning clarity and recovery flow
│ └── loading-screen/ # pre-app loading state
│ ├── Loading... shell
│ ├── pre-loading CSS
│ └── app boot handoff
│ scope: small robust animation/brand treatment; must never block boot
│
├── invite-share-entry/ # Free/Medium: same brand shell, preserve access
│ ├── shared document link landing
│ ├── invite/access prompt
│ ├── password prompt if present
│ ├── login-required prompt if present
│ └── account switch / continue prompt if present
│ target: same black RELiK / SLATES treatment as login
│ scope: reduce helper text; keep all access instructions needed to proceed
│
├── static-info/ # Free: replace vanilla public pages
│ ├── /contact.html
│ │ └── scope: hide from primary entry or reframe only if kept reachable
│ ├── /features.html
│ │ └── scope: hide from primary entry; avoid vanilla product marketing
│ ├── /404.html
│ ├── /500.html
│ └── /down.html
│ └── scope: branded low-weight error/status pages
│
├── workspace-shell/ # Medium: visual shell; preserve controls
│ ├── /drive/ # main workspace
│ │ ├── file/folder tree
│ │ ├── document grid/list
│ │ ├── top toolbar
│ │ ├── sidebar
│ │ └── create/new document controls
│ │ scope: theme density, colors, sidebar, toolbar, launcher look
│ ├── app-launcher / creation-modal/
│ │ ├── app cards/icons
│ │ ├── new pad/document options
│ │ └── templates / owned / expiring options
│ │ scope: visual hierarchy, icon treatment, spacing; preserve creation
│ ├── /settings/
│ │ ├── account/security/preferences panels
│ │ ├── usage bar
│ │ └── feedback/settings sections
│ │ scope: panels/tabs/theme; optional hide usage/feedback via config
│ ├── /profile/
│ │ ├── display name/avatar
│ │ └── profile editing
│ │ scope: theme; preserve identity behavior
│ ├── /support/
│ │ └── scope: reword/restyle support flow if kept visible
│ └── /admin/ # Light: admin utility
│ ├── user directory
│ ├── registration/admin controls
│ └── instance settings
│ scope: minimal theme consistency; do not hide critical controls
│
├── collaboration-tools/ # Light: shell/theme only by default
│ ├── /pad/ # rich text editor
│ │ └── scope: outer shell/toolbar theme; do not alter editor internals
│ ├── /code/ # code editor
│ │ └── scope: outer shell/theme; do not alter CodeMirror behavior
│ ├── /doc/ # OnlyOffice document
│ ├── /sheet/ # OnlyOffice spreadsheet
│ ├── /presentation/ # OnlyOffice presentation
│ │ └── scope: wrapper only; do not change OnlyOffice iframe internals
│ ├── /kanban/
│ │ └── scope: board shell/colors; preserve card drag/drop behavior
│ ├── /whiteboard/
│ │ └── scope: shell + palette; preserve drawing canvas behavior
│ ├── /diagram/
│ │ └── scope: outer shell only
│ ├── /form/
│ │ └── scope: panels/buttons; preserve form builder/respondent flows
│ ├── /poll/
│ │ └── scope: panels/buttons; preserve vote/share behavior
│ ├── /slide/
│ │ └── scope: shell/theme only
│ └── /file/
│ └── scope: upload/view shell; preserve file handling
│
├── utility-internal/ # Avoid in first pass
│ ├── /checkup/
│ ├── /auth/
│ ├── /logout/
│ ├── /worker/
│ ├── /assert/
│ ├── /debug/
│ ├── /report/
│ └── /moderation/
│ scope: leave alone unless a specific visible issue is identified
│
└── customization-files/ # Implementation canvas
├── /opt/cryptpad/customize/
│ ├── application_config.js # AppConfig policy + vanilla cleanup
│ │ ├── removeDonateButton = true
│ │ ├── surveyURL = ""
│ │ └── investigate dark-mode default/user override behavior
│ ├── CryptPad_logo_hero.svg # current custom hero logo
│ ├── favicon/ # favicon overrides
│ ├── images/ # static image overrides
│ ├── images/opengraph_preview/ # social preview images
│ ├── src/pre-loading.css # loading styles
│ ├── src/outer.css # outer/static styles
│ └── src/less2/ # copied LESS overrides as needed
└── /opt/cryptpad/config/config.js # server/domain/quota; not visual UI
Scope key: - Free: layout, composition, media, copy, and
styling can change substantially. - Medium: visual
treatment can change, but preserve expected controls and DOM behavior. -
Light: shell/theme only; do not restructure editor/tool
internals. - Avoid: do not touch in first UI pass unless a
later spec authorizes it.