How The CNC Group looks and sounds on the web: the logo, colors, type, building blocks, photos and voice. Where pages on the site disagree, this guide names the version to use and lists the others.
Written from the live site · 10 October 2026
Written in full, with spaces. CNC stands for Chess Not Checkers, the words on the seal.
The line under the name on the homepage and in the footers.
The Chess Not Checkers seal. White on dark, black on white.
Near-black. It covers most of every page.
Sage. The one accent color, used on the action and on small marks.
Uppercase headlines, plain reading text, small spaced-out labels.
Buttons, cards, fields and photos all have square corners. Only photos of people may be round.
Short words, real numbers, nothing promised. "Education, not investment advice." wherever money comes up.
The mark is the Chess Not Checkers seal: a knight inside a double ring, with a dollar sign, a Bitcoin sign and "EST. 2020". It is line art on a see-through background, in white for dark grounds and black for white or light ones. It sits in the top bar of the main CNC pages and is the icon in the browser tab.
986 × 954 px · PNG with a see-through background · 197 KB. Use it for anything shown larger than 96 px: slides, print, video and social posts.
99 × 96 px · PNG with a see-through background · 7.5 KB. The file the top bars and the browser tab use. Use it at 96 px or smaller; it turns soft when stretched.
986 × 954 px · PNG with a see-through background · 160 KB. The same seal in black, for white and light backgrounds: documents, letters, light slides and print on white paper.
99 × 96 px · PNG with a see-through background · 6 KB. The black seal for top bars and small spots on a white or light page. Use it at 96 px or smaller.
The smallest place the seal appears in a top bar is the book page, at 36 px tall. Below that the lettering in the ring cannot be read. The browser tab icon (16 and 32 px) is the only smaller use.
Keep empty space on every side of the seal of at least 40% of its height. That is what the top bars give it today: 16 px of space around a 40 px seal. No text, edge or other mark goes inside the dotted line.
Use the white seal on near-black and the black seal on white or light backgrounds. It is the same drawing in two colors; pick the one that stands out from the ground. The white seal disappears on white, and the black one disappears on near-black.
White and black are the only two colors. Do not recolor or redraw the seal.
The one light use found: the links page ghosts a black tile of the seal at 12%, in grey, in the corner of its white feature card, as a texture rather than a logo.
✓ Near-black groundWhite seal on #0a0a0a or #050505.
✓ White groundBlack seal on white or light, with clear space.
✓ Top bar size40 px tall. Set the height; the width follows.
× White on whiteIt vanishes. Use the black seal.
× StretchedNever squash or pull the seal.
× RecoloredWhite or black only, never sage.
× In a frameNo circle, border or box around it.
× On a busy photoEvery live use sits on plain ground.
× Too smallNot below 36 px tall.
The name is typed, not drawn as an image. Use Oswald 700 in uppercase. Found on the site: the homepage hero stacks "THE CNC / GROUP" in a heavy system font with "CNC" in light grey (#b5b5b5), and the homepage footer says "CNCGROUP" at 10 px.
Most of every page is near-black. White and greys carry the words. Sage marks the action: the main button, pill borders, ticks and line icons. It never fills a section or a large panel.
A guide to the balance, not a measurement.
Three free Google Fonts, loaded with one link. Oswald speaks in headlines, Inter carries the reading, JetBrains Mono labels things.
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
Weight 700 (600 for FAQ questions). Always uppercase. Headings, big numbers, main buttons, the name in the footer.
"Oswald", "Arial Narrow", Impact, sans-serifWeight 400 for reading, 500 to 600 for emphasis. Normal sentence case. Paragraphs, cards, fields.
"Inter", -apple-system, "Segoe UI", system-ui, sans-serifWeight 400 or 500. Always uppercase, spaced out by .16em to .22em. Section labels, kickers, pills, tags, nav links, legal lines, small buttons.
"JetBrains Mono", Consolas, monospaceFor a page with one big message (book), the H1 can go up to clamp(44px, 8vw, 112px) with line 0.92.
Every example below is drawn with the site's own styles and values, so it looks exactly like the live pages. Hover them to see their states.
1px #202020 border on #111 at 85%, 22px padding, square. Line icon in light sage at 1.6 stroke.
A small white (or sage) tab on the top right corner picks out one card in a row.
The one card on a dark page that flips to white, for the choice that matters most. On links, a tile of the seal sits ghosted in its corner at 12%.
An error line in #e08a85, under the field.
SendTerms · Privacy
A #111 box with a #3a3a3a frame over a 78% black overlay. Title in Oswald, one clear button.
SendDisclaimer and the compliance line go here.
Pages are wide, dark and ruled. Sections are separated by one hairline and plenty of space, and nothing has a rounded corner.
Content pages sit in a 1120px column with 22px of padding on each side (join). Pages with one job are narrower: 620px for links, 460px for a short form (request). The homepage runs wider, at 1440px.
Also found: 1180px (book, membership), 1280px (rooms), 980px (research pages), 820px (terms).
Each section has 70px of space above and below (50px on screens under 860px wide) and starts with a 1px #202020 line. Cards sit 12px apart with 20 to 26px of padding inside.
Also found: 14px gaps (rooms) and 16px gaps (homepage rooms block).
Layouts change at 860px (columns stack) and 560px (phones). Join also adjusts at 1000px and 640px. The homepage uses 1100, 900 and 560.
Buttons, cards, fields, windows, tags and photo frames all have square corners. Round (50%) is only for photos of people, play buttons and the thin decorative rings.
Found on the site: rounded pills on the homepage (999px), 4px link cards, a 10px frame on the join AlphaBuilder screenshot, 3px on the report page, and 14 to 16px on the contact page (Armando's personal look). Use square.
House pages lay a faint grid over the ground: 1px white lines at 2.5%, every 72px. This page uses it.
The homepage uses a 90px grid that fades out down the page, a soft glow at the top, thin orbit rings and giant faint words behind the sections.
Hovers take 0.15 seconds and buttons lift 1px. The homepage fades sections up as they scroll in (45px over 900ms) and turns this off for visitors who ask their device for less motion.
The site's photos are real photos of Armando, lit like a studio portrait against black, so they melt into the near-black page.
Live with Armando every Monday. On a phone the portrait shrinks and sits beside the opening lines.
Write for a smart reader who does not work in finance. Say the real thing in ordinary words, then stop.
CNC pages talk about Armando by name ("Live with Armando", "Armando reviews these personally"), use "we" for service and legal ("How can we help?"), and speak to the reader as "you".
Armando's personal pages (armandopantoja.com) speak in the first person: "I" and "my", never "we". Their section headings do not reuse lines from the CNC homepage.
Found on the site: join's "What is The CNC?" block speaks as Armando ("Every Monday I'm live...") inside a page that otherwise talks about him.
Tell the reader what they walk away with, not the name of the subject. Short words, short sentences, concrete nouns. Plain is not childish: a smart person who does not work in finance should read it once and learn something.
A headline names who the reader is and what they get into next. Not information, and short enough to read at a glance. The site's shapes:
Two short sentences with periods · three verbs · a contrast · an identity.
Start with the verb. Put an arrow after the words, and any price note after a middle dot.
A middle dot (·) between items in a row. An arrow (→) after a call to action. No em dashes: use a period, a comma or a colon instead.
Wherever a page or post talks about money, investing or results, it carries this line:
Pages that sell membership also keep the full disclaimer in the footer, as join and apply do. Every number shown says where it comes from, and past results are never presented as a promise of future ones.
Found on the site, to be brought in line: "Nothing here promises returns and nothing here is financial advice" (rooms, homepage rooms block) · "Nothing here is investment advice." (links) · "For education only, not investment advice" (member pages) · "Education, not advice" (terms heading).
Compute, data and energy: the thesis behind the research. It belongs in research, reports and member material. It never goes in headlines, ads or anything meant to win a new reader; those speak to identity and access.
When it is drawn as a triangle, Compute is at the top, Data at the bottom left and Energy at the bottom right. Written as a line: "Compute. Data. Energy."
| Instead of | Write |
|---|---|
| crypto | digital assets |
| CNCGROUP, The CNCGroup | The CNC Group |
| Future Wealth Summit | Future Wealth, or The Future Wealth Conference |
| TallGuyTycoon as a name | Armando Pantoja (the handle stays a social address) |
| SELL as a call or rating | Leave it out |
| Names of AI models or internal tools | Say what it does |
| Guaranteed returns, sure things | Nothing promised |
| Insider jargon in a headline | The benefit, in ordinary words |
If this page does not answer it, ask before you publish. Say which page or file you are working on.