Cointrix

01Colors

• Ink black#040605Background · 65% · BlackPage background from the logo row to the footer. Very slightly green-black, not pure #000.
• Charcoal#1E1C1DSurface · 7.3% · BlackTools bento cards and the two small dark icon tiles.
• Warm graphite#302F2DSurface · 8.8% · GrayPrimary dark buttons, newsletter band, CTA dashboard panel and the mosaic chart panel.
• Sand#DAC9BFAccent · Beige & creamThe only warm accent: View Details buttons, the large center icon tile, the hero gradient top-left corner, check and sparkle glyphs.
• Fog gray#939496Background · 5% · GrayCool end of the hero gradient (top right). Mid point reads about #ACA8A7.
• White#FFFFFFText · 4.6% · WhiteSerif headlines, nav CTA text, and the fill of floating widgets, ticker cards, Sign In and the email field.
• Bone#D9CCC6Text · Beige & creamWarm off-white for FAQ questions and the mono pill labels (#CFC0B8 in the pills).
• Silver#B5B7B6Muted text · 3.6% · GraySection subheads on black and footer links (#C4C6C5).
• Warm taupe#8D8882Muted text · 5.7% · GrayBento card descriptions and FAQ answers (#7D7C78).
• Hairline#202221Border · BlackPill outlines and social-button borders. The footer ghost wordmark is a similar #1D1F1E.
• Gain green#2CBB25Status · GreenUp arrows and % deltas on the white ticker cards. The dark dashboard uses a duller #398755 for "+8.2".
• Suggestion green#58B25CStatus · GreenAI Suggestion pill text and "You gained $2,486.00 last 6 months".
• Link blue#417CEAAccent · BlueOnly inside the light dashboard mockup: active "Market" nav item. The AI badge uses pale blue #E1E8F7.

Warm-neutral monochrome. About 57% of the area is ink black, with charcoal and graphite steps for surfaces, so contrast comes from value rather than hue. The single brand accent is a desaturated sand (#DAC9BF), rationed to one button style, one icon tile, the pill text tint and the hero gradient. Saturated color appears only inside product mockups: green for gains, blue for an active nav item, and the browser traffic-light dots. The hero is the one lighter area (sand to fog gray) but still carries white type, so the page reads as dark throughout. Charts and the gauge are grayscale or sand, never colored.

02Typography

Specimens use a stand-in face of the same class and weight.

Pairing

A three-voice system: a thin serif for emotion and headlines, a neutral grotesk for reading, and a small monospace for eyebrows and stat captions. The serif gives the page its premium, editorial tone. The mono adds a technical, terminal-like note that fits the Web3 positioning, and the grotesk stays out of the way. Product mockups switch to Inter, which keeps the UI realistic and separate from the marketing type. It works because each face has one job and the weights are all light to regular, so nothing shouts.

Hierarchy

Measured at 1x (the capture is about 2x): hero H1 about 64px light serif with tight leading; section H2s about 52 to 56px; the centered statement about 44px with inline icons; stat numerals about 44px. Body copy is 16 to 18px in silver or taupe, kept to roughly 60 to 70 characters per line. Mono labels are about 13 to 14px. Contrast comes from size and value (white serif against gray body), not from weight: there is almost no bold anywhere except mockup prices.

03Layout

Long single-page scroll. A light gradient hero with centered copy and two CTAs leads into a wide dark dashboard mockup that fades into the black page. Below it: a logo row, a centered statement block with icon tiles and stats, a left-aligned AI features row of three photo cards, a tools bento (2x2 dark cards plus one tall browser mockup), a centered coin-orbit section, a 50/50 FAQ split with a chart panel, a split CTA banner, a newsletter band and a four-column footer with a giant cropped wordmark. Shots 2 and 3 do not overlap, so the lower part of the bento is not visible.

Alignment

mixed

Density

airy

Width

contained

Corners

subtle

Depth

layered

Grid

Content width about 1220px of a 1440px canvas. 3-up stats with gradient hairline dividers; 3 equal photo cards; bento of two 1/4-width card columns (2 rows) plus a 1/2-width tall card; 7 coin nodes scattered in two staggered rows; FAQ 45/55 split; CTA banner 50/50; newsletter 60/40; footer with 3 link columns plus a brand column on the right.

Spacing

Very generous vertical rhythm: roughly 160 to 240px between sections, with pure black voids that let each block breathe. Inside cards, about 24 to 32px padding. Eyebrow pill, H2 and subhead stack with about 24px gaps, then about 80px before the content grid.

04Sections 12

1. 01
   Navbar

   Transparent over the hero gradient. Logo mark and wordmark left; centered links Features (with chevron dropdown), AI Solutions, Portfolio, Resources in white at reduced opacity; right side has a white "Sign In" button and a graphite "Start you Trial" button.

2. 02
   Hero

   Sand (#D9C8BE) to fog gray (#939496) diagonal gradient overlaid with a faint square grid that has small crosshair marks at intersections. Uppercase mono chip, two-line light serif headline in white, two-line centered subhead, and two CTAs: graphite "Start you Trial" with a scan icon and white "Talk to sales" with a chat-bubble icon. A dark misty-mountain photo rises from the lower edge.

3. 03
   Product mockup

   Wide translucent dark trading app laid over the mountain photo, masked to fade into black at the bottom: sidebar (Explore, Marketplace, My Collections, Activity, Community), search "Search NFTs...", LUNA-X token header with verified badge and social icon buttons, $2.35 +8.2 24h price, thin gray line chart with dashed gridlines and hour labels, a Swap/Buy/Sell widget for MetaMask (Sell 0.00 Ethereum, Buy 0.00 LUNA-X), bell icon and wallet chip 0×7D44...2fB9. "Portfolio Overview / You Hold 320 LUNA" ghosts out at the bottom.

4. 04
   Logo cloud

   Six gray monochrome logos in one row on black: Google, amazon, Adobe, Webflow, GitHub, shopify. The first and last are faded by an edge mask, which suggests a scrolling marquee.

5. 05
   Stats

   Centered statement block: a trio of icon tiles (dark chart-node tile, larger sand dollar-circle tile, dark sparkle tile), a mono pill "Trusted by logistics professionals" (template copy that does not match the product), a three-line serif statement with small inline icons between words, then three stats (75+ Industry Recognitions, 12M+ Trades Analyzed, 99% Satisfaction Rate), each with a small outline icon (trophy, ship, star), serif numeral and mono caption, separated by vertical gradient hairlines.

6. 06
   Features

   "New AI Features" pill, left-aligned H2 "Revolutionize your investing with AI" and subhead. Three equal cards, each a gradient plus pixel-mosaic background with the mountain photo at the bottom fading to black, holding a floating white widget, then a white title and gray description: Automated Investment Guidance (stacked AI Suggestion cards with a toolbar and hand cursor), Visualize Your Risk Exposure (Fear & Greed Index gauge), Discover High-Potential Assets Instantly (ETH, BTC, SOL ticker cards with bar sparklines and a hand cursor).

7. 07
   Bento grid

   "Valuable Features" pill and H2 "Powerful Tools for Smarter Investment Management". Four charcoal cards in a 2x2 (Portfolio Tracking & Rebalancing, Integrated Broker & Exchange Hub, Automated Billing & Tax Reporting, Customizable Reports & Dashboards), each with title, taupe description and a full-width sand "View Details" button pinned to the bottom. A tall card on the right spans both rows: the gradient and mosaic backdrop with a light browser window (Market page, Bitcoin/BTC chart, overlapping Total Portfolio widget at $9,882.38).

8. 08
   Integrations

   Asset-type section: seven circular coin nodes in concentric gray rings scattered across two rows (Dogecoin, Tether, Bitcoin, Ethereum, Euro, a second Ethereum-style diamond, Litecoin), sized differently for depth. Below: "Type of Investment" pill, centered H2 "Invest Smarter, Across Every Asset Type", subhead, and a graphite "View more markets" button with a grid icon.

9. 09
   FAQ

   Split layout. Left: a graphite panel with a grid of randomly lighter squares, a thin sand line chart, a dashed crosshair to a ringed point with a white tooltip "18 Apr 2024 / $73.01", and two white ticker cards (BTC $6,173.181 ▲ 5,87% and DOT $1,156.127 ▲ 5,87%). Right: "FAQ" pill with a question-circle icon, H2 "Frquently Asked Questions" (typo) and five borderless accordion items, the first open.

10. 10
    CTA

    Wide banner card. Left half: gradient and mountain photo with serif "Maximize Insights Grow Wealth", a title-cased paragraph and a graphite "Start Investing Now!" button. Right half: the LUNA-X dark dashboard reused and cropped.

11. 11
    CTA

    Newsletter band in graphite with the mosaic-square texture: serif "Get the update about Cointrix!", subline, a white square email field "What’s your email?", a white "Subscribe" button and an "I agree to the Terms & privacy policy" checkbox with an underlined link.

12. 12
    Footer

    Link columns Investing (7 links), Save + Bonds (stacked), About (6 links); brand column with logo, "Be the first one to know about offers, news, giveaways and events" and four rounded-square social buttons (dot-grid, X, globe, external link). A hairline rule, "© Cointrix Copyrights" left and "2026" right, then a giant "Cointrix" wordmark in near-black gray, cropped by the page bottom.

05Components 25

• Primary button (graphite)

  Fill #2F2E2C, white grotesk 16px, about 4px radius, faint top highlight, trailing outline icon. Used for "Start you Trial", "View more markets" and "Start Investing Now!".

• Secondary button (white)

  White to #F6F6F6 fill, ink text, about 4px radius, soft shadow and light border. "Sign In" and "Talk to sales" (with chat-bubble icon).

• Sand block button

  Full-width #DAC9BF fill, ink text "View Details" with a thin arrow, about 2px radius, about 44px tall. Pinned to the bottom of each bento card.

• Black pill button in widget

  "View More →" in a black rectangle inside the AI Suggestion toolbar, next to sparkle and list icon buttons separated by hairlines.

• Mono eyebrow pill

  Fully rounded pill with a 1px #202221 outline on black, a leading outline icon in sand (sparkle, file-search, branch, question-circle, check) and sand-tinted mono text about 14px.

• Hero eyebrow chip

  Square-cornered translucent gray box (about #9F9B98) with uppercase condensed mono in white.

• Icon tiles

  Trio above the statement: two 56px charcoal squares with white glyphs flanking an 80px sand square with a black dollar-circle icon, about 6px radius.

• Inline headline icons

  Small sand or white glyphs (sparkle, chart-node, dollar-circle) placed between words of the serif statement.

• Stat block

  Outline icon, light serif numeral and mono caption, centered, separated by vertical hairlines that fade out at both ends.

• Photo feature card

  Sharp-cornered card: sand-to-gray gradient with pixel-mosaic squares, misty mountain photo in the lower half darkening to black, floating white UI widget on top, white title and gray description at the bottom.

• Dark feature card

  Charcoal #1E1C1D, about 2px radius, no border, two-line grotesk title, taupe description, sand button at the bottom.

• AI Suggestion card

  White card in front of two offset white cards (stacked deck). Pale-green pill "AI Suggestion" with list icon, bold one-line suggestion, gray detail line, floating toolbar.

• Gauge widget

  "Fear & Greed Index" card with an AI badge in pale blue, expand and more icons, a four-segment grayscale ring gauge with a dashed pale-blue inner ring, a triangle pointer knob, center value "25 / Extreme Greed", white callout labels around the ring and a 2x2 dot legend.

• Ticker card

  White, sharp-cornered: gray round coin badge, slate-blue symbol, black price, green ▲ and %, light-gray vertical bar sparkline at the right edge. Staggered horizontally in a stack.

• Chart tooltip

  White square box with gray date and black price, linked by dashed horizontal and vertical crosshairs to a ringed data point.

• Accordion

  No dividers or boxes. Bone-white question at about 18px, thin chevron at the far right (up when open), taupe answer paragraph below.

• Dashboard sidebar

  In the dark app mockup: active item in a pill with a filled compass icon; others are gray outline icons plus labels.

• Segmented control

  Swap / Buy / Sell tabs in the swap widget, the active one filled lighter gray with rounded corners.

• Dropdown chips

  Token selectors "Ethereum" and "LUNA-X" and "Daily" filter, dark rounded chips with chevrons; time-range pills (YTD active in black, 1 Day to 5 Year in pale blue) in the light dashboard.

• Status pills

  "Market Online" outlined pill with green broadcast icon, "AI" pale-blue badge, "AI Suggestion" pale-green pill.

• Email input and subscribe

  White square input with placeholder "What’s your email?" and a separate white square "Subscribe" button; rounded white checkbox and underlined policy link below.

• Social icon buttons

  48px rounded-square (about 12px radius) dark tiles with a hairline border and white glyphs.

• Coin node

  Three concentric circles stepping from #1E1D1D to #3A3936 with a white currency glyph in the innermost gray disc.

• Browser frame

  Light Chrome-style window: traffic-light dots, a "Cointrix" tab, back, forward, reload and home icons, URL "domain.com/subdomain/".

• Footer link columns

  Bold white column headings, silver links at about 16px with roughly 20px gaps.

06Graphics 10/14

• Dashboard / product UI

  Yes, extensively. A dark translucent trading app in the hero (token page, line chart, MetaMask swap widget) that is reused in the CTA banner; a light browser-framed dashboard in the bento (Market, Bitcoin chart, Total Portfolio widget); and floating widgets on the feature cards (AI Suggestion, Fear & Greed Index, ETH/BTC/SOL tickers).

• Charts & data viz

  Thin single-stroke line charts with dashed horizontal gridlines (gray on dark in the hero, gray on white in the bento, sand on the FAQ mosaic panel), each with a dashed crosshair, ringed point and white tooltip. A four-segment grayscale ring gauge with a dashed inner ring (Fear & Greed). Vertical-bar sparklines in light gray on the ticker cards. Small histogram bars at the edge of the bento dashboard. No color fills or gradients in any chart.

• Photography

  One desaturated landscape: dark hills with drifting fog and mist, used at the bottom of the hero, behind all three AI feature cards and in the CTA banner. Graded warm-gray to match the sand palette.

• Icons

  Outline icons around 1.5px stroke in a Lucide or Tabler style: search, store, bookmark, clipboard, users, bell, filter, trophy, ship, star, question-circle, arrow-right, chevrons, globe, external-link. Filled glyphs for sparkle, check and crypto marks (BTC, ETH, DOGE, USDT, LTC, EUR). White or sand on dark, slate on white.

• Logo cloud

  Gray monochrome logo row: Google, amazon, Adobe, Webflow, GitHub, shopify. Inside mockups: MetaMask (by name), X, crypto coin marks.

• Gradients

  Hero background is a soft diagonal gradient from sand (#D9C8BE, top left) to fog gray (#939496, right). The same gradient sits at the top of every photo card and the bento image card. Mockups and photos are masked with vertical fades into the black page. Stat dividers are hairlines that fade at both ends.

• Texture, grain or pixel

  Pixel mosaic: a square grid with randomly lighter cells, used on the feature-card gradients, the FAQ chart panel and the newsletter band. The fog in the photography adds a soft, grainy haze.

• Grid lines / patterns

  Faint square grid lines with small plus-shaped crosshair marks at the intersections across the hero; dashed gridlines in every chart; concentric rings around each coin node.

• Device or browser frames

  Light browser chrome in the bento (macOS traffic-light dots, a Chrome-style tab labelled Cointrix, a URL bar showing domain.com/subdomain/). The hero dashboard is a frameless app window with a soft edge.

• Cursors / pointers

  Two illustrated hand-pointer cursors (classic white glove with black outline): one clicking "View More" on the AI Suggestion card, one hovering over the BTC ticker card.

Not usedIllustration · 3D renders · Avatars / people · Maps

07Motion

ModerateFrom stills; motion is inferred from cues

• implied
  Logo marquee

  First and last logos fade at the row edges, the usual mask for an infinite horizontal scroll.

• implied
  Hover and click states on widgets

  Hand cursors posed on "View More" and the BTC ticker card suggest hover lift or highlight on the floating cards.

• implied
  Chart crosshair tooltip

  Dashed crosshairs, ringed points and "18 Apr 2024 / $73.01" tooltips, shown mid-hover in three charts.

• implied
  Floating coin orbit

  Scattered coin nodes of different sizes with concentric rings read as gently floating or orbiting elements, likely with parallax.

• implied
  Scroll reveal of the dashboard

  The hero app fades from translucent into black, a common scroll-linked reveal or parallax setup.

• implied
  Stat counters

  75+, 12M+ and 99% are the kind of figures usually animated as count-ups.

• implied
  Accordion expand

  First FAQ item open with an up chevron, the others closed.

• implied
  Stacked card fan

  Three offset AI Suggestion cards suggest cycling or a deck animation.

08Copy

AI-Powered Investing Made Simple With Cointrix

From risk to reward, our AI-powered investment platform gives you complete visibility, adaptive strategies, and predictive control.

Tone

Aspirational fintech with AI buzzwords ("predictive control", "unified intelligence"), mostly in Title Case. Template seams show: "Start you Trial", "Frquently Asked Questions", "My Portofolio", "Trusted by logistics professionals" on an investing site, and comma decimals ("5,87%") next to dot decimals.

09Style

Calm, foggy and expensive: a private-bank mood applied to a crypto trading product, with product UI doing the persuading.

Accessibility

Hero contrast is the main problem: the white light serif and white subhead sit on a mid-gray gradient (about #ACA8A7), roughly 2.4:1, and the nav links are similar. On black, silver body (#B5B7B6) is fine and taupe descriptions (#8D8882 on #1E1C1D) land near 4.7:1. Logos and the footer ghost wordmark are intentionally very low contrast. Mockup labels go down to 10 to 11px and some ghosted mockup text is illegible by design. The Fear & Greed legend distinguishes categories only by shades of gray, and its "25 = Extreme Greed" reading contradicts the scale. Gains use green plus a ▲ arrow, so they are not color-only. No focus states are shown.

10Takeaways