Terminal Portfolio

# Terminal Portfolio

{
  "summary": "A precision-focused 'Terminal' style dashboard with a dark #050505 base, utilizing a 1px grid system, monospaced data visualization, and monochromatic highlights. The layout prioritizes data density and legibility through a surgical application of whitespace and borders.",
  "style": {
    "description": "Dark mode monochromatic aesthetic with flat design principles. Typography pairs 'Satoshi' (sans-serif) for UI labels with 'JetBrains Mono' (monospaced) for numerical data and system status. Color palette: #050505 (Base), #0A0A0A (Panel), #1C1C1C (Borders), #F0F0F0 (Primary Text), #666666 (Muted Text). Features zero gradients, zero shadows, and strictly sharp 1px borders.",
    "prompt": "### Visual Language & Aesthetic\n- **Theme**: Monochromatic, High-Density Terminal/SaaS Dashboard.\n- **Colors**: \n  - Background Base: `#050505` \n  - Panel Background: `#0A0A0A` \n  - Hover State: `#141414` \n  - Border (Dimm): `#1C1C1C` \n  - Border (Focus): `#333333` \n  - Primary Text: `#F0F0F0` \n  - Muted Text: `#666666` \n  - Accent/Inversion: `#FFFFFF` (background) with `#000000` (text).\n\n### Typography\n- **Headings & UI**: 'Satoshi', sans-serif. Use `font-weight: 500` or `700` for hierarchy.\n- **Data & Numbers**: 'JetBrains Mono', monospace. Use for all price points, timestamps, and status logs. Font-size: `11px` to `13px`.\n- **Captions**: Use monospaced font, `10px`, uppercase, with `tracking-widest` (letter spacing) for a system-command look.\n\n### UI Elements\n- **Borders**: Strictly 1px solid `#1C1C1C`. No rounded corners (radius: 0px) on containers. \n- **Buttons**: \n  - Secondary: Ghost style with 1px border, transitions to `#141414` on hover.\n  - Primary: Solid `#FFFFFF` background with `#000000` text, bold, no radius.\n- **Animations**: \n  - Pulse animation for status indicators: `opacity` 1 to 0.4.\n  - Transitions: `150ms ease-in-out` for hover states.\n- **Scrollbar**: Width `6px`. Track: `#050505`. Thumb: `#333333` (no radius)."
  },
  "layout_and_structure": {
    "description": "A fixed sidebar layout with a multi-pane content area. The main workspace uses a 1px border grid to separate metrics, interactive charts, and data tables.",
    "prompts": [
      {
        "part": "Sidebar Navigation",
        "prompt": "Width: 220px. Background: `#0A0A0A`. Right border: 1px `#1C1C1C`. \n- Top section: Logo/Brand name in monospace uppercase with a 12px white square icon.\n- Navigation items: 13px font size, vertical list, 1.5 padding. Active state uses `#141414` background.\n- Footer section: System status logs (Latency, Status) in 11px monospaced text with a pulsing white dot indicator."
      },
      {
        "part": "Top Header Bar",
        "prompt": "Height: 48px. Background: `#0A0A0A`. Bottom border: 1px `#1C1C1C`. \n- Left side: Breadcrumb navigation in 12px monospace (e.g., WORKSPACE / ANALYTICS).\n- Right side: Command-style search bar (input field) with 1px border, 11px font, and placeholder 'CMD+K to search...'. Includes a gear icon for settings."
      },
      {
        "part": "Metrics Grid",
        "prompt": "Four-column horizontal layout. \n- Each cell: 1px border, `#0A0A0A` background.\n- Header: 10px uppercase monospaced text, tracking-widest.\n- Value: 24px 'JetBrains Mono' font, tracking-tight.\n- Footer: 11px mono text showing percentage change, separated by a top border 1px `#1C1C1C`."
      },
      {
        "part": "Performance Chart Area",
        "prompt": "Layout: 2/3 width. \n- Header: 48px height with time-period selectors (1H, 1D, 1M, etc.). The active selector is solid white with black text.\n- Visuals: Surgical SVG line graph (no area fill, just stroke-width: 1.5 white line). \n- Grid Lines: Horizontal lines using `stroke-dasharray='2 4'` at 25% intervals.\n- Crosshair: A thin vertical and horizontal dashed line following the cursor, with a price tag floating at the intersection."
      },
      {
        "part": "Data Tables (Watchlist & Positions)",
        "prompt": "Full width or 1/3 split. \n- `border-collapse: collapse`.\n- Table Headers: 10px monospace, muted color, uppercase, 12px padding.\n- Rows: 1px bottom border, transitions to background `#141414` on hover.\n- Numbers: Right-aligned 'JetBrains Mono' for vertical digit alignment.\n- Custom Pills: Small status badges (e.g., 'LONG 5x') with 1px border and transparent background."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Surgical Polyline Chart",
      "description": "A performance graph that avoids all 'friendly' visual cues like curves or gradients.",
      "prompt": "Create an SVG-based line chart where the line is a single white stroke (`#FFFFFF`, width 1.5px). Disable anti-aliasing if possible or use `vector-effect='non-scaling-stroke'`. Background grid must be 1px dashed `#1C1C1C`. Y-axis labels must be 10px mono, left-aligned, showing financial increments (e.g., 2.5M)."
    },
    {
      "component": "Command Search Input",
      "description": "Technical search bar designed for keyboard-first users.",
      "prompt": "Width: 256px. Background: `#050505`. Border: 1px `#1C1C1C`. Padding: 4px horizontal, 28px left (for icon). Font: 11px JetBrains Mono. On focus, the border color changes to `#FFFFFF`. Use a Lucide-style search icon at 12px size."
    }
  ]
}