A familiar style.
Every time.

Give your AI the right starting point.

Share this brief with your colleague’s AI, along with the source files. For the complete rules, include BRAND_GUIDELINES.md. The homepage is the reference; the archive is historical.

A mark with character.

Keep the pixel logomark crisp and upright. Use the supplied SVGs, keep their proportions, and give them space. The Pixel study holds the original logo behaviour specimens.

/markets

• In descriptions, use the inline badge. Its fill inherits the local text colour at 10%, so it belongs on the surrounding surface.
• The custom slash is 0.8em high. Keep the description’s natural line height and the wordmark together.
• Do not rotate, redraw, stretch or replace the mark. Backend terminals use the monochrome mark without a container.
• Headings, navigation and standalone logos do not automatically need the prose badge.

<span class="markets-wordmark markets-label">
  <span class="markets-slash">/</span>markets
</span>

Editorial headlines. Easy reading.

The landing page uses three self-hosted typefaces. Reuse the existing files and CSS variables. The Pixel study’s Google Sans is specific to that study.

Departure Mono belongs inside terminal content, with Onest for the terminal header. It is not a new body or headline style. Preserve intentional heading breaks and keep meaningful phrases together on phones.

Quiet foundations. A little sunshine.

White and warm neutrals hold the page together. Yellow signals a selected prompt or a user’s question. Pastels live mainly in the artwork and feature surfaces.

• Primary buttons use #171a17 and white text. The hero retains its existing #161816 ink and #60645f description.
• Keep existing local colour variations. This palette is a reference, not a reason to recolour finished components.
• Use readable ink for text. Pastel text, neon accents and a new dark theme do not belong to this website.

Let the page breathe.

Keep a clear hierarchy and enough room to understand each visual. Follow the spacing of the component beside the change, rather than adding a new layout system.

• The central serif statement has intentionally larger gaps. Keep its existing 132px / 224px desktop padding and 80px / 128px mobile padding.
• Keep chat height stable when prompts change. One conversation continues from hero to examples.
• Do not make every section the same grid. Preserve the homepage’s mix of split layouts, full-width demonstrations and editorial text.

Reuse what already feels familiar.

These specimens use the homepage’s actual classes or surface values. Keep component styles in their owning files, and preserve hover, focus and mobile behaviour.

The primary action

Connect your AI

Onest 16px / 400. Dark fill. 50px minimum height. Fully rounded. One clear primary action.

A prompt to explore

Find oversold stocks

Yellow selected state, plus icon at rest, up-arrow on hover or focus. Keep the language short.

Soft glass, not faded content.

background: rgb(247 246 242 / .74);
backdrop-filter: blur(8px) saturate(1.1);
-webkit-backdrop-filter: blur(8px) saturate(1.1);

A light, readable backend.

/markets backend

14-day RSIBelow 30

TCS27.6

Infosys28.4

• Shape: pill buttons and selectors; 12–24px main containers; about 14px glass cards; existing asymmetric message bubbles; square backend terminals.
• Icons: Tabler for interface controls. Use the supplied brand SVGs. No new homemade icons, emoji, rotations or coloured side-border decoration.
• Details: reuse the native dialog. 180ms open, 120ms close; Close, outside click and Escape; focus returns to the trigger. Long bodies scroll while the header stays visible.

One world, across the page.

Soft sculpted surfaces, organic curves, gentle light and a restrained pastel palette. Reuse approved artwork before generating anything new. Give the text a quiet place to sit.

Dither is part of the material.

Use the existing Paper-derived 8×8 shader and static fallbacks. Keep the source colours, text-protecting masks and clear centre lens of the accuracy video. Do not replace it with random noise or a checkerboard overlay.

• Keep the CTA symmetrical. Preserve the footer’s upper 70% dither fade and the existing example/hero masks.
• Use compressed WebP and existing MP4 files. Preserve the iPhone PNG’s transparency. Lazy-load nonessential images.
• Avoid busy flow knots, literal chart wallpaper, trading-desk clichés, jungle scenes and neon circuitry. A new asset should belong beside the current hero.

Quick feedback. Readable stories.

Motion should explain what the AI is doing. Reuse the shared clock and existing sequences; preserve finished states when the visitor scrolls back.

• Desktop chat travels between hero and examples without resetting. On phones it does not travel.
• Desktop backend windows open on hover/focus. On phones, tool details expand inside the chat and can be reopened by touch.
• Keep reduced-motion content fully readable. Pause offscreen videos and renderers. Never tie video playback speed or a popup’s interaction timing to scroll velocity.

Talk like a helpful trader friend.

Lead with the action someone can take. Keep the language concrete and approachable. Leave Python, tokens and implementation details for the places where they help explain a result.

• Use short, direct sentences. Avoid em dashes, jargon, exaggerated promises and generic AI marketing language.
• Indian markets are supported now. International markets are coming soon. Do not invent new integrations or an account-creation URL.
• The AI builds the trading tool; /markets supplies the market data and calculations. It is not a separate app builder, financial adviser or autonomous order-execution product.
• Accuracy: 7/8 versus 4/8 in one eight-question test. 90% is rounded from 87.5%, not an overall accuracy rate.
• Cost: 86% is an assumption-based API-cost estimate, not a measured universal saving or a cheaper fixed-price chat subscription.
• Keep the details popups and disclaimer. Do not invent trader names, attributed testimonials, test runs or performance figures.

Find the right file first.

All paths below are relative to the website root: dist/ in the working project, or the repository root in the clean GitHub export. Edit the owning component rather than adding global overrides.

The local project preserves the old homepage under archive/landing-v1/, and fresh/ redirects to the homepage. The clean public export omits both. Neither is the source for new edits.

Keep the small details intact.

1. Read the guide and the component’s current code. Make the smallest complete change.
2. Check 1440px desktop, 390px and 320px mobile. No page overflow, edge-stuck cards, clipped copy or changing chat heights.
3. Test keyboard focus, mobile navigation, popup close/outside/Escape, replay and reduced motion for the component you changed.
4. For animation work, test both scroll directions and refresh in a later section. Preserve the conversation’s progress.
5. Check syntax, relevant tests, missing assets and browser errors. Keep font, icon and shader license notices.
6. Keep claims, their explanations and the disclaimer together. Publish or push only when the user asks.