Back to DesignMD
Kamo Junior
Generated Oct 21, 2026
DESIGN.md for pi-p-chart-scanner-copy-cf6b38de.base44.app
Remixes of pi-p-chart-scanner-copy-cf6b38de.base44.app
Latest remixes
No public remixes yet. Be the first to make one.
Remix itKamo Junior
Generated Oct 21, 2026
Latest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Pi-p-chart-scanner-copy-cf6b38de
description: |
The PiP ChartScanner design system embodies a premium, professional trading
platform aesthetic rooted in a deep, sophisticated dark theme. The visual
language prioritizes clarity and precision, leveraging high contrast between
dark navy backgrounds and bright accent colors to create focus and reduce
cognitive load during complex financial analysis. A strong reliance on
geometric precision—pill-shaped buttons, subtle borders, and restrained
shadows—conveys trustworthiness and modernity. The color palette oscillates
between near-black canvas surfaces and mid-tone blues, punctuated by a vibrant
brand primary accent that commands attention for call-to-action moments.
Typography is clean and measured, using a single font family across all scales
to reinforce coherence. The overall effect is minimalist yet authoritative: a
workspace designed for serious traders who demand clarity without distraction.
source:
url: "https://pi-p-chart-scanner-copy-cf6b38de.base44.app"
pagesAnalyzed: 6
extractedAt: 2026-10-21
tokensMeasured: true
colors:
primary: "#2463EB"
canvas: "#0A101E"
surface: "#111C36"
on-primary: "#FFFFFF"
ink: "#EBF0FA"
hairline: "#203460"
accent-1: "#7F93B8"
accent-2: "#1A2A4D"
typography:
heading:
fontFamily: Inter
fontSize: 30px
fontWeight: 700
lineHeight: 1.2
letterSpacing: -0.75px
body-md:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-sm:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0px
button:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0px
label-sm:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
label-sm-strong:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 1
letterSpacing: 0px
caption:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0px
textTransform: uppercase
rounded:
none: 0px
xs: 16px
sm: 18px
full: 9999px
spacing:
xxs: 8px
xs: 16px
sm: 24px
md: 32px
lg: 40px
borderWidths:
thin: 1px
shadows:
sm: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
md: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px"
lg: "rgb(255, 255, 255) 0px 0px 0px 0px, rgb(32, 211, 238) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
elevationStrategy: layered-micro
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#F8FAFE"
surface: "#EEF0F4"
surfaceRaised: "#E7E9EC"
text: "#12151C"
textMuted: "#696B70"
border: "#D5D7DA"
accent: "#2463EB"
accentFg: "#FFFFFF"
focusRing: "#2463EB"
elevation: shadow
dark:
bg: "#0A101E"
surface: "#111C36"
surfaceRaised: "#242E46"
text: "#EBF0FA"
textMuted: "#9CA2AD"
border: "#203460"
accent: "#2463EB"
accentFg: "#FFFFFF"
focusRing: "#2463EB"
elevation: "border+surface"
components:
button-primary:
typography: "{typography.button}"
textColor: "{colors.on-primary}"
height: 48px
padding: "8px 16px 8px 16px"
boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px"
rounded: "{rounded.full}"
backgroundColor: "{colors.primary}"
button-outline:
typography: "{typography.button}"
textColor: "{colors.ink}"
border: "1px solid {colors.accent-2}"
height: 48px
padding: "8px 16px 8px 16px"
boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
rounded: "{rounded.full}"
card:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
border: "1px solid {colors.hairline}"
padding: "32px 32px 32px 32px"
boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.surface}"
card-sm:
typography: "{typography.body-sm}"
textColor: "{colors.accent-1}"
padding: "0px 12px 0px 12px"
backgroundColor: "{colors.surface}"
link:
typography: "{typography.body-sm}"
textColor: "{colors.primary}"
link-2:
typography: "{typography.button}"
textColor: "{colors.primary}"
states:
nav-active:
target: nav
state: active
backgroundColor: "rgb(27, 44, 80)"
other-active:
target: other
state: active
backgroundColor: "rgb(27, 179, 204)"
other-focus-visible:
target: other
state: focus-visible
outline: "{colors.on-primary} solid 2px"
outlineColor: "{colors.on-primary}"
outlineWidth: 2px
button-hover:
target: button
state: hover
filter: "brightness(1.12)"
button-active:
target: button
state: active
filter: "brightness(0.95)"
other-hover:
target: other
state: hover
backgroundColor: "rgba(0, 0, 0, 0.3)"
other-focus:
target: other
state: focus
opacity: 1
other-disabled:
target: other
state: disabled
opacity: 0.5
nav-hover:
target: nav
state: hover
opacity: 1
breakpoints:
- width: 375
containerWidth: 375
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 30
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 768
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 30
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 1024
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 30
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1280
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 30
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1440
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 30
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 61
gradientsFound: 0
rolesUnassigned: 2
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
The PiP ChartScanner design system embodies a premium, professional trading platform aesthetic rooted in a deep, sophisticated dark theme. The visual language prioritizes clarity and precision, leveraging high contrast between dark navy backgrounds and bright accent colors to create focus and reduce cognitive load during complex financial analysis. A strong reliance on geometric precision—pill-shaped buttons, subtle borders, and restrained shadows—conveys trustworthiness and modernity. The color palette oscillates between near-black canvas surfaces and mid-tone blues, punctuated by a vibrant brand primary accent that commands attention for call-to-action moments. Typography is clean and measured, using a single font family across all scales to reinforce coherence. The overall effect is minimalist yet authoritative: a workspace designed for serious traders who demand clarity without distraction.
Key Characteristics
{colors.canvas} – #0A101E){colors.primary} – #2463EB) for CTAs and interactive states{rounded.full} – 9999px){colors.primary} – #2463EB): Primary call-to-action buttons, brand accent, active state indicators, and focused interactive elements. Used for sign-in button, active navigation states, and primary form actions.{colors.accent-1} – #7F93B8): Secondary decorative use with no defined role; available for non-critical UI accents or future semantic assignment.{colors.accent-2} – #1A2A4D): Tertiary decorative use with no defined role; available as a slightly lighter mid-tone accent.{colors.canvas} – #0A101E): Default page background; deepest neutral establishing the foundation of all interfaces.{colors.surface} – #111C36): Card and panel backgrounds; raised from canvas to establish hierarchy and containment.{colors.ink} – #EBF0FA): Primary heading and body text; highest contrast neutral for readability.{colors.on-primary} – #FFFFFF): Label text and content overlaid on primary brand surfaces; pure white for maximum clarity on blue CTAs.{colors.hairline} – #203460): 1px borders and dividers; subtle tonal separation between surfaces without harsh contrast.Primary: Inter (400, 500, 600, 700 weights)
Fallback stack: system-ui, -apple-system, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Heading (H1/Display) | Inter | 30px | 700 | 1.2 | -0.75px | Hero and page titles; negative tracking for visual impact |
| Body – Medium | Inter | 16px | 400 | 1.5 | 0px | Primary body copy and form helper text |
| Body – Small | Inter | 12px | 400 | 1.33 | 0px | Secondary text, captions, metadata |
| Button | Inter | 14px | 500 | 1.43 | 0px | CTA labels; medium weight for prominence |
| Label – Small Strong | Inter | 14px | 500 | 1 | 0px | Form field labels with emphasis |
| Label – Small | Inter | 14px | 400 | 1.43 | 0px | Form input placeholders and hints |
| Caption | Inter | 12px | 400 | 1.33 | 0px | Fine print, timestamps; uppercase text-transform applied |
Primary Variant
{colors.primary} – #2463EB{colors.on-primary} – #FFFFFF8px 16px48px382px (full-width in form context){typography.button} (14px, 500, 1.43){rounded.full} – 9999px0px solid (none)rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1pxfilter: brightness(1.12) + box-shadow: 0 20px 80px -6px hsl(var(--accent) / .8), inset 0 6px 14px #ffffff4dfilter: brightness(0.95)outline: 3px solid hsl(var(--accent))Outline Variant
rgba(0, 0, 0, 0) (transparent){colors.ink} – #EBF0FA8px 16px48px382px{typography.button} (14px, 500, 1.43){rounded.full} – 9999px1px solid rgb(26, 42, 77) (subtle surface tint)rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0pxDefault Card
{colors.surface} – #111C36{colors.ink} – #EBF0FA{spacing.md} – 32px all sides448px (measured form context)410px (measured form context){typography.body-md} (16px, 400, 1.5){rounded.xs} – 16px1px solid rgb(32, 52, 96) (subtle hairline contrast)rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0pxSmall Card / Badge
{colors.surface} – #111C36{colors.accent-1} – #7F93B80px 12px16px{typography.body-sm} (12px, 400, 1.33){rounded.none} – 0px (sharp corners)0px (none)Email / Text Input
{colors.surface} – #111C36{colors.ink} – #EBF0FA{colors.accent-1} – #7F93B8 (muted){typography.label-sm} (14px, 400, 1.43){rounded.sm} – 18px1px solid rgb(32, 52, 96) (hairline)hsl(var(--primary) / var(--tw-border-opacity,1))Password Input
Primary Link
{colors.primary} – #2463EB{typography.body-sm} (12px, 400, 1.33)0px (none)0px (none)rgba(0, 0, 0, 0) (transparent)outline: 2px solid hsl(var(--accent))Secondary Link (14px variant)
{colors.primary} – #2463EB{typography.button} (14px, 500, 1.43)0px0px (none)rgba(0, 0, 0, 0) (transparent)Base unit: 8px
Scale:
{spacing.xxs} – 8px: Tight internal padding in small components (e.g., button icon offset){spacing.xs} – 16px: Standard padding for buttons and form elements; small gap between sections{spacing.sm} – 24px: Medium spacing between related content groups{spacing.md} – 32px: Card and container padding; major section spacing{spacing.lg} – 40px: Large gaps between major content blocks or full-width sectionsUsage context:
{spacing.xxs} internal padding (8px 16px){spacing.md} all-sides padding (32px){spacing.md} to {spacing.lg} between logical groupings0px at all measured breakpoints; full bleed to viewport edges on login form.Whitespace is generous and intentional. The system prioritizes breathing room around interactive elements and between logical sections. A card sits centered within the canvas with ample margin above and below. Input fields and buttons have consistent vertical spacing (inherited from {spacing.md}). Horizontal padding within cards matches vertical padding to create visual equilibrium. No tight clustering of elements; every component is distinct and separately scannable.
{rounded.none} – 0px: Applied to small badges or utility elements (e.g., small card tags){rounded.xs} – 16px: Card and container corners; moderate rounding for contained surfaces{rounded.sm} – 18px: Input field corners; slightly more rounding than cards for softer input appearance{rounded.full} – 9999px: Buttons; creates pill-shaped interactive elements for visual prominence1px: Applied to button outlines and card/input borders; hairline separation between canvas and surface layers| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Small badges, utility text, background overlays |
| Micro (sm) | rgba(0, 0, 0, 0.05) 0px 1px 2px 0px | Cards with minimal lift; subtle visual separation |
| Micro (md) | rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px | Buttons; slightly more prominence than cards |
| Custom (lg) | rgb(255, 255, 255) 0px 0px 0px 0px, rgb(32, 211, 238) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px | Custom branded depth with accent border glow (reserved for special states) |
Shadow Philosophy:
The system employs a layered-micro approach where depth is conveyed through color shifts and barely-there shadows rather than dramatic drop shadows. The first two layers of the shadow stack are transparent (rgba(0, 0, 0, 0)), functioning as a baseline. The true shadow appears in the third layer with very low opacity (0.05–0.1) and minimal offset (1px down, 0px horizontal), creating a paper-thin lift effect. This preserves the flat, premium aesthetic while adding just enough depth for interactive surfaces to distinguish themselves from the canvas. On button hover, the shadow intensifies with an inset highlight, reinforcing the interaction without creating heavy visual weight.
{colors.primary} (#2463EB) for all primary call-to-action buttons and active interactive states.{rounded.full} (9999px) to all interactive buttons for consistency with the pill-shaped system signature.{colors.surface} (#111C36) backgrounds with {colors.ink} (#EBF0FA) text for maximum readability and accessibility.{spacing.md} (32px) as internal padding for cards and containers; use {spacing.xs} (16px) for button/input padding.{rounded.sm} (18px) to differentiate them from card corners ({rounded.xs} – 16px).{colors.hairline} (#203460) for 1px borders on cards and inputs to create subtle tonal separation without harsh contrast.{typography.heading} (30px, 700, -0.75px letter-spacing) to page titles and hero-level headings for visual authority.:hover state brightness filter (brightness(1.12)) to primary buttons for clear interactive feedback.{colors.accent-1} or {colors.accent-2} for interactive CTAs; these are decorative only. Reserve the brand primary for all interactive emphasis.{rounded.full}, cards {rounded.xs}, inputs {rounded.sm}.0 20px 40px rgba(0,0,0,0.3)). The system is intentionally micro-shadowed; heavy shadows break the minimalist aesthetic.{spacing.md} (32px); never deviate to arbitrary values.{colors.ink} as a background; it is text-only. Always pair it with {colors.canvas} or {colors.surface} backgrounds.:focus-visible; avoid high-contrast blue outlines on all elements.1px solid rgb(26, 42, 77) border is essential to distinguish them from transparent backgrounds.| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 375px | Full-width content (375px); same heading/body sizes as desktop; no layout collapse observed |
| Tablet | 768px | Content width scales to 768px; all typography and spacing unchanged |
| Desktop – Small | 1024px | Content width scales to 1024px; no component restructuring |
| Desktop – Medium | 1280px | Content width scales to 1280px; no component restructuring |
| Desktop – Large | 1440px | Content width scales to 1440px; no further scaling observed |
Responsive Strategy: The login form and primary surfaces scale linearly with the viewport; there is no breakpoint where layout fundamentally changes (e.g., single-column to multi-column). All typography sizes, line heights, and weights remain constant across breakpoints. Padding and spacing do not contract or expand based on viewport. This indicates a fluid, proportional scaling approach rather than discrete breakpoint-driven layout shifts. The form card maintains its 448px width at all breakpoints (or max-width container width if smaller).
{spacing.xs} (16px) minimum between buttons or form inputs to prevent accidental selection.0px at all breakpoints; content extends to viewport edges.{spacing.xxs} through {spacing.lg}) and ensure all elements scale proportionally rather than jumping sizes at breakpoints.#2463EB)#FFFFFF)#0A101E)#111C36)#EBF0FA)#203460)#7F93B8), Accent-2 (#1A2A4D){colors.canvas} (#0A101E); never use a light background unless explicitly specified in a new theme.{rounded.full} (9999px) with {colors.primary} fill and {colors.on-primary} text; apply micro shadow (md level).{colors.surface} background, {rounded.xs} corners, 1px {colors.hairline} border, and {spacing.md} padding.{rounded.sm} to inputs (not {rounded.xs}); use 1px hairline border and {colors.surface} background.{spacing.xxs}, {spacing.xs}, {spacing.sm}, {spacing.md}, or {spacing.lg}.{sm} level (0.05 opacity); button shadow is {md} level (0.1 opacity); never use drop shadows exceeding 2px vertical offset.{colors.primary} (#2463EB), no underline, no background; apply :focus-visible outline (2px solid hsl(var(--accent))) only on keyboard focus.brightness(1.12) + enhanced shadow; Active = brightness(0.95), Focus-visible = 3px solid outline.:hover, :active, and :focus-visible states for buttons and links, but did not observe :disabled, :loading, or error states in active use. Implement disabled state as opacity: 0.5 based on standard pattern.{colors.accent-1} (#7F93B8) and {colors.accent-2} (#1A2A4D) appear in the extracted palette but have no measurable semantic purpose; treat as decorative or reserved for future use.lg) usage not confirmed: The custom lg shadow with accent glow (rgb(32, 211, 238)) appears in the token data but was not observed in active use on the login page. Its purpose and target components are inferred from naming only.sticky: 100) was observed. A complete stacking scale (base, dropdown, modal, toast, etc.) was not measured; use 100 as a reference point and scale outward as needed.