--- version: alpha name: CRED-design-analysis description: "A members-only credit card payments and rewards app drawn in pure black with white type at many opacities, a heavy Denton serif for statements, Gilroy for text, wide-tracked uppercase labels, square ghost buttons on the web, and the published NeoPOP system of raised, edged buttons for its apps." status: Draft appVersion: "measured in a browser and read from the published NeoPOP design system, 2026-10-15" platformsCovered: [Web] reviewer: "" verifiedAt: "" colors: primary: "#ffffff" on-primary: "#000000" canvas: "#000000" ink: "#ffffff" ink-90: "#e6e6e6" ink-80: "#cccccc" ink-70: "#b3b3b3" ink-30: "#4d4d4d" ghost: "#000000" ghost-edge: "#4d4d4d" edge-soft: "#333333" panel: "#161517" light-band: "#ffffff" on-light: "#000000" body-dark: "#333333" indigo: "#23264d" typography: # Font note: "denton" is a private font and is not available in open fonts. Closest open alternative: "Crimson Pro". # Font note: "gilroy" is a private font and is not available in open fonts. Closest open alternative: "Figtree". display: fontFamily: "denton, Georgia, serif" fontSize: 114px fontWeight: 700 lineHeight: 100px letterSpacing: -0.4px label-wide: fontFamily: "gilroy, Arial, sans-serif" fontSize: 27px fontWeight: 700 lineHeight: 36px letterSpacing: 6px section: fontFamily: "'Overpass-SemiBold', Overpass, sans-serif" fontSize: 36px fontWeight: 600 lineHeight: 41.6px letterSpacing: 3.5px lead: fontFamily: "gilroy, Arial, sans-serif" fontSize: 23px fontWeight: 500 lineHeight: 28px letterSpacing: -0.38px nav: fontFamily: "gilroy, Arial, sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 44px letterSpacing: 0.3px button: fontFamily: "gilroy, Arial, sans-serif" fontSize: 15px fontWeight: 600 lineHeight: 18px letterSpacing: 3px body: fontFamily: "gilroy, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 33px letterSpacing: 0.75px rounded: none: 0px sm: 2px md: 12px spacing: sm: 15px md: 20px base: 25px lg: 26px xl: 32px components: ghost-button: backgroundColor: "{colors.ghost}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.none}" height: 72px padding: 26px 32px download-panel: backgroundColor: "{colors.ghost}" textColor: "{colors.ink}" typography: "{typography.lead}" rounded: "{rounded.none}" height: 122px padding: 20px 25px statement: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display}" light-band: backgroundColor: "{colors.light-band}" textColor: "{colors.on-light}" typography: "{typography.section}" garage-panel: backgroundColor: "{colors.panel}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" --- ## Overview CRED is an Indian app for paying credit card bills and earning rewards, with payments, loans and a shop for members. Its public site is pure black with white type at many strengths, heavy serif statements, wide-tracked uppercase labels and square ghost buttons over full-bleed imagery. CRED also publishes NeoPOP, its own design system of raised, edged components, with libraries for Android, iOS and the web. [Measured] What defines the look: 1. **Pure black.** The canvas is `#000000`. Text is white at 100, 90, 80, 70 and 30 percent, and edges are white at 20 and 30 percent. [Measured] 2. **A heavy serif statement.** Denton at 700, 112 to 114 on a tighter 100 to 108 line height, in lower case ("crafted for the creditworthy"). [Measured] 3. **Wide-tracked uppercase.** Labels and button text are uppercase with 3 to 6px tracking, in Gilroy or Overpass. [Measured] 4. **Square ghost buttons on the web.** Calls to action are 70 to 72 high boxes of black at 30 percent with a 1px white edge at 20 to 30 percent and no corner radius. [Measured] 5. **NeoPOP in the apps.** The published system describes buttons and cards as a flat face with visible depth edges on chosen sides, a depth setting (3dp in its examples), an optional moving shimmer, a press animation and tilted cards with a floating shadow. [Observed from the published design system] Source for this file: the home page, the UPI page (which showed a "you're off track" page) and the CRED garage page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass, plus the public NeoPOP repositories for Android and the web read on the same day. NeoPOP documents component anatomy but publishes no named color or type tokens. The app sits behind a membership. No device capture was done. See Known Gaps. ## Core ### Colors | Role | Value | Where | |------|-------|-------| | Canvas | `#000000` | Every page [Measured] | | Text | `#ffffff` at 100, 90, 80 and 70 percent (about `#e6e6e6`, `#cccccc`, `#b3b3b3` on black) | Headlines, body, nav [Measured] | | Faint text | white at 30 and 15 percent | Inactive nav items [Measured] | | Ghost fill | black at 30 percent over imagery | Buttons and download panels [Measured] | | Edges | white at 20 and 30 percent (about `#333333`, `#4d4d4d`) | Button and panel outlines [Measured] | | Panel | `#161517` | Garage sections [Measured] | | Light band | `#ffffff` with `#000000` and `#333333` text | Statement bands [Measured] | | Indigo | `#23264d` | The off-track page [Measured] | NeoPOP sets colors per component (face, top, right, bottom and left surfaces, stroke and shimmer) rather than as a named palette. [Observed from the published design system] ### Typography | Role | Desktop | Mobile | Face and weight | |------|---------|--------|-----------------| | Statement | 114 on 100, -0.4px | not measured | Denton 700 [Measured] | | Wide label | 27 on 36, 6px tracking, uppercase | not measured | Gilroy 700 [Measured] | | Section label | 36 on 41.6, 3.5px, uppercase | 25.92 on 33, 2.52px | Overpass 600 to 700 [Measured] | | Download lead | 23 on 28, -0.38px | same | Gilroy 500 [Measured] | | Nav item | 20 on 44, 0.3px | not measured | Gilroy 500 [Measured] | | Body | 18 on 33, 0.75px | 12 on 22, 0.5px | Gilroy 400 [Measured] | | Button | 15 to 20, 3 to 4.8px, uppercase | same | Gilroy 600 [Measured] | ### Shape and spacing Buttons and panels on the web are square (0 radius). Garage panels use 12. [Measured] Buttons carry 26 by 32 padding and download panels 20 by 25. [Measured] NeoPOP shapes are square faces with depth edges, not rounded. [Observed from the published design system] ### Iconography and motion NeoPOP defines a shimmer that sweeps across a button (width, duration, start and repeat delay are settings), a press animation and tilt cards that rotate in place with a floating or grounded shadow. [Observed from the published design system] Web motion was not measured. [Inferred] ### Themes Dark only. The dark color scheme pass changed nothing, because the site is always black. [Measured] ## Platform: iOS How the CRED iOS app looks and behaves. Items marked from the published design system come from NeoPOP, which CRED publishes for Android, iOS and the web. The iOS library's own page was not read, so the anatomy below is taken from the Android and web documentation of the same system. It covers components and behavior, not colors, type, insets or touch targets. No device capture was done. ### Back and up navigation Expected on iOS: Chevron plus previous title, swipe from the left edge. Not measured. [Inferred] ### Primary navigation Expected on iOS: Bottom tab bar, about five items. Not measured. [Inferred] ### Main action Expected on iOS: Nav bar or bottom bar button. A NeoPOP button: a flat face with depth edges drawn on chosen sides, a configurable depth (3dp in the published examples) and an optional press animation and shimmer. [Observed from the published design system] ### Sheets, dialogs and messages Expected on iOS: Action sheets, alerts, modals. Not measured. [Inferred] ### Controls Expected on iOS: Cupertino switches, pickers, segmented controls. Raised NeoPOP buttons and frames, and tilt cards that lean with a floating or grounded shadow. A button can name its neighbor on each side, which the system uses when drawing its edges. [Observed from the published design system] ### Text sizing Expected on iOS: Dynamic Type. Not measured. [Inferred] ### Touch and pointer targets Expected on iOS: 44pt minimum. Not measured. [Inferred] ### Insets and system bars Expected on iOS: Safe areas, status bar. Not measured. [Inferred] ### Icons Expected on iOS: SF Symbols or custom. Not measured. [Inferred] ### 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. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only. ### Platform conformance Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates. NeoPOP replaces the platform's rounded buttons with square raised ones on purpose, as the brand's signature. Navigation, sheets and system bars are not documented by the system and were not seen. [Observed from the published design system for buttons, Inferred for the rest] ## Platform: Android How the CRED Android app looks and behaves. Items marked from the published design system come from NeoPOP, which CRED publishes for Android, iOS and the web. It documents component anatomy and behavior, not colors, type, insets or touch targets. No device capture was done. ### Back and up navigation Expected on Android: System back and gesture, up arrow in the top bar. Not measured. [Inferred] ### Primary navigation Expected on Android: Navigation bar, rail on tablets. Not measured. [Inferred] ### Main action Expected on Android: Floating action button. A NeoPOP button: a flat face with depth edges drawn on chosen sides, a configurable depth (3dp in the published examples), an optional stroke, press animation and shimmer. [Observed from the published design system] ### Sheets, dialogs and messages Expected on Android: Bottom sheets, dialogs, snackbars. Not measured. [Inferred] ### Controls Expected on Android: Material switches, pickers, chips. Raised NeoPOP buttons and frames, and tilt cards with a card rotation, a shadow rotation and a floating or grounded shadow. A button can name its neighbor on each side, which the system uses when drawing its edges. [Observed from the published design system] ### Text sizing Expected on Android: Font scale. Not measured. [Inferred] ### Touch and pointer targets Expected on Android: 48dp minimum. Not measured. [Inferred] ### Insets and system bars Expected on Android: Edge to edge, system bars. Not measured. [Inferred] ### Icons Expected on Android: Material Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on Android: Account deletion and data safety requirements. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only. ### Platform conformance Expected on Android: For each important component: what Android expects, what this app does, and why it deviates. NeoPOP replaces Material's rounded, elevated buttons with square raised ones on purpose, as the brand's signature. Navigation, sheets and system bars are not documented by the system and were not seen. [Observed from the published design system for buttons, Inferred for the rest] ## Platform: Web The home page, the UPI page and the garage page, measured at 1440 and 390 wide. ### Back and up navigation Expected on Web: Browser back, breadcrumbs. Browser back. [Observed] ### Primary navigation Expected on Web: Top nav or sidebar. A black header with product names (CRED money, CRED pay and more) as 20px medium links, inactive ones at 30 percent white. On mobile they collapse into a menu. [Measured] ### Main action Expected on Web: Page-level button. A square ghost button: black at 30 percent with a 1px white edge at 30 percent, uppercase Gilroy 600 with 3 to 4.8px tracking, 70 to 72 high ("Learn more", "Enter CRED garage"). The app download panel is the same style, 122 high. [Measured] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. Not measured. [Inferred] ### Controls Expected on Web: Native or custom. Not measured beyond the ghost buttons. The marketing site does not use the raised NeoPOP buttons. [Measured] ### Text sizing Expected on Web: Browser zoom. Sizes are fixed pixel values that step down on mobile (body 18 to 12, section labels 36 to 25.92). [Measured] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Ghost buttons are 70 to 72 high. [Measured] ### Insets and system bars Expected on Web: Viewport, scrollbars. Not measured. [Inferred] ### Icons Expected on Web: Any. Not measured. [Inferred] ### Account and sign-in rules Expected on Web: Not applicable unless the product has accounts. Not applicable to the public pages measured. Membership is offered through the app. [Observed] ### Platform conformance Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates. A full-bleed, image-led marketing site that keeps the brand's black and white, square shapes and tracked uppercase at every width. [Measured] ## Cross-platform consistency Consistent across platforms: black and white, square shapes and the brand typefaces. [Measured for web, Inferred for the apps] Intentionally different: the web uses flat ghost buttons, while NeoPOP gives the apps raised buttons with depth edges. [Measured for web, Observed from the published design system for the apps] ## Do's and Don'ts ### Do - Keep the canvas pure black and set text white at opacity steps. - Use the heavy serif for short lower-case statements only. - Track uppercase labels wide (3 to 6px). - Keep shapes square: ghost buttons on the web, raised NeoPOP buttons in the apps. ### Don't - Don't round buttons. - Don't add brand colors to the marketing pages. Color comes from imagery. - Don't set body text in the serif. ## Known Gaps - The app sits behind a membership, so no product screens were measured. - The UPI address showed an off-track page set in a different serif, which was not compared. - Mobile topics come from NeoPOP only for the main action and controls (button and card anatomy, depth, shimmer, press and tilt). Navigation, sheets, text sizing, touch targets, insets, icons and account rules are unseen and stay inferred. - The iOS NeoPOP library page was not read. The iOS items rely on the Android and web documentation of the same system. - NeoPOP publishes no named colors or type scale, and its examples use placeholder colors, so no app colors are given. - Denton and Gilroy are private. Crimson Pro (within 1 percent of the 114px statement, similar heavy bracketed serifs) and Figtree (about 2 percent narrower at 27px bold) were chosen by comparing the same line side by side. Overpass is open and is used as is. - Account deletion and store policy rules were not verified.