--- version: alpha name: StoryPad-design-analysis description: "A private journal whose look comes from one seed color: Material 3 tonal surfaces generated from black by default, Quicksand set at regular weight, a timeline with day-colored monograms, and a floating button that fans out into capture actions. Users change the seed, the font family and the weight, so the app is a theme engine more than a fixed palette." status: Draft appVersion: "source snapshot of the public repository, 2026-10-06" platformsCovered: [iOS, Android] reviewer: "" verifiedAt: "" colors: primary: "#000000" on-primary: "#ffffff" surface: "#f9f9f9" surface-container: "#eeeeee" on-surface: "#1b1b1b" on-surface-variant: "#474747" outline: "#777777" outline-variant: "#c6c6c6" divider: "#d8d8d8" dark-primary: "#ffffff" dark-on-primary: "#000000" dark-surface: "#131313" dark-surface-container: "#1f1f1f" dark-on-surface: "#e2e2e2" dark-outline: "#919191" dark-outline-variant: "#474747" success: "#28a745" danger: "#dc3545" warning: "#ffc107" info: "#17a2b8" day-monday: "#f57c00" day-tuesday: "#7b1fa2" day-wednesday: "#afb42b" day-thursday: "#388e3c" day-friday: "#1976d2" day-saturday: "#512da8" day-sunday: "#d32f2f" day-monday-dark: "#ffb74d" day-tuesday-dark: "#ba68c8" day-wednesday-dark: "#dce775" day-thursday-dark: "#81c784" day-friday-dark: "#64b5f6" day-saturday-dark: "#9575cd" day-sunday-dark: "#e57373" typography: headline-medium: fontFamily: "Quicksand, sans-serif" fontSize: 28px fontWeight: 400 lineHeight: 36px title-large: fontFamily: "Quicksand, sans-serif" fontSize: 22px fontWeight: 400 lineHeight: 28px title-medium: fontFamily: "Quicksand, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px title-small: fontFamily: "Quicksand, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 20px body-large: fontFamily: "Quicksand, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px body-medium: fontFamily: "Quicksand, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px body-small: fontFamily: "Quicksand, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px label-large: fontFamily: "Quicksand, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 20px label-small: fontFamily: "Quicksand, sans-serif" fontSize: 11px fontWeight: 500 lineHeight: 16px rounded: xs: 4px sm: 8px md: 12px lg: 16px pill: 999px spacing: xs: 4px sm: 8px md: 14px base: 16px components: floating-button: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.lg}" size: 56px month-tab-selected: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-large}" rounded: "{rounded.md}" month-tab: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.label-large}" rounded: "{rounded.md}" timeline-button: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" rounded: "{rounded.pill}" text-field: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.body-large}" rounded: "{rounded.sm}" padding: 16px --- ## Overview StoryPad is a private journaling app. Its design is a theme engine: one seed color generates every surface, and by default that seed is black, so the app opens in a monochrome scheme of near-white and near-black. [Measured] What defines the look: 1. **Seed-driven color.** The default seed is black and uses the monochrome variant of the Material 3 generator. Choosing any other swatch switches to the tonal-spot variant. On Android 12 and later the system's dynamic colors are used instead, unless the user picks a seed. [Measured] 2. **Quicksand at regular weight.** The default family is Quicksand and the default weight is regular. Users can pick another family and shift the weight of the whole app up or down. [Measured] 3. **A day-colored timeline.** The home list is grouped by month, with a month tab bar on top and a timeline rail with a monogram for the day. Each weekday has its own color. [Measured] 4. **One floating action.** A new-story button that expands into add, camera, voice and templates actions. [Measured] 5. **Platform look on both systems.** The iOS build uses Cupertino page transitions, no ripple and a circular floating button. Android uses shared-axis transitions and ripples. [Measured] Source for this file: the public repository, read on 2026-10-06. The default color values come from the Material 3 generator's neutral tones for a black seed and were not read from a device. See Known Gaps. ## Core ### Colors | Role | Light | Dark | Where | |------|-------|------|-------| | Primary | `#000000` | `#ffffff` | Default seed, monochrome variant [Inferred from the generator] | | Text on primary | `#ffffff` | `#000000` | Same | | Surface | `#f9f9f9` | `#131313` | Neutral tone 98 and 6 [Inferred] | | Surface container | `#eeeeee` | `#1f1f1f` | Neutral tone 94 and 12 [Inferred] | | Text | `#1b1b1b` | `#e2e2e2` | Neutral tone 10 and 90 [Inferred] | | Secondary text | `#474747` | `#c6c6c6` | Neutral tone 30 and 80 [Inferred] | | Outline | `#777777` | `#919191` | Neutral tone 50 and 60 [Inferred] | | Divider | text color at 15 percent, about `#d8d8d8` on light | same rule | App theme [Measured rule] | | Success, danger, warning, info | `#28a745`, `#dc3545`, `#ffc107`, `#17a2b8` | tonal versions generated from the same four | Semantic palette [Measured] | Weekday colors, used for the day monogram and its timeline accents, use shade 700 of the Material swatch in light and shade 300 in dark: Monday orange, Tuesday purple, Wednesday lime, Thursday green, Friday blue, Saturday deep purple, Sunday red. A black and white swatch stands in as a monochrome option. [Measured for the mapping, standard swatch values] The user can pick any of 19 swatches (red, pink, purple, deep purple, indigo, blue, light blue, cyan, teal, green, light green, lime, yellow, amber, orange, deep orange, brown, grey, blue grey) plus black and white as the seed. [Measured] ### Typography Quicksand is the default family, loaded by name from an open font library, and the app lets the user switch to another family from that library. [Measured] Sizes follow the Material 3 text roles. The app sets display, headline and title large and medium to regular weight and title small and the label roles to medium. The user's weight preference moves every role up or down by the same number of steps, so regular text can become light or bold. [Measured] ### Shape and spacing Corners are 4 for the small color chips, 8 for text fields, 12 for the month tab pill and 16 for larger surfaces. Timeline side buttons are circles with a hairline border in the divider color. [Measured] The month tab bar sits 14 from the screen edges. [Measured] ### Iconography and motion One icon file picks the glyph per platform: the iOS style gets SF Symbols-like Cupertino icons and Android gets Material outlined icons, tinted with the text color. [Measured] On Android, pages slide on a shared horizontal axis. On iOS, the standard Cupertino slide is used. The new-story button fades while its action fan opens over the page. [Measured] ### Themes Light, dark and system. A seed color, a font family and a font weight are all stored as preferences. A monochrome result is detected when the seed is black or white. [Measured] ## Platform: iOS How the iOS build looks and behaves. Items come from public source files. ### Back and up navigation Expected on iOS: Chevron plus previous title, swipe from the left edge. The Cupertino back swipe and page slide are used. [Measured from the page transition setup] ### Primary navigation Expected on iOS: Bottom tab bar, about five items. There is no tab bar. Home is one scrolling timeline with a month tab bar at the top and a settings drawer opened by a more icon. [Measured] ### Main action Expected on iOS: Nav bar or bottom bar button. A circular floating new-story button, opened by a tap into add, camera, voice and templates, or a long press that goes straight to a new story. [Measured] ### Sheets, dialogs and messages Expected on iOS: Action sheets, alerts, modals. Adaptive dialogs and pop-up menus that switch to Cupertino styling on iOS. [Measured from the adaptive dialog package] ### Controls Expected on iOS: Cupertino switches, pickers, segmented controls. Cupertino-style switches and pickers through adaptive widgets. [Inferred] ### Text sizing Expected on iOS: Dynamic Type. Text follows the system text scale, and the app adds its own weight preference. [Inferred] ### Touch and pointer targets Expected on iOS: 44pt minimum. Icon buttons use density settings between 1 and 2 on the floating actions. Minimum target sizes were not measured. [Measured for density, Inferred for sizes] ### Insets and system bars Expected on iOS: Safe areas, status bar. Transparent status bar and navigation areas, with icon brightness switched by theme. [Measured] ### Icons Expected on iOS: SF Symbols or custom. Cupertino icons chosen by the icon file when the iOS style is on, so they match SF Symbols closely. [Measured] ### Account and sign-in rules Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked. Accounts are optional and used for cloud backup through third-party sign-in. If third-party sign-in is offered, Guideline 4.8 and in-app account deletion apply. This was not confirmed. [Inferred] Checked: 2026-10-06 against source only. ### Platform conformance Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates. Close to iOS in page transitions, icons, no ripple and the circular floating button. The type and the month pill are the app's own. [Observed from source] ## Platform: Android How the Android build looks and behaves. Items come from public source files. ### Back and up navigation Expected on Android: System back and gesture, up arrow in the top bar. System back and gesture, with shared-axis page transitions. [Measured] ### Primary navigation Expected on Android: Navigation bar, rail on tablets. No navigation bar. A month tab bar and an end drawer for settings and the timeline buttons. [Measured] ### Main action Expected on Android: Floating action button. A standard Material floating action button for a new story, with a fan of icon buttons over the page. An extended version with a label is used when accessibility navigation is on. [Measured] ### Sheets, dialogs and messages Expected on Android: Bottom sheets, dialogs, snackbars. Adaptive dialogs, bottom sheets and pop-up menus in Material styling. [Measured] ### Controls Expected on Android: Material switches, pickers, chips. Material 3 controls, with a filled icon button for the main add action and outlined icon buttons for the others. [Measured] ### Text sizing Expected on Android: Font scale. Text uses the system font scale. [Inferred] ### Touch and pointer targets Expected on Android: 48dp minimum. Not verified. [Inferred] ### Insets and system bars Expected on Android: Edge to edge, system bars. Transparent system bars with edge to edge content and icon brightness set by theme. [Measured] ### Icons Expected on Android: Material Symbols or custom. Material outlined icons, for example the settings, search and lock glyphs. [Measured] ### Account and sign-in rules Expected on Android: Account deletion and data safety requirements. Note the date checked. Backup uses third-party sign-in and local data is the default. Account deletion and data safety form entries were not checked. [Inferred] Checked: 2026-10-06 against source only. ### Platform conformance Expected on Android: For each important component: what Android expects, what this app does, and why it deviates. Material 3 with a seed-generated scheme and system dynamic color support, so the app follows the device wallpaper unless the user picks a seed. [Measured] ## Platform: Web No web client was found in the repository. Desktop builds exist for macOS and Linux but were not measured. ### Back and up navigation Expected on Web: Browser back, breadcrumbs. Not applicable. [Observed] ### Primary navigation Expected on Web: Top nav or sidebar. Not applicable. [Observed] ### Main action Expected on Web: Page-level button. Not applicable. [Observed] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. Not applicable. [Observed] ### Controls Expected on Web: Native or custom. Not applicable. [Observed] ### Text sizing Expected on Web: Browser zoom. Not applicable. [Observed] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Not applicable. [Observed] ### Insets and system bars Expected on Web: Viewport, scrollbars. Not applicable. [Observed] ### Icons Expected on Web: Any. Not applicable. [Observed] ### Account and sign-in rules Expected on Web: Not applicable unless the product has accounts. Not applicable. [Observed] ### Platform conformance Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates. Not applicable. [Observed] ## Cross-platform consistency Consistent across platforms: the seed-driven scheme, Quicksand, the month tabs, the timeline and the floating action fan. [Measured] Intentionally different: iOS gets Cupertino transitions, no ripple and a circular floating button, and Android gets shared-axis transitions and ripples. [Measured] ## Do's and Don'ts ### Do - Derive every surface from one seed instead of hard-coding colors. - Keep text at regular weight and let the user shift it. - Use the weekday color only for the day monogram and timeline accents. - Keep the tab pill at a 12 radius with the primary color filled when selected. ### Don't - Don't add a fixed brand color. The default is monochrome on purpose. - Don't add a bottom tab bar. Navigation is the month tabs and the drawer. - Don't use the semantic colors as decoration. ## Known Gaps - No on-device capture was done. All statements come from reading source. - The default scheme values are the generator's neutral tones for a black seed and were not read from a running app. - Component sizes (tab height, floating button size on iOS), the story tile layout and the editor were not measured. - Account deletion and store policy rules were not verified for either platform. - Desktop builds were not examined.