RankOne

Overview

RankOne is a precision-engineered live options ranker for NSE traders, delivering real-time strike selection and Greeks calculation in a dark-mode, data-dense interface. The brand embodies 'Quantitative Minimalism'—a design philosophy that strips away visual noise to expose pure trading intelligence. Every pixel serves data delivery; every interaction reduces cognitive load. The UI evokes the aesthetic of professional trading terminals: monochromatic, high-contrast, and uncompromisingly functional. The emotional response is one of control and clarity: a trader using RankOne feels equipped, not overwhelmed.

The voice is direct, technical, and confident—never marketing-speak. Vocabulary leans into trading vernacular (Greeks, DTE, strike, capital allocation, move) without jargon gatekeeping. Tone is matter-of-fact: 'Running free on NSE's own chain feed — no key needed.' Example sentence: 'Snapshots refresh every 20 seconds and Greeks are derived from live prices.'

Colors

The color system is anchored in a near-black surface (#09090b) that minimizes eye strain during extended trading sessions while maximizing contrast for critical data. Primary accent is a cool gray (#c9d0d8), used sparingly on CTAs and interactive elements—this is the 'signal' color that draws attention without aggression. The outline system (#6c757d for primary, #505050 for variant) provides subtle visual separation between input fields, cards, and containers without introducing visual clutter.

Status colors follow semantic conventions: success uses hsl(143, 85%, 96%) background with hsl(140, 100%, 27%) text for positive price moves; error uses hsl(359, 100%, 97%) background with hsl(360, 100%, 45%) text for losses or warnings; info uses hsl(208, 100%, 97%) background with hsl(210, 92%, 4

Typography

The type system pairs Instrument Sans (primary, weights 400–700) for UI and data labels with IBM Plex Mono (weights 400–500) for code snippets, token values, and live price feeds. Display and headline levels (56px down to 20px) use Instrument Sans at 600–700 weight with tight letter-spacing (-0.02em to -0.01em) to command attention in headers and section titles. Body text (18px and 16px) sits at 400 weight with 28px and 24px line-height respectively, ensuring readability in dense data tables and explanatory prose. Label and code levels (14px and 12px) use 500 weight in Instrument Sans for form labels and 400 weight in IBM Plex Mono for monospaced data values. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) on small labels (label-sm) when overlaid on busy backgrounds or charts to maintain l

Layout

The layout uses a 12-column grid with a 1280px max-width container, maintaining a 24px gutter on desktop and collapsing to 16px on mobile. Page rhythm is driven by 40px (lg spacing) for section separation and 24px (md spacing) for component padding, creating a visual cadence that feels neither cramped nor wasteful. The hero section (header + live ticker) occupies the full viewport height, followed by a 40px gap before the 'Data feed' section. Input forms and data tables use 12px (sm spacing) for internal cell padding and 24px (md spacing) for row separation, allowing traders to scan dense option chains without visual fatigue. The container-max-width of 1280px ensures that even on ultra-wide displays, the interface remains scannable; content wider than this is either scrollable horizontally

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background shifts rather than dramatic layering. Level 1 (Base): the surface (#09090b) with no shadow, used for the main canvas. Level 2 (Standard Card): background-color: {colors.surface-container} (#131722) with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), used for input fields, dropdowns, and data cards. Level 3 (Elevated/Modal): background-color: {colors.surface-container-high} (#1d1d24) with box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), used for modals, popovers, and primary CTAs. Focus states add an additional ring: box-shadow:

Shapes

The shape philosophy is 'Functional Precision'—rounded corners are used sparingly and consistently to signal interactivity without softening the interface's technical character. Buttons and primary CTAs use 1rem (16px) border-radius, creating a subtle roundness that feels intentional rather than decorative. Input fields, dropdowns, and select panels use 0.5rem (8px) border-radius, maintaining a slightly sharper appearance that reinforces their role as data-entry points. Cards and containers use 1rem (16px) border-radius to match buttons, creating visual cohesion. Badges and status indicators u

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses background: {colors.primary} (#c9d0d8), text-color: {colors.on-primary} (#09090b), padding: 10px 16px, height: 40px, border-radius: 1rem, and font-weight: 500. On hover, shift to background: {colors.primary-fixed-dim} (#a8b0b8) with a 120ms ease transition. On active/pressed, use background: {colors.primary-container} (#a8b0b8) with box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2). Secondary buttons use a transparent background with a 1px border (border-color: {colors.outline}) and text-color: {colors.primary}; on hover, apply background: {colors.surface-container-high} (#1d1d24) with the same 120ms transition.

Containers & Surfaces Cards are the primary container for grouped data. Use background:

Do's and Don'ts

**Do**

• Do use the primary accent (#c9d0d8) exclusively on CTAs, focus states, and high-priority interactive elements—never on backgrounds or body text.
• Do maintain the 24px gutter and 40px section spacing to preserve the breathing room that makes dense data scannable.
• Do apply the full border-radius (9999px) only to status badges and pills; use 1rem for buttons and cards, 0.5rem for inputs.
• Do use IBM Plex Mono for live price feeds, token values, and code snippets to signal 'this is data, not prose'.
• Do transition all hover/focus states over 120–200ms ease to feel responsive without appearing glitchy.
• Do use the semantic status colors (success hsl(143, 85%, 96%), error hsl(359, 100%, 97%), info hsl(208, 100%, 97%)) with their paired text colors for consistency across all notifications and badges.

**Don't**

• Don't use the primary accent (#c9d0d8) on large background areas or as a dominant surface color—it's an accent, not a canvas.
• Don't apply shadows deeper than 0 16px 40px rgba(0, 0, 0, 0.25) or use multiple layered shadows; the terminal aesthetic demands restraint.
• Don't mix border-radius values arbitrarily; stick to the scale (0.25rem, 0.5rem, 1rem, 9999px) to maintain visual consistency.
• Don't use system fonts or generic sans-serif fallbacks; always load Instrument Sans and IBM Plex Mono from Google Fonts to preserve the brand's technical character.
• Don't reduce the line-height below 1.4 on body text or below 1.5 on labels, even in dense data tables—readability over pixel perfection.
• Don't apply color to text smaller than 14px without also applying text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) when the text overlays busy backgrounds.