--- version: alpha name: "navid.me design system" description: "The complete design language for navid.me: logos, photos, bios, colors, gradients, type, spacing, surfaces, icons and motion." colors: brand-blue: "#0B81F7" brand-indigo: "#6361EA" brand-cyan: "#02CFFF" brand-teal: "#00C6C9" brand-orange: "#FF583C" brand-amber: "#F59E0B" brand-gold: "#F9F871" brand-red: "#F90B2C" brand-dim: "#C0BFC7" bg-primary-dark: "#000000" bg-primary-light: "#F4F5F7" bg-section-dark: "#051823" bg-section-light: "#EBEDF0" text-primary-dark: "#E8E8EC" text-primary-light: "#1A1A2E" text-secondary-dark: "#B0B0BC" text-secondary-light: "#5A5A72" glass-bg-dark: "rgba(255, 255, 255, 0.06)" glass-bg-light: "rgba(255, 255, 255, 0.65)" glass-bg-hover-dark: "rgba(255, 255, 255, 0.1)" glass-bg-hover-light: "rgba(255, 255, 255, 0.8)" glass-border-dark: "rgba(255, 255, 255, 0.08)" glass-border-light: "rgba(0, 0, 0, 0.06)" glass-border-hover-dark: "rgba(255, 255, 255, 0.15)" glass-border-hover-light: "rgba(0, 0, 0, 0.12)" input-border-dark: "rgba(255, 255, 255, 0.15)" input-border-light: "rgba(0, 0, 0, 0.12)" nav-bg-scrolled-dark: "rgba(0, 0, 0, 0.85)" nav-bg-scrolled-light: "rgba(255, 255, 255, 0.85)" status-live-dark: "#6EA8DC" status-live-light: "#2A6099" status-live-bg-dark: "#143A4E" status-live-bg-light: "#E3EEF7" status-done-dark: "#6DB58E" status-done-light: "#2C7049" status-done-bg-dark: "#22402F" status-done-bg-light: "#E4F0E8" status-waiting-dark: "#D9985F" status-waiting-light: "#A4501C" status-waiting-bg-dark: "#4E3524" status-waiting-bg-light: "#FAEBDD" status-review-dark: "#9D9AE8" status-review-light: "#4F4AB8" status-review-bg-dark: "#2F2C4E" status-review-bg-light: "#ECEBFA" status-broken-dark: "#E38678" status-broken-light: "#B03A2C" status-broken-bg-dark: "#4E2C29" status-broken-bg-light: "#FBE8E5" status-rest-bg-dark: "#16181D" status-rest-bg-light: "#FFFFFF" typography: display-1: fontFamily: "Inter, sans-serif" fontSize: "clamp(34, 20px + 3.5vw, 56)" fontWeight: 700 letterSpacing: "-0.025em" display-2: fontFamily: "Inter, sans-serif" fontSize: "42" fontWeight: 700 hub-title: fontFamily: "Inter, sans-serif" fontSize: "32" fontWeight: 700 card-title: fontFamily: "Inter, sans-serif" fontSize: "20" fontWeight: 700 card-title-sm: fontFamily: "Inter, sans-serif" fontSize: "16" fontWeight: 700 body: fontFamily: "Inter, sans-serif" fontSize: "18 / 29" fontWeight: 400 label: fontFamily: "Inter, sans-serif" fontSize: "14" fontWeight: 500 mono: fontFamily: "Inter, sans-serif" fontSize: "13" mono-sm: fontFamily: "Inter, sans-serif" fontSize: "11" rounded: medium: "6px" large: "8px" extra-large: "12px" 2x-large: "16px" full: "9999px" spacing: max-w-6xl: "1152px" px-6-sm-px-8-lg-px-6: "24 / 32 / 24px" pt-20: "80px" pb-8: "32px" mt-14: "56px" mb-12: "48px" gap-5: "20px" mb-4: "16px" scroll-mt-24: "96px" components: status-chip-live: backgroundColor: "{colors.status-live-bg-dark}" textColor: "{colors.status-live-dark}" rounded: "999px" height: 24px padding: "0 10px" fontSize: 12px status-chip-done: backgroundColor: "{colors.status-done-bg-dark}" textColor: "{colors.status-done-dark}" rounded: "999px" height: 24px padding: "0 10px" fontSize: 12px status-chip-waiting: backgroundColor: "{colors.status-waiting-bg-dark}" textColor: "{colors.status-waiting-dark}" rounded: "999px" height: 24px padding: "0 10px" fontSize: 12px status-chip-review: backgroundColor: "{colors.status-review-bg-dark}" textColor: "{colors.status-review-dark}" rounded: "999px" height: 24px padding: "0 10px" fontSize: 12px status-chip-broken: backgroundColor: "{colors.status-broken-bg-dark}" textColor: "{colors.status-broken-dark}" rounded: "999px" height: 24px padding: "0 10px" fontSize: 12px status-beat: width: 8px height: 16px rounded: "4px" status-bar: height: 6px rounded: "999px" trackColor: "{colors.glass-bg-hover-dark}" card: backgroundColor: "{colors.glass-bg-dark}" borderColor: "{colors.glass-border-dark}" --- # Navid Moazzez brand & design system The complete design language for navid.me: logos, photos, bios, colors, gradients, type, spacing, surfaces, icons and motion. Use them for press, podcasts, partner materials, or for building anything that should feel like this site. Also published as design.md for agents and LLMs. Source: https://navid.me/brand. This file is generated from that page on every request. ## 01. Foundations (Overview) **The design system behind navid.me** navid.me is where Navid Moazzez teaches creators and founders to master AI and build their own AI Operating System (AI OS). Every page on the site, from the home page to the articles and this one, is built from the one design system documented here. - Navid's avatar sits in the mark and on every official account and site, so people see the same face wherever they meet him. It stands for Navid and is never used as decoration. · The avatar is the one motif, and it always means Navid. - Light mode has its own card backgrounds, borders and shadows instead of the dark values flipped, so a page reads as intended in whichever theme a visitor chooses. · The site is built dark first, and light mode is designed rather than inverted. - A card is a translucent panel with a hairline border and a soft shadow. Color is never used to fake elevation, so the accents stay free to mean something. · Surfaces are glass on black, separated by light instead of color. - Copy uses full sentences, digits instead of spelled-out numbers and American English, and it never uses em dashes. A number or a name always beats an adjective. · Every word is written to be understood on the first read. - Core pages are standalone pages, each built around one topic, such as the home page, the About page and the Speaking page. · Core pages · navid.me · /about-navid · /speaking · /now - Hubs have a left rail of sections, a search bar with filters and an FAQ at the end, so a long list stays easy to scan. · Hubs · /favorites · /creator-tools · /docs · /brand - Articles use a reading column with 18px body text, 16px on phones, and set quotes in the site's highlight card, because they are written to be read from top to bottom. · Articles · /articles Principles 4 rules Surface One set of tokens in src/app/globals.css styles every page on navid.me. Words come from the CMS in HQ and images from R2 on cdn.navid.me, so the layout changes with the page type while the vocabulary stays the same. Surfaces Where the system applies ## 02. Logo **The navid.me mark** The navid.me mark is the full logo, the round avatar with the navid m wordmark and its blue dot over the i, in light, dark and monochrome versions, plus the favicon. Use the supplied files as they are, without retyping the name, swapping the avatar or adding effects. The logos are published as SVG, PNG, WebP and JPG on cdn.navid.me, and the monochrome logos as SVG. The icon and the favicon are 512px squares, and the favicon is also published at 180px and 32px. - 16px · favicon - 20px · nav on phones - 28px · nav from 640px up - 44px · the demos on this page - dark · The wordmark on dark backgrounds. This is what the nav uses in dark mode. · Logo, light - light · The wordmark on light backgrounds. The nav swaps to this in light mode. · Logo, dark - dark · Grayscale version for dark backgrounds. Use for co-branding, watermarks, or anywhere the full-color logo would compete with surrounding content. · Monochrome logo, light - light · Grayscale version for light backgrounds. For print, documents, and light-colored surfaces. · Monochrome logo, dark - dark · 512px square, for the browser tab. 180 and 32 also published. · Favicon - light · Grayscale favicon, 512px square. For one-color print and co-branding. · Monochrome favicon Keep clear space on every side of the logo, and scale it as one piece. Below 20px, use the favicon on its own. dark Favicon Size ramp Clear space and sizing light The avatar and the navid m wordmark are one fixed logo file. Never rebuild it by retyping the name next to a photo, and never change the gap between them. Use the light file on dark backgrounds and the dark file on light backgrounds. Primary marks Usage Use the official logo Construction Download 5 files Do and don't PNG Source and downloads ## 03. Typography **One typeface, and a mono stack for values** Inter sets every heading, paragraph, label, button and quote on navid.me, so hierarchy comes from size and weight rather than a second typeface. The system mono stack shows tokens, hex values and class names. Georgia appears in one place only, for pull quotes inside long-form articles. - display-1 · clamp(34, 20px + 3.5vw, 56) · 700 · -0.025em · Headline - display-2 · 42 · 700 · Section heading - hub-title · 32 · 700 · Hub section title - card-title · 20 · 700 · Card title - card-title-sm · 16 · 700 · Hub card title - body · 18 / 29 · 400 · Body text runs at 18px on every page. - label · 14 · 500 · Buttons and filters - mono · 13 · ui-monospace · --text-primary · #E8E8EC - mono-sm · 11 · ui-monospace · --glass-border · rgba(255,255,255,0.08) - Set headings in sentence case at 700 with tight tracking, so the size and weight carry the hierarchy. · heading · Automate your business & life with AI - Never set a heading, pill or button in capitals. Uppercase is not part of the navid.me brand. · caps · Automate your business & life with AI - Use mono for tokens, hex values and class names, so a value someone might copy reads as a value. · mono · --glass-border · rgba(255,255,255,0.08) - Never use em dashes in copy. Split the thought into two sentences or use a comma instead. · heading · Automate your business — and your life — with AI ### Text size Text steps up once there is room for longer lines. Both sizes are set in the site's global styles. | Where | Size | |---|---| | Body | 16px on phones, 18px from 768px | | Articles | 18px, and 16px at 640px and below | - I help creators and founders master AI and build their own AI Operating System (AI OS) to grow a profitable online business and design a life of freedom. · navid.me · Home page hero · light · Automate your business & life with AI · Page - Navid Moazzez is a leading AI business strategist, the founder of AI OS Lab, and the host of the AI Creator Summit, watched by 100,000+ creators. · /brand#media-kit · Media kit · dark · Navid Moazzez · Section - Every heading on navid.me, from the home page headline to the card titles, is Inter at 700 with tight tracking. There is no separate display font, so size and weight carry the hierarchy. · Inter · Display · Automate your business & life with AI · 700 Bold - Inter at 400 carries paragraphs and card copy, and 500 and 600 carry labels, navigation and buttons. · Inter · Body · I help creators and founders master AI and build their own AI Operating System (AI OS). · 400 · 500 · 600 - The system mono stack, with no web font loaded, shows tokens, hex values and class names, so a value someone might copy reads as a value. · ui-monospace · Mono · --glass-border rgba(255, 255, 255, 0.08) · 400 Use the role, not the size. Every size below was measured on the live navid.me pages at desktop width. Type ramp Type do & don't roles Display and body are the same Inter. Headings are set larger, bolder and tighter, and nothing on the site uses a second typeface. Pairing in practice Rules Families Role Spec Specimen Light and dark 3 stacks Sample ## 04. Color (Colors) **A dark-first palette with color only where it means something** navid.me is near-black with light gray text, and color appears only where it carries meaning. Blue and purple carry the brand, green marks a real success state, and red marks a Don't. Components reference the token rather than the hex value, so both themes follow automatically. Click any swatch to copy its value. - Page background · --bg-primary · #000000 - Banded sections · --bg-section · #051823 - Headings, emphasis · --text-primary · #E8E8EC - Body, captions, muted labels · --text-secondary · #B0B0BC - Card and panel surface · --glass-bg · rgba(255,255,255,0.06) - Surface on hover · --glass-bg-hover · rgba(255,255,255,0.10) - Hairline border · --glass-border · rgba(255,255,255,0.08) - Border on hover · --glass-border-hover · rgba(255,255,255,0.15) - Popovers and the filter popup · --app-popup-bg · #16181d - Popup row hover · --app-popup-hover · rgba(255,255,255,0.06) - Nav and icon-tile background · --app-nav-hover · rgba(255,255,255,0.05) - Nav once the page scrolls · --nav-bg-scrolled · rgba(0,0,0,0.85) - Live, verified, success, the Do column · Green · #22BAA0 - The Don't column · Red · #C75050 - Brand gradient, buttons, gradient text · Blue · #0B81F7 - CTA gradient, gradient text · Purple · #6361EA Core - Token - Dark - Light - Used for Every core token has a dark value and a light value in src/app/globals.css. Light mode uses its own values rather than inverting the dark ones. - Page background · #000000 · #F4F5F7 · --bg-primary - Banded sections · #051823 · #EBEDF0 · --bg-section - Headings and body text · #E8E8EC · #1A1A2E · --text-primary - Intros, captions and muted labels · #B0B0BC · #5A5A72 · --text-secondary - Card and panel surface · rgba(255,255,255,0.06) · rgba(255,255,255,0.65) · --glass-bg - Surface on hover · rgba(255,255,255,0.10) · rgba(255,255,255,0.80) · --glass-bg-hover - Hairline borders · rgba(255,255,255,0.08) · rgba(0,0,0,0.06) · --glass-border - Borders on hover · rgba(255,255,255,0.15) · rgba(0,0,0,0.12) · --glass-border-hover - Input borders · rgba(255,255,255,0.15) · rgba(0,0,0,0.12) · --input-border - Nav background once the page scrolls · rgba(0,0,0,0.85) · rgba(255,255,255,0.85) · --nav-bg-scrolled Glass Light and dark Accents App chrome ## 05. Spacing & layout (Layout, Responsive Behavior) **A 4px scale, set in steps** Every space on navid.me is a step on Tailwind's 4px scale, written as a class. Spacing changes at breakpoints instead of growing with the screen, because the only fluid values on the site are font sizes. Every class and count below was measured in the site's code on Sept 21, 2026. - Class - Value - Visual - Used for ### Known gaps Where the code does not follow the scale yet. These are the numbers to bring down. | Gap | Measured | What it means | |---|---|---| | No spacing tokens | 0 `--space-*` variables | Spacing lives only in Tailwind classes, so no single value can be changed across the site. | | Inline style spacing | 1,066 values | Padding, margin and gap are set in style objects instead of classes. The most common are 0, 6, 8 and 2px. | | Arbitrary values | 48 classes | Values between steps, like `mt-[11px]` and `py-[7px]`. | | Half steps | 802 uses | The 2, 6, 10 and 14px steps sit off the 4px grid. `gap-1.5` alone appears 164 times. | | Near-identical widths | 1100, 1150 and 1152px | 3 section widths within 52px of each other do the same job on different pages. | | Section padding | `py-20` on 29, `py-16` on 10 | There are 2 standard paddings, and 22 of the 172 sections set none on the section itself. | | Grid gaps | 4 gaps on 3 columns | `gap-3`, `gap-4`, `gap-5` and `gap-6` all space 3-column grids. | There is no --space-* token set. Spacing comes from Tailwind's utility classes, so the values above are the classes to use. - The content column, centered on every section · max-w-6xl · 1152px - Page gutter on phones, tablets and desktops · px-6 sm:px-8 lg:px-6 · 24 / 32 / 24px - Space above each section · pt-20 · 80px - Space below each section · pb-8 · 32px - Space between blocks inside a section · mt-14 · 56px - Section intro to its first block · mb-12 · 48px - Gap between cards in a grid · gap-5 · 20px - Section heading to its intro · mb-4 · 16px - Offset so an anchored heading clears the nav · scroll-mt-24 · 96px ### Grids and cards The gap each card grid uses at its widest, counted in the code, and the padding inside the glass card. There is no single rule yet: 3-column grids use 4 different gaps, and `gap-6` is the most common. | Grid | Gap | Uses | |---|---|---| | 3 columns | `gap-6` · 24px | 12 | | 3 columns | `gap-5` · 20px | 5 | | 3 columns | `gap-3` · 12px | 5 | | 3 columns | `gap-4` · 16px | 4 | | 2 columns | `gap-3` · 12px | 5 | | 4 columns | `gap-5` · 20px | 3 | | Custom column layouts, like text beside an image | `gap-8` to `gap-12` · 32 to 48px | 31 | | Glass card padding | `p-5` or `p-6` · 20 or 24px | 6 each | 4px base · 17 steps - Class - Size - Drawn - Uses - Used for - mt-0.5 · A small caption or hint line under a title - gap-1 · An icon beside a text link, or inside a small badge - gap-1.5 · An icon beside its label, the most common inline gap - gap-2 · Items in a row, like buttons, icons and chips - gap-2.5 · Menu and filter rows, where py-2.5 pads each row - gap-3 · The most used step, for rows of cards, buttons and list items - px-3.5 · Side padding in dropdown menu and filter items - px-4 · Side padding in buttons, pills and table cells - px-5 · Padding in callout boxes, lists and panels - px-6 · The page gutter, and the padding inside glass cards - px-7 · Padding inside drawers from 640px - px-8 · The page gutter on tablets, and the space under section headings - mb-10 · The space between a section heading and its content - pb-12 · The bottom of a section - pb-14 · The bottom of a page hero - pb-16 · The top and bottom of a shorter section - py-20 · The top and bottom of a standard section Tailwind's steps from 2px to 80px, each drawn at its real size. Uses counts every padding, margin and gap class on that step across the site. Steps used fewer than 40 times are left out, and the largest of those set the top padding of page heroes. Click a class to copy it. rules 2 patterns The 2 ways a section opens on navid.me, drawn at real size. Each tinted band is a gap, labeled with the class that sets it. One or two sentences introduce what the section covers. A section heading - Landing sections · center · Home and About - Long-form sections · left · AI, Now and How I use AI 11 widths in use - max-w-[1240px] · The floating nav, and wide rows on Home and About - max-w-[1200px] · Hub page heroes and Creator tools - max-w-6xl · Listing pages like Articles, Favorites and Speaking - max-w-[1150px] · Now, How I use AI, Contact and Verification - max-w-[1100px] · Most page sections - max-w-5xl · Contact, Legal and Verification content - max-w-3xl · Reading text on Now, Legal and Timeline - max-w-[760px] · Hub page intros and the help center - maxWidth: 720 · The article column - max-w-[700px] · Centered intros on FAQ, Newsletter and Reviews - max-w-xl · Short intros under a section heading Every width a section is centered in, widest first and drawn to scale. The count is how many centered containers in the code use it. Most sections sit in 1100px, and text is kept narrower so lines stay easy to read. ### Breakpoints The widths where navid.me's layout changes, with how often each Tailwind prefix appears in the code. Pages are built phones first, and the full layout arrives at 1024px. | Width | What changes | |---|---| | `640px` · sm · 683 uses | The page gutter widens from 24 to 32px, page heroes get more top padding, and the floating nav grows from 52 to 58px. | | `768px` · md · 88 uses | Body text goes from 16 to 18px, the footer links open from a collapsed list into 2 columns, and the newsletter bar sits side by side. | | `1024px` · lg · 362 uses | The floating nav shows its full menu, the page gutter goes back to 24px, and articles with a table of contents gain a 260px side column. | | `1100px` · hub pages | The hub sidebar appears, and its collapse button replaces the drawer button in the top bar. | | `1280px` · xl · 18 uses | Hub article pages add the table of contents column, some card grids reach 4 columns, and the footer links spread into 1 row. | ## 06. Border radius (Shapes) **Five corners, and each one tells you what you are looking at** The corner tells you what kind of element you are looking at. Every value below was measured on the live navid.me pages. A few components still use one-off values such as rounded-[10px]. New work should pick a step from the ladder above. - Medium is 6px, used for the avatars inside testimonial cards, the icon buttons in the nav and menu items. · Medium · rounded-md - Large is 8px, the corner of every testimonial card, product card, input and button. · Large · rounded-lg - Extra large is 12px, used for the photo tiles on the home page and for forms. · Extra large · rounded-xl - 2x large is 16px, used for the stat cards on the home page, such as 12+ years of experience. · 2x large · rounded-2xl - Full is fully round, used for pill badges, tags, filter buttons and avatars. · Full · rounded-full ## 07. Elevation & depth (Elevation & Depth) **Depth is light, not color** Surfaces separate by blur and shadow, never by a brighter color, so the accents stay free to mean something. Every layer below is in use today, from the lowest to the highest. ### Shadows In dark mode most cards rest with no shadow at all and lift on hover. Light mode adds a faint resting shadow so white cards do not melt into the page. | Layer | Shadow | Used by | |---|---|---| | Resting card, light | `0 1px 3px rgba(16,24,40,.05)` | Testimonial, FAQ and thank-you cards | | Card on hover | `0 6px 20px rgba(16,24,40,.08)` light, `0 10px 30px rgba(0,0,0,.45)` dark | Testimonial, FAQ and quote cards | | Glass stat card | `0 8px 32px rgba(0,0,0,.2)` with 20px blur | Stat cards | | Liquid glass card | Inset highlights and `0 8px 26px rgba(0,0,0,.3)`, 18px blur | Liquid glass cards | | Popup | `0 8px 24px rgba(0,0,0,.25)`, nav menus `0 10px 30px rgba(0,0,0,.45)` | Filters, menus and dropdowns | | Drawer | `0 0 80px rgba(0,0,0,.3)` with 40px blur | Tool, book and skill drawers | | Search window | `0 32px 120px rgba(0,0,0,.6)` | Hub search | ### Blur Blur is what makes a surface read as glass. These are the values that repeat. | Blur | Where | |---|---| | `12px` | Glass cards and the newsletter bar | | `15px` | The floating nav and hub top bar at rest | | `40px` | Drawers | | `72px` | The floating nav once you scroll | ### Layers The stacking order, from the page up. A new layer takes its place in this list rather than a number of its own. | Layer | z-index | |---|---| | Page sections and footer | `1` | | Menus and dropdowns | `50` | | Hub top bar | `60` | | Modals | `400` to `700` | | Mobile menu | `9997` to `9998` | | Floating nav | `9999` | | Drawers | `10000` to `10001` | | Tooltips | `10100` | | Quick search | `10200` | ## 08. Iconography **Functional, not decorative** Icons come from lucide-react 1.x, one library, stroked the same way everywhere. They label an action, a section or a state, and they answer a hover with the same small pop the sidebar uses. The one exception is a platform, which gets its real logo. - stroke · Stroke only, in currentColor, with rounded caps and joins. One icon then works in both themes. - filled · No filled glyphs in the interface. A solid shape outweighs the label beside it and breaks the outline set. - platform · A platform gets its real logo through PlatformIcon. It is the one filled mark allowed, because it is a logo, not an icon. - emoji · No emoji as an interface icon. Emoji is a different visual language, and here it only opens a pill. - hover · Let the icon pop when its row or card is hovered. Hover this card to see it. - loop · No looping or spinning icons. The only icon that turns is LoaderCircle, while something loads. - grey · A hovered row gets the grey plate from cs-hover-surface. The text and the icon keep their color. - blue · Never turn an icon or its row blue on hover. Blue is for links in body copy, not for navigation. - 12px · inline - 14px · compact - 16px · UI default - 20px · feature Icon grid - Surface - Hover it - Spec Icons move on hover in 6 ways, one per surface. Hover the icon in each row. In the sidebar the icon stays grey in every state, inactive, hovered and active; only the row around it changes, and on hover the icon pops. - Sidebar, prompt cards, favorites · cs-rail-icon · 1 → 1.16 → 1.1 · lift 1.5px · 260ms - Top nav menu rows · scale 1.1 · 200ms ease-out - Stat cards · scale 1.1 · rotate 6° · 300ms ease-out - Landing page features · spring · scale 1.1 · rotate -3° · 500 / 15 - Arrows in links and buttons · 2px right · 200ms - Outbound links · 2px right, 2px up · 200ms Do & don't Every size keeps Lucide's 2px stroke on the 24 viewBox, so the line scales with the icon: 1px at 12px, 1.33px at 16px, 1.67px at 20px. One path, never redrawn per size. Lucide · 24px · 2px stroke - Sidebar row - Card - Guides - Prompts - Newsletter - Hover anywhere on this card Hover Sizing Rules 6 styles 4 steps ## 09. Imagery & motifs **How a photo is handled** Every image on the site is cropped, cornered and hovered the same way, so a photo never arrives looking like it came from somewhere else. - Photos fill their box. A portrait in a square box anchors to the top so the head is never cut. · Crop · object-cover - The same radius as every card. · Corner · rounded-lg - 4:5 in a photo grid, 1:1 for a cover or an avatar. · Ratio · 4 / 5 · 1 / 1 - The image zooms inside its box; the box itself does not move. · Hover · scale 1.10 over 700ms - A brand-blue glow fades in over the image on hover. · Bloom · inset 0 0 90px -20px - A soft white diagonal crosses the image once on hover. · Shine · 900ms sweep Each background is named by its source under the preview. The PNG is painted from the same values as the preview. The graphic generator puts together on-brand artwork from the backgrounds the sites really use. Every option below is one of them, copied from its source, never drawn fresh. Pick one, pick a size, and download the PNG. Graphic generator - Facebook and link preview - X post - YouTube thumbnail - LinkedIn post and carousel - Instagram post and carousel - Stories, Reels, Shorts, TikTok - Pinterest pin - Pinterest long pin - Slide 16:9 - A4 print - Square Top light Stardust Glow size Spread Strength Off 15 real backgrounds - Blue to teal (default) - Teal to blue - Blue to indigo - Violet - Ember - Cyan - Mono Stardust Size - Corners - Edge glow - Spotlight - Cosmic - Center - Minimal - Cosmic - Resources - FAQ - Thank you - 404 - Agenda - Summit page - CTA box - Summit banner - Cosmic, top light - Violet - Ember - Deep blue - Teal - Mono Parameters Palette Download PNG Template Randomize Background ## 10. Media kit **Bio and social accounts** Copy the bio as written for an introduction, a speaker listing or a guest post, and link to the official accounts below. Navid Moazzez is a leading AI business strategist, the founder of AI OS Lab, and the host of the AI Creator Summit, watched by 100,000+ creators. He helps creators and founders master AI and build their own AI Operating System (AI OS) to automate their business and life. Copy Long bio Quick facts Bio Copied Official account Social accounts Topics See every verified account ## 11. Tone of voice **How Navid writes** Navid writes in first person, with real numbers, and warmly, the way he would explain something to a friend who runs a business. The examples below come from his 2026 emails and videos. - Em dashes. Navid does not use them. - Opening with "Most people...", which is a drafting-tool hook and not how he writes. - The "X isn't Y, it's Z" construction. - AI filler words such as align, effortless, optimize, breakthrough, delve and leverage. - Spelled-out numbers. Write 30 seconds, never thirty seconds. - British spellings, because navid.me is written in American English. No - Posts and videos are written in Navid's own voice, as I and me, and he speaks to the reader directly. · First person · In this session, I will give you a complete overview of the best AI tools for creators. - He writes the exact figure, such as 500+ tools or 20 hours a week, never a vague claim. · Real numbers · I tested 500+ AI tools, these are the 30+ best AI tools for creators. - Emails switch to you, open with Hey and a first name, and end with a P.S. Exclamation marks and a friendly ellipsis are part of how he sounds. · Warm and personal · P.S. While you're emailing me back, feel free to let me know what your #1 question or challenge is when it comes to using AI in your creator business. - Paragraphs are 1 or 2 sentences long. Hub pages follow the same plain structure Brian Dean uses on Backlinko: what it is, why it matters, then best practices. · Clear structure - The AI writing system that saves me 20 hours every week. · A revolutionary AI-powered writing workflow that dramatically boosts your productivity. - Can you do me a small favor: Will you hit 'reply' to this email and just let me know if you got it? · I hope this email finds you well. Please confirm receipt of your order at your earliest convenience. - I tested 500+ AI tools, these are the 30+ best AI tools for creators. · I reviewed a large number of AI tools and picked the very best ones for you. After What to avoid Before Rules Four pillars In practice First person · Real numbers · Warm · Clear Rewrites ## 12. Motion **Purposeful, never for show** Motion says something is live, or that something responded. Sections and cards fade up once as they arrive, one after another. Live things pulse. Rows and buttons answer in 150 to 200ms, card surfaces in 300ms. Nothing bounces, tilts or lifts. loops · always on purpose These loop. Each one means something is running, verified, or worth a second look. - Breathe · 1.6s ease-in-out · the icon fades to 40% and back · live chips · Live - Sheen · 1.8s linear · a light runs along the fill · live progress - Verified shimmer · 3.4s ease-in-out · a glint sweeps the badge, then rests · Navid Moazzez - Sparkle line · 1.6s linear · a line runs around the button's edge · Get started - Lightbulb · 2.5s ease-in-out · glow, filament and rays pulse · thank-you pages - Spinner · 1s linear · the one loop reduced motion keeps Live and ambient website · 3 easings · 5 durations - Token - Value - Where Website motion = keyframe classes. `.cs-vbadge-sweep` (3.4s, verified badges), `.btn-sparkle` (1.6s, sparkle buttons), `.animate-marquee` (60s) and `.animate-marquee-slow` (100s, 60s on phones, pauses on hover), `lightbulbPulse` (2.5s, thank-you pages), `gradientShift` (12s and 15s, hero glow), `drift` (stardust), `terminalBorderSpin` (4s, terminal cards), `.cs-rail-icon-pop` (260ms, rail icons), `.animate-fade-in-up` (400ms). All honor `prefers-reduced-motion`. Page-wide: the top bar creeps toward 90% while a page loads and finishes when it arrives (180ms ease-out), a second bar follows the scroll, and the scrollbar shows only while you scroll. - Card light, FAQ rows, theme swap · --ease-standard · ease - Every Tailwind transition-* class · --ease-tailwind · cubic-bezier(0.4, 0, 0.2, 1) - Tailwind ease-out · --ease-out · cubic-bezier(0, 0, 0.2, 1) - Tailwind's default: color shifts, button hover · --dur-micro · 150ms - duration-200: rows, links, icons · --dur-hover · 200ms - FAQ rows · --dur-short · 250ms - Card light, theme swap, image zoom · --dur-surface · 300ms - Card shadow, status bar fill · --dur-panel · 400ms - How far an entrance travels · --rise · 20px - The gap between items in a grid · --stagger · 60ms The website's motion values, measured from every `globals.css` and the Tailwind classes the sites use, and kept in section 5 of `tokens.css`, synced into every site as `src/styles/core-tokens.css`. The sites still type most values where they're used; these tokens record them. The apps ship no `--ease` or `--dur` tokens: their motion lives in App Kit's named `@keyframes` instead (see below). Easings and durations packages/nm-tokens/tokens.css · 5. Motion Product motion = App Kit keyframes, kept for states that need attention: `ak-ai-dot-pulse` (1.05s, AI thinking), `ak-ai-typing-dots` (1.4s, AI typing), `ak-ai-skeleton-shimmer` (1.4s, loading), `ak-ai-progress-slide` (1.1s, progress), `connectors-activity-ring` (1.8s) and `connectors-activity-dot` (0.9s, a connector running), `usage-card-blink` (1.8s) and `usage-card-spin` (12s, the usage card), `token-burn-scan` (2.8s, the token meter). All honor `prefers-reduced-motion`. always respected - Line - What it does Some people get dizzy or sick from movement on screen, so their device asks for less. When it does, every animation on every site finishes at once and a hover becomes a quick fade. A spinner keeps turning, because it says the page is still working. Reduced motion - @media (prefers-reduced-motion: reduce) · Applies only when the visitor turned on Reduce motion in their device settings. - animation-duration: 0.01ms · Every animation finishes at once, so things appear already in place. - animation-iteration-count: 1 · Loops stop after that one instant run: marquees, pulses, shimmer and sweeps. - transition-duration: 100ms · A hover still answers, as a quick color fade instead of a slide or a grow. - scroll-behavior: auto · Rail links jump straight to their section instead of gliding. - .animate-spin, [data-motion="essential"] · The exception. A spinner keeps turning, and anything marked essential keeps its motion. - · framer-motion animates with inline styles the CSS can't reach. This makes it read the same setting: fades still play, nothing travels or scales. packages/nm-tokens/tokens.css · reduced motion src/components/motion-provider.tsx 22 · every one the real thing The motion the site really runs, one card per idea, each using the real part: the live indicator, the verified badge, the sparkle button, the hero glow, the logo carousel, the testimonial row, the summit speakers, the resources cards, the page heading, the site button, a card, an image, a rail row, the theme toggle and the stat counter. - Live pulse · 1.8s cubic-bezier(0.4, 0, 0.2, 1) · infinite · 2 rings, 0.9s apart · live indicators · running - A light passes · 3.4s ease-in-out · a glint sweeps the verified badge, then rests · loops · Navid Moazzez - A line runs the edge · 1.6s linear · a line runs around the button's edge · loops · Get started - The background breathes · 12s and 15s ease-in-out · the hero's 2 glows drift and swell · loops - Logo carousel · 100s linear, 60s on phones · pauses on hover · loops - Testimonial row · drifts 0.35px a frame · drag it to scroll · loops - Summit speakers · the speaker grid from the summit call to action - Staggered entrance · each card rises 16px and fades in over 0.4s ease-out, 60ms after the one before · once · the resources page - Scroll reveal · opacity over 0.8s · rise 20 → 0 on a spring · once, the first time it scrolls into view · Headlines fade in. - Hover transition · 150ms · scale 1.02 and brighter · no bounce · Hover me - Card light · 300ms ease · background, border and shadow · no lift · Hover the card - Image zoom · 300ms · the image grows to 1.05 inside its frame - Rail icon pop · 260ms ease · the icon lifts 1.5px and grows to 1.16, then settles at 1.1 · Guides - Theme swap · 300ms ease · background and text crossfade across the page - Numbers count up · 2s ease-out · counts up once, the first time it scrolls into view - Live dot · 1.6s ease-in-out · fades to 40% and shrinks to 0.6 · loops · legacy.navid.me - Stardust · 30 specks rise and fade behind the page heroes · loops - 2 rows, opposite ways · the top row drifts left, the bottom right · drag either · loops - Tick list · rows arrive 90ms apart over 380ms · each check pops in over 260ms · once · Pick one idea|Build it once|Ship it - Drawer · slides in from the right on a spring · damping 30, stiffness 300 · Open a tool - Accordion · a row opens and closes over 250ms ease - Spinner · 1s linear · the one loop reduced motion keeps Reusable patterns Replay do · don't 241 · all 35 sites - Animation - Kind · sites - Timing - filamentGlow · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +31 · 2.5s, loops - lightbulbPulse · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +31 · 2.5s, loops - rayPulse · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +31 · 2.5s, loops - status-beat · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +31 · 1.6s, loops - status-breathe · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +31 · 1.6s, loops - ccb-tier-badge-sparkle-glow · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · — - cs-ai-dot-pulse · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 1.05s, loops - cs-ai-mascot-halo · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 2.8s, loops - cs-ai-orb-halo · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 1.6s, loops - cs-ai-orb-pulse · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 1.6s, loops - cs-ai-typing-dots · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 1.4s, loops - cs-key-pulse · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 2s, loops - cs-step-pulse · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · — - cs-tile-glow · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 2s, loops - cs-toggle-pill-pulse · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 2.4s, loops - csIntroPulse · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 1.6s, loops - live-pulse-ring-anim · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 1.8s, loops - terminal-bar-blink · Pulse · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 1s, loops - vrm-blink · Pulse · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +20 · — - vrm-pulse · Pulse · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +20 · 900ms - vrm-rec-ring · Pulse · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +20 · 1.4s, loops - tb-pulse · Pulse · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +18 · 900ms, loops - cs-tier-halo-free · Pulse · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +17 · 5.4s, loops - cs-tier-halo-max · Pulse · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +17 · 5.0s, loops - cs-tier-halo-premium · Pulse · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +17 · 4.6s, loops - cs-tier-halo-pro · Pulse · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +17 · 3.8s, loops - cs-tier-icon-pulse-free · Pulse · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +17 · — - cs-tier-icon-pulse-max · Pulse · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +17 · — - cs-tier-icon-pulse-premium · Pulse · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +17 · — - cs-tier-icon-pulse-pro · Pulse · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +17 · — - spotlight-pulse · Pulse · ai-creator-os, ai-summits, aitool.deals, creatorschool.ai +2 · 1.6s, loops - aicsLivePulse · Pulse · ai-summits, creatorschool.ai, navid-media-app, navid.bio · 1.4s, loops - copilot-blink · Pulse · ai-creator-os, ai-summits, creatorschool.ai, navid-media-app · 1s, loops - fntpl-pulse · Pulse · ai-creator-os, ai-summits, creatorschool.ai, navid-media-app · 1.6s, loops - tw-blink · Pulse · ai-creator-os, aios-consulting, aios-workshop, navid.consulting · 1s, loops - stepPulseGlow · Pulse · ai-summits, creatorschool.ai, navid-media-app · — - avatar-breathe · Pulse · creatorschool.ai, navid-media-app · 4s, loops - avatar-glow · Pulse · creatorschool.ai, navid-media-app · 4s, loops - blink · Pulse · creatorschool.ai, navid-media-app · 1s, loops - call-breathe · Pulse · creatorschool.ai, navid-media-app · 3s, loops - call-pulse · Pulse · creatorschool.ai, navid-media-app · 2s, loops - cap-pulse · Pulse · creatorschool.ai, navid-media-app · — - ccb-tier-halo-bootcamp · Pulse · creatorschool.ai, navid-media-app · 4.6s, loops - ccb-tier-halo-bootcamp_plus · Pulse · creatorschool.ai, navid-media-app · 3.8s, loops - ccb-tier-halo-bootcamp_vip · Pulse · creatorschool.ai, navid-media-app · 5.0s, loops - ccb-tier-icon-pulse-bootcamp · Pulse · creatorschool.ai, navid-media-app · — - ccb-tier-icon-pulse-bootcamp_plus · Pulse · creatorschool.ai, navid-media-app · — - ccb-tier-icon-pulse-bootcamp_vip · Pulse · creatorschool.ai, navid-media-app · — - cockpitTitleGlow · Pulse · creatorschool.ai, navid-media-app · 6s, loops - course-icon-pulse · Pulse · creatorschool.ai, navid-media-app · 1.4s, loops - cs-icon-ring-shake · Pulse · creatorschool.ai, navid-media-app · 620ms - cs-pill-logo-breathe · Pulse · creatorschool.ai, navid-media-app · 3.2s, loops - cursor-blink · Pulse · creatorschool.ai, navid-media-app · — - feed-pulse · Pulse · creatorschool.ai, navid-media-app · 1.6s, loops - heroGlowDrift · Pulse · creatorschool.ai, navid-media-app · — - online-glow · Pulse · creatorschool.ai, navid-media-app · 3s, loops - pulse · Pulse · creatorschool.ai, navid-media-app · 1.5s, loops - pulse-ring · Pulse · creatorschool.ai, navid-media-app · 2.5s, loops - pulse-soft · Pulse · creatorschool.ai, navid-media-app · — - recording-pulse · Pulse · creatorschool.ai, navid-media-app · 1.5s, loops - sos-pulse · Pulse · creatorschool.ai, navid-media-app · 2s, loops - typing-dot · Pulse · creatorschool.ai, navid-media-app · 1.4s, loops - webtpl-pulse · Pulse · creatorschool.ai, navid-media-app · 1.6s, loops - ak-ai-dot-pulse · Pulse · navid.me · 1.05s, loops - ak-ai-mascot-halo · Pulse · navid.me · 2.8s, loops - ak-ai-typing-dots · Pulse · navid.me · 1.4s, loops - apPulse · Pulse · namo-design · 2.6s, loops - connectors-activity-ring-anim · Pulse · navid.me · 1.8s, loops - mp-pulse · Pulse · creatorschool.ai · 1.2s, loops - sb-breathe · Pulse · creatorschool.ai · 2.6s, loops - usage-card-blink · Pulse · navid.me · 1.8s, loops - status-sheen · Shimmer · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +31 · 1.8s, loops - cs-vbadge-sweep · Shimmer · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +29 · 3.4s, loops - ccb-tier-badge-shimmer-sweep · Shimmer · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 5.6s, loops - cs-ai-progress-slide · Shimmer · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 1.1s, loops - cs-ai-skeleton-shimmer · Shimmer · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 1.4s, loops - nw-mesh · Shimmer · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 28s, loops - pill-shimmer-sweep · Shimmer · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 5.6s, loops - terminal-bar-line-sweep · Shimmer · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 8s, loops - vrm-rec-shimmer · Shimmer · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +20 · 2.4s, loops - aicc-title-flow · Shimmer · aios-guide, creatorschool.ai, navid-media-app, navid.me · 12s, loops - stepperFlow · Shimmer · ai-summits, creatorschool.ai, navid-media-app · 3s, loops - avatar-shimmer · Shimmer · creatorschool.ai, navid-media-app · 6s, loops - cockpitTitleFlow · Shimmer · creatorschool.ai, navid-media-app · 12s, loops - cs-atmosphere-drift · Shimmer · creatorschool.ai, navid-media-app · 90s, loops - shimmer · Shimmer · creatorschool.ai, navid-media-app · — - ak-ai-progress-slide · Shimmer · navid.me · 1.1s, loops - ak-ai-skeleton-shimmer · Shimmer · navid.me · 1.4s, loops - sb-sweep · Shimmer · creatorschool.ai · 3.6s, loops - marquee · Marquee · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +31 · 60s, loops - marquee-reverse · Marquee · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +31 · 70s, loops - ws-audio-marquee · Marquee · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +22 · 14s, loops - prompt-tile-scroll · Marquee · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +19 · — - skills-tile-scroll · Marquee · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +19 · — - swipe-tile-scroll · Marquee · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +19 · — - avatar-prompt-scroll · Marquee · ai-creator-os, aios-book, aios-consulting, aios-guide +4 · — - pb-scroll · Marquee · ai-creator-os, aios-book, aios-consulting, aios-guide +4 · — - pl-scroll · Marquee · ai-creator-os, aios-book, aios-consulting, aios-guide +4 · — - playbook-scroll · Marquee · ai-creator-os, aios-book, aios-consulting, aios-guide +4 · — - prompt-scroll · Marquee · ai-creator-os, aios-book, aios-consulting, aios-guide +4 · — - sv-scroll · Marquee · ai-creator-os, aios-book, aios-consulting, aios-guide +4 · — - swipe-vault-scroll · Marquee · ai-creator-os, aios-book, aios-consulting, aios-guide +4 · — - viral-hooks-scroll · Marquee · ai-creator-os, aios-book, aios-consulting, aios-guide +4 · — - marquee-vertical · Marquee · aios-guide, namo-design, navid-legacy, navid-now +1 · 55s, loops - marquee-vertical-reverse · Marquee · aios-guide, namo-design, navid-legacy, navid-now +1 · 70s, loops - cs-scroll-cue-drift · Marquee · aios-guide, navid-legacy · 2.2s, loops - scrollLogos · Marquee · creatorschool.ai, navid-media-app · 30s, loops - akw-prompt-scroll · Marquee · navid.me · — - btn-line · Spin · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +31 · 1.6s, loops - terminalBorderSpin · Spin · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +31 · 4s, loops - ccb-tier-badge-sparkle-spin · Spin · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 7s, loops - cs-ai-mascot-spin · Spin · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 4.6s, loops - csIconSpin · Spin · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 2.4s, loops - cs-hubsearch-spin · Spin · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +20 · 0.8s, loops - vrm-pip-spin · Spin · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +20 · 3.6s, loops - confirmation-spin · Spin · creatorschool.ai, navid-media-app · 0.9s, loops - sos-spin · Spin · creatorschool.ai, navid-media-app · — - spin · Spin · creatorschool.ai, navid-media-app · 0.8s, loops - ak-ai-mascot-spin · Spin · navid.me · 4.6s, loops - ak-terminal-border-spin · Spin · navid.me · 4s, loops - cert-spin · Spin · aios-guide · 48s, loops - ctaSpin · Spin · namo-design · 72s, loops - ctaSpinBack · Spin · namo-design · 72s, loops - mail-spin · Spin · creatorschool.ai · — - usage-card-spin · Spin · navid.me · 12s, loops - drift · Drift · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +31 · —, loops - gradientShift · Drift · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +31 · 12s, loops - cs-ai-mascot-float · Drift · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 2.8s, loops - floatBookDesktop · Drift · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · — - floatBookDesktopAlt · Drift · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · — - floatBookEntrance · Drift · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 0.8s - floatBookY · Drift · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · — - cs-search-bob · Drift · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +17 · 2.8s, loops - aicc-orb-a · Drift · aios-guide, creatorschool.ai, navid-media-app, navid.me · 18s, loops - aicc-orb-b · Drift · aios-guide, creatorschool.ai, navid-media-app, navid.me · 22s, loops - hq-icon-float · Drift · creatorschool.ai, navid-media-app, swipe-vault · 3.4s, loops - iconFloat · Drift · ai-summits, creatorschool.ai, navid-media-app · 3s, loops - map-aurora · Drift · ai-glossary-site, aios-guide, navid.me · 42s, loops - cockpitHeroDriftA · Drift · creatorschool.ai, navid-media-app · 18s, loops - cockpitHeroDriftB · Drift · creatorschool.ai, navid-media-app · 22s, loops - cs-step-flow · Drift · creatorschool.ai, navid-media-app · 1.6s, loops - ctaFloat · Drift · creatorschool.ai, navid-media-app · — - faqCatFloat · Drift · creatorschool.ai, navid-media-app · 4.5s, loops - float-slow · Drift · creatorschool.ai, navid-media-app · — - heroDriftA · Drift · creatorschool.ai, navid-media-app · 18s, loops - heroDriftB · Drift · creatorschool.ai, navid-media-app · 22s, loops - loginFloat · Drift · creatorschool.ai, navid-media-app · — - rhw-drift-a · Drift · creatorschool.ai, navid-media-app · 14s, loops - rhw-drift-b · Drift · creatorschool.ai, navid-media-app · 17s, loops - ak-ai-mascot-float · Drift · navid.me · 2.8s, loops - ak-search-bob · Drift · navid.me · 2.8s, loops - ak-stardust-drift · Drift · navid.me · —, loops - cert-caret · Typing · aios-guide · 0.9s, loops - countUp · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +31 · — - fadeInUp · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +31 · 0.4s - slideInLeft · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +31 · — - cs-rail-icon-pop · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +29 · 260ms - connector-icon-pop · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 0.45s - connector-tool-row-in · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 0.35s - csChipIn · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 360ms - csDrawerFadeIn · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 280ms - csDrawerFadeOut · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 240ms - csDrawerSlideIn · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 450ms - csDrawerSlideOut · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 280ms - csModalScaleIn · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 420ms - enter-3d-kf · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · — - fade-scale-in · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 0.8s - nw-split-fade · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 0.9s - nw-split-grow · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 0.9s - reveal-up · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 0.5s - ws-audio-popup-in · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 220ms - bookmark-toast-in · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +26 · 180ms - ce-toast-in · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +26 · 200ms - ws-complete-fade · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +22 · 2200ms - ws-fade-in · Entrance · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +22 · 220ms - vrm-fade · Entrance · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +20 · 180ms - vrm-pop · Entrance · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +20 · 220ms - gearCardIn · Entrance · agent-skills-library, ai-influencers, ai-summits, ai-tools-library +18 · 0.45s - gearIconIn · Entrance · agent-skills-library, ai-influencers, ai-summits, ai-tools-library +18 · 0.55s - cs-guideline-icon-idle · Entrance · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +17 · 4.2s, loops - cs-guideline-icon-in · Entrance · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +17 · 620ms - cs-guideline-icon-jiggle · Entrance · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +17 · 540ms - cs-guideline-row-in · Entrance · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +17 · 520ms - cs-pricing-fade · Entrance · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +17 · 220ms - cs-pricing-grow · Entrance · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +17 · 320ms - cs-pricing-slide-up · Entrance · agent-skills-library, ai-glossary-site, ai-influencers, ai-summits +17 · 420ms - cs-fade-in · Entrance · agent-skills-library, ai-glossary-site, ai-tools-library, aios-guide +15 · 180ms - cs-sheet-in · Entrance · agent-skills-library, ai-glossary-site, ai-tools-library, aipromptvault +14 · 240ms - topnav-submenu-in · Entrance · agent-skills-library, ai-glossary-site, ai-tools-library, aipromptvault +14 · 160ms - copilot-fadeUp · Entrance · ai-creator-os, ai-summits, creatorschool.ai, navid-media-app · .3s - fntpl-fadeup · Entrance · ai-creator-os, ai-summits, creatorschool.ai, navid-media-app · 0.45s - discover-modal-in · Entrance · creatorschool.ai, navid-media-app, swipe-vault · 180ms - discover-pane-in · Entrance · creatorschool.ai, navid-media-app, swipe-vault · — - map-loader-in · Entrance · ai-glossary-site, aios-guide, navid.me · 0.5s - stepFadeUp · Entrance · ai-summits, creatorschool.ai, navid-media-app · 0.5s - backdrop-in · Entrance · creatorschool.ai, navid-media-app · 0.25s - bk-panel-in · Entrance · creatorschool.ai, navid-media-app · 200ms - cs-complete-fade · Entrance · creatorschool.ai, navid-media-app · 2200ms - cs-confirm-in · Entrance · creatorschool.ai, navid-media-app · 140ms - cs-modal-fade · Entrance · creatorschool.ai, navid-media-app · 220ms - cs-modal-slide-up · Entrance · creatorschool.ai, navid-media-app · 320ms - fade-in · Entrance · creatorschool.ai, navid-media-app · 0.35s - fade-up · Entrance · creatorschool.ai, navid-media-app · 0.45s - fadeUp · Entrance · creatorschool.ai, navid-media-app · 0.3s - heroResultsIn · Entrance · creatorschool.ai, navid-media-app · 220ms - ml-fade · Entrance · navid-legacy, navid.me · 160ms - recording-dot · Entrance · creatorschool.ai, navid-media-app · — - rhw-in · Entrance · creatorschool.ai, navid-media-app · 460ms - rhw-pop · Entrance · creatorschool.ai, navid-media-app · 420ms - scale-in · Entrance · creatorschool.ai, navid-media-app · 0.15s - slide-in-left · Entrance · creatorschool.ai, navid-media-app · — - slide-up · Entrance · creatorschool.ai, navid-media-app · 0.35s - slideInRight · Entrance · creatorschool.ai, navid-media-app · 220ms - td-fade-up · Entrance · aios-guide, navid-legacy · 320ms - tl-in · Entrance · aios-guide, navid.me · 380ms - tl-pop · Entrance · aios-guide, navid.me · 260ms - webtpl-fadeup · Entrance · creatorschool.ai, navid-media-app · 0.45s - aios-fade · Entrance · aios-guide · 300ms - aios-pop · Entrance · aios-guide · 350ms - akChipIn · Entrance · navid.me · 360ms - connectors-activity-enter · Entrance · navid.me · 0.32s - sub-slide · Entrance · creatorschool.ai · 240ms - usage-card-fade-in · Entrance · navid.me · 0.25s - cs-faq-nav-icon-jiggle · Other · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +29 · 480ms - app-nav-icon-jiggle · Other · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 480ms - cs-comment-flash · Other · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 1.6s - cs-pill-mascot · Other · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +28 · 2.6s, loops - ws-tab-jiggle · Other · agent-skills-library, ai-creator-os, ai-glossary-site, ai-influencers +22 · 480ms - prompt-lib-progress · Other · ai-creator-os, aios-book, aios-consulting, aios-guide +4 · — - swipe-vault-progress · Other · ai-creator-os, aios-book, aios-consulting, aios-guide +4 · — - aicc-scan · Other · aios-guide, creatorschool.ai, navid-media-app, navid.me · 2.6s, loops - copilot-bounce · Other · ai-creator-os, ai-summits, creatorschool.ai, navid-media-app · 1.2s, loops - cl-progress · Other · ai-summits, creatorschool.ai, navid-media-app · — - csv-progress · Other · ai-summits, creatorschool.ai, navid-media-app · — - map-loader-fill · Other · ai-glossary-site, aios-guide, navid.me · 1.5s - token-burn-scan · Other · creatorschool.ai, navid-media-app, navid.me · 2.8s, loops - aios-bot-dot · Other · aios-guide · 1.4s - akw-prompt-lib-progress · Other · navid.me · — - cert-rise · Other · aios-guide · — - connectors-activity-check · Other · navid.me · 0.28s - connectors-activity-dot · Other · navid.me · 0.9s, loops Every keyframe animation the sites ship, read from the code of all 35: what kind it is, which sites use it, and its timing as used. Tailwind adds `animate-spin` (1,076 uses), `animate-pulse` (222), `animate-bounce` (68) and `animate-ping` (23), and framer-motion runs 2,049 looping animations across 29 sites. Every animation Usage ## 13. Components **Reusable UI elements** The site is assembled from a fixed set. A new page composes them; it does not write its own card. ### Touch targets The tap areas the site's small controls have today. The common guideline is 44px, and none of these reach it yet. | Control | Size | |---|---| | Mobile menu button | 32px | | Search button | 36px | | Hub top bar buttons | 30 to 32px | - Shell · The railed hub, mounted once in a segment layout so the rail survives navigation. · HubLayout · HubShell · HubRail · HubHero · Nav · Footer - Surface · One card, on every page. · testimonial-card - Search · The search row with the filter built in, choices shown back as dismissible chips. · FavoritesSearchBar · FilterPopup · chips - Overlays · One drawer family. A card opens the drawer for its own type. · ToolDrawer · GearDrawer · ChannelDrawer · BlogDrawer · NewsletterDrawer - FAQ · The accordion, in a 700px column. · faq-item - Close · The newsletter block every page ends on. · NavidInsiderCTA The Claude Code usage card from aios.guide. The counts run up and the heatmap floods in, row by row, when it scrolls into view. Usage card - Local - navid-ai-os $200/mo (I started on the $20/mo Pro plan) for Claude Max. - all · All https://cdn.navid.media/shared/tool-logos/claude.svg Opus 5 1M · Max all app-kit · data/usage-card HQ's connectors feed. Each tool's action streams in, runs, and checks off. Connectors feed live MCPs & CLIs connectors - Notion · Updating project page · 4 blocks updated - Kit · Drafting newsletter · Draft saved - Substack · Publishing essay · Live in 3.2s - YouTube · Pulling 30-day analytics · +2.3k subs · 142k views - Stripe · Issuing refund #4291 · $199 returned - HeyGen · Generating avatar video · 0:42 ready - Vercel · Deploying changes · Live in 18s - Supabase · Querying workshop table · 1.2k rows returned - Cloudflare · Uploading video to R2 · 2.4 GB uploaded app-kit · data/connectors-activity ### Navigation Every navigation the sites and apps use, one row per design. Below the table are the 2 that live in navid.me, as the real components in this page's theme: the floating nav, with its at rest and scrolled states, and the hub top bar. The hub sidebar is live to the left of this page. | Navigation | Where | Layout | On phones | |---|---|---|---| | Floating top nav | navid.me, navid.bio, the now page and the design studio site | A fixed pill 10px from the top, 1240px wide and 52 to 58px tall. Narrows to 880px after 50px of scroll. About and Resources menus, search, theme and a call to action. | Below 1024px, a full-screen menu slides in from the left | | Network nav | aios.guide, HQ, navid.media, the AI OS sites, the summits and the collection sites | The same floating pill, aware of who is signed in: a Products menu, bookmarks and an account menu. The collection sites drop the menus because their sidebar is the navigation. | Below 1024px, a slide-in menu and a profile sheet | | Site nav, from the shared UI package | medialibrary.to and the media library | The floating pill built from props: logo, links and a slot on the right | Below 1024px, the same slide-in menu | | Sales page nav | Sales pages of the AI OS sites, navid.consulting, navid.media and HQ | The floating pill with the page's own links and one call to action. It can stay hidden until the reader scrolls past the hero. | Below 768px, the menu opens under the bar | | Summit nav | The summit pages | The floating pill, with a call to action set per summit | Below 1024px, the menu opens under the bar | | Hub top bar | /brand and /favorites, the 19 collection sites and the media library docs | A sticky 56px bar across the page: the brand block matches the sidebar, links in the middle, Share, theme and account on the right | Below 1100px, the sidebar opens as a drawer from the bar | | Hub sidebar | The same hub pages, and the navid.me help center | 248px, sticky under the top bar, with a search box and groups that open and close | Below 1100px, a drawer | | AI OS guide sidebar and top bar | aios.guide, legacy.navid.me and the AI Token Tracker site | A fixed sidebar, 264px or 60px collapsed, with a sticky 56px top bar of tools on the right. Legacy keeps only search and theme. | Below 1024px, a 56px bar that opens a drawer | | App shell | HQ, Creator Store, CreatorCRM, the link tracker and the other apps | A 60px app rail, a sidebar of 264px, 60px or open on hover, and a sticky 56px top bar | Below 1024px, a 56px bar and a drawer | | Member app shell | The member learning app | A 264px or 60px sidebar and a sticky 56px header | A floating pill at the bottom, a bottom sheet and a 280px drawer | | AI Token Tracker app rail | The AI Token Tracker app | A 264px or 60px rail | A 48px bar | | Onboarding header | Sign-up and onboarding | A centered wordmark with no links | The same, centered | ### Footer Every footer the sites and apps use, grouped by kind. Below the table are the 2 that live in navid.me, as the real components in this page's theme. Narrow the window to see the phone accordion. | Footer | Where | Layout | On phones | |---|---|---|---| | Mega footer | navid.me, navid.bio, navid.media, the AI OS sites, the summits, HQ and 20 more sites | Logo, bio and social icons, then 4 link columns, the copyright with language and theme, a legal row and the affiliate note | One accordion, with Legal added as a section | | Simple footer | Sales, summit, lead magnet, upsell and checkout pages, in 122 places | Logo and tagline, legal links, a hairline, then the copyright with language and theme | Stacks into one column below 640px | | Hub footer | The 19 collection sites and the media library | Logo, blurb and a row of social icons, link columns, then an Our projects strip listing every property | One accordion, with Our projects as a section | | Footer bar | Sign-in, onboarding, account and email pages of HQ and the member app | The mark and theme, legal links, then the copyright. A compact version keeps only the last 2 rows. | Stacks | | Onboarding footer | The bio-link store and the agent gate | The footer bar, with its brand, links and tagline chosen by the domain it is served on | Stacks | | AI OS guide footer | aios.guide and the AI Token Tracker site | Wordmark, footer line and Built by Navid, 4 columns, then the legal row and 2 disclaimers | One accordion, with Help added | | App footer | Sign-in pages of Creator Store and CreatorCRM | Logo, legal links and the copyright | Stacks | | Small footers | The Creator Store storefront, CreatorCRM public pages and embedded agents | One centered line: the store or brand, and Powered by or Runs on Creator Store | The same line | ## 14. Charts & numbers **Every number, drawn by the same components** These are the components HQ, the CRM, the link tracker, Health OS, the habit tracker, the AI Token Tracker and the other apps use to show numbers, shown exactly as they appear there. The country and link lists are real clicks. Every other number is a sample. - US - GB - CA - AU - DE - SE - NL - FR - IN - SG - BR - ZA money Revenue $ 5h window tokens Busy - Sun - Mon - Tue - Wed - Thu - Fri - Sat Quiet Local time - Drafting outlines for the next 3 videos from this week's trending topics. · YouTube pipeline · 2m ago - Brief written: 4 meetings, 12 emails triaged, 3 tasks due today. · Morning brief · 6h ago - 14 locales updated for 3 pages. All strings within their character budgets. · Translate pages · 8h ago - Pulled 4 of 4 sources: YouTube, newsletter, link clicks and sales. · Metrics pull · 9h ago - Permission denied on 2 archived files. Check their owner and run it again. · Vault cleanup · 20h ago - 2026-09-01 - 2026-09-02 - 2026-09-03 - 2026-09-04 - 2026-09-05 - 2026-09-06 - 2026-09-07 - 2026-09-08 - 2026-09-09 - 2026-09-10 - 2026-09-11 - 2026-09-12 - 2026-09-13 - 2026-09-14 - 2026-09-15 - 2026-09-16 - 2026-09-17 - 2026-09-18 - 2026-09-19 - 2026-09-20 - 2026-09-21 2026-09-21 kept Next month Previous month - 3m ago · Content cascade - 1m ago · Pull metrics - 14m ago · Morning brief · inbox/reports/morning/2026-09-21.md - 30m ago · Permission denied on 2 files · Vault cleanup - All time · Orders · 1,284 - All time · Customers · 962 - Last 30 days · Average order · $84 - pageViews · Page views - ctaClicks · CTA clicks - drawerOpens · Checkout opened - purchases · Purchases Overall conversion (page view to purchase): Top leak vs prior from prev - good · Recovered · Your resting HRV is 58 ms, above your usual 55 ms. That is what is carrying the number today. · Room to push - good · Of 8 hours · 7.6 hours against your usual 7.1. Deep and REM together came to 3.5 hours. · Last night - good · Of 21 · 10.9 against your usual 11.2. There is room in the tank today. · Capacity left 2026-09-20 - 2025-09-22 · claude-code - 2025-09-23 · claude-code - 2025-09-25 · claude-code - 2025-09-26 · claude-code - 2025-09-28 · claude-code - 2025-09-29 · claude-code - 2025-09-30 · claude-code - 2025-10-01 · claude-code - 2025-10-03 · claude-code - 2025-10-04 · claude-code - 2025-10-05 · claude-code - 2025-10-06 · claude-code - 2025-10-07 · claude-code - 2025-10-09 · claude-code - 2025-10-10 · claude-code - 2025-10-11 · claude-code - 2025-10-13 · claude-code - 2025-10-14 · claude-code - 2025-10-15 · claude-code - 2025-10-16 · claude-code - 2025-10-17 · claude-code - 2025-10-18 · claude-code - 2025-10-19 · claude-code - 2025-10-20 · claude-code - 2025-10-21 · claude-code - 2025-10-24 · claude-code - 2025-10-26 · claude-code - 2025-10-27 · claude-code - 2025-10-28 · claude-code - 2025-10-29 · claude-code - 2025-10-30 · claude-code - 2025-10-31 · claude-code - 2025-11-01 · claude-code - 2025-11-02 · claude-code - 2025-11-03 · claude-code - 2025-11-04 · claude-code - 2025-11-05 · claude-code - 2025-11-06 · claude-code - 2025-11-07 · claude-code - 2025-11-08 · claude-code - 2025-11-09 · claude-code - 2025-11-11 · claude-code - 2025-11-12 · claude-code - 2025-11-13 · claude-code - 2025-11-14 · claude-code - 2025-11-15 · claude-code - 2025-11-16 · claude-code - 2025-11-17 · claude-code - 2025-11-18 · claude-code - 2025-11-19 · claude-code - 2025-11-20 · claude-code - 2025-11-21 · claude-code - 2025-11-22 · claude-code - 2025-11-24 · claude-code - 2025-11-25 · claude-code - 2025-11-26 · claude-code - 2025-11-27 · claude-code - 2025-11-28 · claude-code - 2025-11-29 · claude-code - 2025-11-30 · claude-code - 2025-12-01 · claude-code - 2025-12-02 · claude-code - 2025-12-04 · claude-code - 2025-12-05 · claude-code - 2025-12-06 · claude-code - 2025-12-07 · claude-code - 2025-12-08 · claude-code - 2025-12-10 · claude-code - 2025-12-11 · claude-code - 2025-12-12 · claude-code - 2025-12-13 · claude-code - 2025-12-15 · claude-code - 2025-12-16 · claude-code - 2025-12-17 · claude-code - 2025-12-18 · claude-code - 2025-12-20 · claude-code - 2025-12-22 · claude-code - 2025-12-24 · claude-code - 2025-12-25 · claude-code - 2025-12-26 · claude-code - 2025-12-27 · claude-code - 2025-12-29 · claude-code - 2025-12-31 · claude-code - 2026-01-01 · claude-code - 2026-01-03 · claude-code - 2026-01-04 · claude-code - 2026-01-05 · claude-code - 2026-01-06 · claude-code - 2026-01-09 · claude-code - 2026-01-10 · claude-code - 2026-01-12 · claude-code - 2026-01-14 · claude-code - 2026-01-15 · claude-code - 2026-01-16 · claude-code - 2026-01-17 · claude-code - 2026-01-18 · claude-code - 2026-01-19 · claude-code - 2026-01-20 · claude-code - 2026-01-21 · claude-code - 2026-01-22 · claude-code - 2026-01-23 · claude-code - 2026-01-24 · claude-code - 2026-01-25 · claude-code - 2026-01-27 · claude-code - 2026-01-31 · claude-code - 2026-02-01 · claude-code - 2026-02-02 · claude-code - 2026-02-03 · claude-code - 2026-02-04 · claude-code - 2026-02-05 · claude-code - 2026-02-06 · claude-code - 2026-02-07 · claude-code - 2026-02-08 · claude-code - 2026-02-10 · claude-code - 2026-02-11 · claude-code - 2026-02-12 · claude-code - 2026-02-13 · claude-code - 2026-02-14 · claude-code - 2026-02-15 · claude-code - 2026-02-16 · claude-code - 2026-02-17 · claude-code - 2026-02-18 · claude-code - 2026-02-19 · claude-code - 2026-02-20 · claude-code - 2026-02-21 · claude-code - 2026-02-22 · claude-code - 2026-02-23 · claude-code - 2026-02-24 · claude-code - 2026-02-25 · claude-code - 2026-02-26 · claude-code - 2026-02-27 · claude-code - 2026-03-01 · claude-code - 2026-03-02 · claude-code - 2026-03-03 · claude-code - 2026-03-04 · claude-code - 2026-03-05 · claude-code - 2026-03-06 · claude-code - 2026-03-07 · claude-code - 2026-03-08 · claude-code - 2026-03-09 · claude-code - 2026-03-10 · claude-code - 2026-03-12 · claude-code - 2026-03-13 · claude-code - 2026-03-14 · claude-code - 2026-03-15 · claude-code - 2026-03-17 · claude-code - 2026-03-20 · claude-code - 2026-03-21 · claude-code - 2026-03-22 · claude-code - 2026-03-22 · codex - 2026-03-23 · claude-code - 2026-03-23 · codex - 2026-03-24 · claude-code - 2026-03-25 · claude-code - 2026-03-25 · codex - 2026-03-26 · claude-code - 2026-03-28 · claude-code - 2026-03-28 · codex - 2026-03-29 · claude-code - 2026-03-30 · claude-code - 2026-03-30 · codex - 2026-03-31 · claude-code - 2026-04-01 · claude-code - 2026-04-01 · codex - 2026-04-02 · claude-code - 2026-04-03 · claude-code - 2026-04-04 · claude-code - 2026-04-04 · codex - 2026-04-06 · claude-code - 2026-04-07 · claude-code - 2026-04-08 · claude-code - 2026-04-08 · codex - 2026-04-09 · claude-code - 2026-04-12 · claude-code - 2026-04-13 · claude-code - 2026-04-14 · claude-code - 2026-04-15 · claude-code - 2026-04-16 · claude-code - 2026-04-17 · claude-code - 2026-04-17 · codex - 2026-04-19 · claude-code - 2026-04-19 · codex - 2026-04-20 · claude-code - 2026-04-21 · claude-code - 2026-04-22 · claude-code - 2026-04-22 · codex - 2026-04-24 · claude-code - 2026-04-26 · claude-code - 2026-04-27 · claude-code - 2026-04-27 · codex - 2026-04-29 · claude-code - 2026-04-29 · codex - 2026-04-30 · claude-code - 2026-04-30 · codex - 2026-05-01 · claude-code - 2026-05-01 · codex - 2026-05-02 · claude-code - 2026-05-03 · claude-code - 2026-05-04 · claude-code - 2026-05-05 · claude-code - 2026-05-06 · claude-code - 2026-05-06 · codex - 2026-05-07 · claude-code - 2026-05-09 · claude-code - 2026-05-09 · codex - 2026-05-10 · claude-code - 2026-05-10 · codex - 2026-05-11 · claude-code - 2026-05-11 · codex - 2026-05-12 · claude-code - 2026-05-13 · claude-code - 2026-05-13 · codex - 2026-05-14 · claude-code - 2026-05-14 · codex - 2026-05-15 · claude-code - 2026-05-19 · claude-code - 2026-05-19 · codex - 2026-05-20 · claude-code - 2026-05-21 · claude-code - 2026-05-21 · codex - 2026-05-22 · claude-code - 2026-05-23 · claude-code - 2026-05-24 · claude-code - 2026-05-26 · claude-code - 2026-05-26 · codex - 2026-05-27 · claude-code - 2026-05-27 · codex - 2026-05-28 · claude-code - 2026-05-28 · codex - 2026-05-29 · claude-code - 2026-05-29 · codex - 2026-05-30 · claude-code - 2026-05-31 · claude-code - 2026-06-02 · claude-code - 2026-06-02 · codex - 2026-06-03 · claude-code - 2026-06-03 · codex - 2026-06-04 · claude-code - 2026-06-04 · codex - 2026-06-05 · claude-code - 2026-06-06 · claude-code - 2026-06-07 · claude-code - 2026-06-08 · claude-code - 2026-06-10 · claude-code - 2026-06-11 · claude-code - 2026-06-11 · codex - 2026-06-12 · claude-code - 2026-06-12 · codex - 2026-06-13 · claude-code - 2026-06-14 · claude-code - 2026-06-15 · claude-code - 2026-06-15 · codex - 2026-06-16 · claude-code - 2026-06-19 · claude-code - 2026-06-20 · claude-code - 2026-06-20 · codex - 2026-06-21 · claude-code - 2026-06-21 · codex - 2026-06-22 · claude-code - 2026-06-22 · codex - 2026-06-23 · claude-code - 2026-06-24 · claude-code - 2026-06-24 · codex - 2026-06-25 · claude-code - 2026-06-27 · claude-code - 2026-06-27 · codex - 2026-06-28 · claude-code - 2026-06-29 · claude-code - 2026-06-30 · claude-code - 2026-07-02 · claude-code - 2026-07-03 · claude-code - 2026-07-04 · claude-code - 2026-07-04 · codex - 2026-07-05 · claude-code - 2026-07-05 · codex - 2026-07-06 · claude-code - 2026-07-06 · codex - 2026-07-07 · claude-code - 2026-07-09 · claude-code - 2026-07-11 · claude-code - 2026-07-12 · claude-code - 2026-07-13 · claude-code - 2026-07-14 · claude-code - 2026-07-15 · claude-code - 2026-07-17 · claude-code - 2026-07-18 · claude-code - 2026-07-18 · codex - 2026-07-19 · claude-code - 2026-07-21 · claude-code - 2026-07-21 · codex - 2026-07-22 · claude-code - 2026-07-23 · claude-code - 2026-07-24 · claude-code - 2026-07-24 · codex - 2026-07-25 · claude-code - 2026-07-25 · codex - 2026-07-28 · claude-code - 2026-07-29 · claude-code - 2026-07-30 · claude-code - 2026-07-30 · codex - 2026-07-31 · claude-code - 2026-07-31 · codex - 2026-08-01 · claude-code - 2026-08-01 · codex - 2026-08-03 · claude-code - 2026-08-03 · codex - 2026-08-04 · claude-code - 2026-08-04 · codex - 2026-08-05 · claude-code - 2026-08-05 · codex - 2026-08-06 · claude-code - 2026-08-06 · codex - 2026-08-07 · claude-code - 2026-08-07 · codex - 2026-08-08 · claude-code - 2026-08-09 · claude-code - 2026-08-09 · codex - 2026-08-10 · claude-code - 2026-08-10 · codex - 2026-08-11 · claude-code - 2026-08-12 · claude-code - 2026-08-12 · codex - 2026-08-14 · claude-code - 2026-08-14 · codex - 2026-08-15 · claude-code - 2026-08-16 · claude-code - 2026-08-17 · claude-code - 2026-08-17 · codex - 2026-08-18 · claude-code - 2026-08-20 · claude-code - 2026-08-20 · codex - 2026-08-21 · claude-code - 2026-08-21 · codex - 2026-08-22 · claude-code - 2026-08-22 · codex - 2026-08-23 · claude-code - 2026-08-25 · claude-code - 2026-08-27 · claude-code - 2026-08-28 · claude-code - 2026-08-29 · claude-code - 2026-08-30 · claude-code - 2026-08-31 · claude-code - 2026-08-31 · codex - 2026-09-02 · claude-code - 2026-09-06 · claude-code - 2026-09-08 · claude-code - 2026-09-10 · claude-code - 2026-09-11 · claude-code - 2026-09-12 · claude-code - 2026-09-12 · codex - 2026-09-13 · claude-code - 2026-09-14 · claude-code - 2026-09-15 · claude-code - 2026-09-15 · codex - 2026-09-16 · claude-code - 2026-09-16 · codex - 2026-09-17 · claude-code - 2026-09-18 · claude-code - 2026-09-18 · codex - 2026-09-19 · claude-code - 2026-09-20 · claude-code 2025-09-22 to Less More Total Shared scale - https://cdn.navid.media/shared/tool-logos/claude-code-2.webp · claude-code · #D97757 · Claude Code - https://cdn.navid.media/shared/tool-logos/openai.jpg · codex · #6361EA · Codex 1 click BarChart3 The board on the Sales and CRM dashboards. The chart under it is data/revenue-chart. HQ's territory map. Revenue by country, shaded on a square-root scale. Hover a country for its orders. The meter on HQ's AI OS dashboard. Usage against the window's cap, counting up on load, with a projection to the end of the window. HQ's AI OS activity feed. One row per skill run. Hover a row for its log. {n} clicks The trailing year, one cell a day. Columns stretch to fill the card. Bucketed by quantile, as the testimonials app does. - --track - rgba(34,186,160,0.25) - rgba(34,186,160,0.5) - rgba(34,186,160,0.75) - #22BAA0 AI Token Tracker's 7 by 24 grid. Shading steps by quintile. KPI board Sales dashboard World map RankBars, from the product sales report, where it ranks top sellers and traffic sources. - YouTube · youtube - Substack · substack - LinkedIn · linkedin - Instagram · instagram - X · x - Direct · website - --status-done · Paid - --status-live · Processing - --status-waiting · Needs action - --status-rest · Refunded - --status-broken · Failed - --status-rest · Canceled Token burn - Role - Use - Value - The first series, and any chart with only one · Series 1 · #0B81F7 - The second series, and the end of every blue gradient · Series 2 · #6361EA - The third series · Series 3 · #02CFFF - A change for the better, a finished state, the heatmap ramp · Better · #22BAA0 - A change for the worse, a failed state · Worse · #C75050 - No change, axis labels, empty data · Flat · --text-secondary - Gridlines and the baseline · Grid · --glass-border recent runs Activity feed Activity - Mon - Tue - Wed - Thu - Fri - Sat - Sun BarChart and HourChart, from the habit tracker's dashboard. Year heatmap 2025-09-21 Hour of week - Claude - AI Creator Summit sessions - Wispr Flow - ChatGPT - Gemini - Adobe Firefly - Notion - Canva Real: Navid's tracked links and 26,655 human clicks, counted on September 21, 2026. The icon tile is SquareIcon from data/link-ui. Link Tracker's analytics page shows the same lists. The habit tracker's month calendar. Each day fills with the share of habits kept. Polling every 3s HQ's AI OS queue. Skill runs in the background, each with its state and what it produced. Ranked bars Revenue by source AI Token Tracker's tier rings: bronze to diamond, each ring filling toward the next tier. The stat row on HQ's list screens. It lifts and glows on hover. Burn calendar Demo Live projected Chart color View log View JSON More HQ's product funnel. The biggest drop is marked as the top leak. Habit charts app-kit · data/sales-kpi-board - gross · Every payment before fees and refunds · vs the previous 30 days · Gross volume · $6,840 · #0B81F7 · money - payments · Successful payments · vs the previous 30 days · Payments · 38 · #6361EA · count - subscribers · Everyone on the list · Running total · Subscribers · 12,480 · #02CFFF · line · count - unsubscribes · People who left the list · vs the previous 30 days · Unsubscribes · 46 · #0B81F7 · count Top links by clicks Breakdown lists app-kit · data/world-map Month grid Background queue Background queue Achievement rings Stat cards StatusPill, from the billing tab about 18 apps carry, colored with the shared status tokens: each status has a text color and a matching background. AI Token Tracker's spend calendar: the total on top, then one row per provider in its own color, all on one shared scale. app-kit · data/token-burn Columns, from the product sales report, for a count over time. - us · United States - se · Sweden - sg · Singapore - fr · France - de · Germany - br · Brazil - gb · United Kingdom - hk · Hong Kong app-kit · data/activity-feed View all → Funnel app-kit · year-heatmap app-kit · data/hour-heatmap Click a card to chart it. Drag a card to reorder the row. Done Error Open total active Queued Running app-kit · data/report-graphs 2026-08-23 Status pills - Tokens processed · Every token across every session. · 500M for Platinum · 198.6M - Longest streak · Days in a row with at least one session. · 30 days for Gold · 23 days - Cache hit rate · Share of input read from cache. · 91% - Sessions · Every Claude Code session started. · 1,000 for Diamond · 532 app-kit · data/burn-calendar roles Columns app-kit · data/habit-charts app-kit · data/breakdown-list app-kit · data/month-grid app-kit · data/background-queue Health OS's home: Recovery, Sleep and Strain side by side. Only Recovery carries the traffic light; Sleep and Strain stay one color, so three rings never read as an alarm panel. app-kit · data/achievement-rings app-kit · data/hq-stat-cards app-kit · data/funnel Health scores Specimen data app-kit · data/billing-pieces app-kit · data/report-graphs Clicks by country Habits kept per day - gross - payments - subscribers - unsubscribes Check-ins by hour app-kit · data/score-ring ## 15. States & status (Colors: status) **Color is meaning** 6 meanings, one muted color each, the same in every app: a task, a job, an order, a translation. Pick the meaning and the color follows. Brand blue is never a status, because blue is links and actions. Every chip and bar on this page is the real `.status-chip` and `.status-bar` every site ships, so what you see is the spec. every status we ship, by meaning - Live · AI run running, broadcast sending, video encoding · Charge processing, trial running · Translation in progress - Done · Run finished, broadcast sent, automation active · Paid, subscription active, payout completed · Published, reviewed translation, connected - Waiting · Queued, scheduled, paused · Pending, past due, awaiting payment · Stale translation, coming soon - Needs review · Awaiting approval · Affiliate awaiting approval · Machine translation - Broken · Run failed, broadcast failed · Payment failed, disputed, unpaid · Import failed - At rest · Draft, archived, disabled · Cancelled, refunded, expired · Draft, archived The statuses HQ, Creator Store and CreatorCRM already use, sorted by what they mean. A new screen never needs a new color: find the meaning here and use its chip. Work Money Content Meaning tokens.css · section 4 The status layer of the shared tokens file, as every site imports it. Use the chip with the meaning as its `data-status`, never a hex: ``. packages/nm-tokens/tokens.css, section 4 one per meaning · Lucide Each meaning has one fixed Lucide icon, drawn in the meaning's hue. Every hue clears 5:1 on the plain page in both themes, so an icon can stand next to text without a chip, and one color per meaning covers chip text, icons, bars and the heartbeat. Dark Light Meaning a piece of work, start to finish The states a task moves through, each on its meaning. Only In progress moves: its icon breathes, and it stops for anyone who turns on reduced motion. Cancelled is struck through, so an ended task never reads as one that has not started. - Not started - In progress - Waiting on someone - Needs review - Done - Stuck - Cancelled one color each · both themes - Live · Running right now - Done · Finished or healthy - Waiting · Queued, scheduled or paused - Needs review · Waiting on a human look - Broken · Failed, and needs you - At rest · Draft, cancelled or archived A muted tint with text in the same hue, never a saturated fill, so a list reads at a glance and nothing shouts. Every text color clears 4.5:1 on its tint in both themes. The icon is fixed per meaning, so a status still reads without color. Chip Dark · text / tint Light · text / tint Meaning one bar · the meaning's hue A job's bar takes the color of its state. A running upload, import or translation fills in the live hue with a slow sheen. A paused one turns amber, a finished one green, and a failed one red where it stopped. - Uploading - Paused - Needs review - Translated - Import failed the question every amber and red row raises - Queued · Yes. It starts when the job ahead finishes. · Queued · Behind a job that is running - Scheduled · Yes. It runs at its time. · Scheduled · Set to run later - Needs review · No. Someone has to read it and approve it. · Needs review · Waiting on a human look - Failed · No. Someone has to fix the cause and run it again. · Failed · Stopped with an error Amber and red both ask for attention, but only some of them need a person. This is the answer, so a list can be read for what needs you and nothing else. Chip Fixes itself? State anything that runs · 8×16 - 30s · Claude Code · Running · Working in HQ - 6h · Morning brief · Idle · Runs every morning - 2m · Background queue · Paused · 3 jobs waiting - 1d · YouTube connector · Error · Needs signing in again A capsule, 8 by 16 with a 4px radius, solid in the meaning's hue, for anything that runs: an agent, a job, a connector. Only a running one moves, sending out a soft ring every 1.6 seconds, and the ring stops for anyone who turns on reduced motion. An error stays still, because red already says it and a blink would shout. The rows below are examples. - Idle · Still - Running · A ring every 1.6s - Paused · Still - Error · Still ## 16. Design tokens (Tokens) **One file, and every site reads it** `packages/nm-tokens/tokens.css` is the single source for every [Navid Media](https://navid.media) site. Every value is a [CSS custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), and [Tailwind v4](https://tailwindcss.com/docs/theme) reads the same file through `@theme`, so no site has a `tailwind.config`. Each site imports a generated copy, kept in line by `npm run tokens:sync`. One file, the same values on all 35 sites, and no hex typed by hand. /design.md The system is published as a single markdown file. Point an agent, an LLM or a teammate at it to build anything that should feel like this site. For agents and developers ```css /* Navid Media design tokens. CANONICAL. * * The only file where a brand value is typed. Every site gets a generated * copy at src/styles/core-tokens.css and imports it at the top of * src/app/globals.css. Edit here, then run `npm run tokens:sync` in this * folder. Never edit a copy: the next sync overwrites it and the check flags it. * * 1. Brand hues literal, the same in both themes * 2. Tailwind @theme turns them into utilities; no tailwind.config * 3. Theme dark by default, then light, then system asking for light * 4. Status 6 meanings, one muted color each, and the chip and bar * 5. Motion 3 easings, 5 durations, the rise, and reduced motion */ /* ── 1. Brand hues ─────────────────────────────────────────────────────── */ :root { /* the brand gradient runs blue → indigo */ --brand-blue: #0B81F7; /* links, hover, focus */ --brand-indigo: #6361EA; /* accents */ --brand-cyan: #02CFFF; --brand-teal: #00C6C9; --brand-orange: #FF583C; --brand-amber: #F59E0B; --brand-gold: #F9F871; --brand-red: #F90B2C; --brand-dim: #C0BFC7; } /* ── 2. Tailwind v4 ────────────────────────────────────────────────────── */ @theme { --font-sans: "Inter", sans-serif; /* each utility reads the hue above → bg-brand-blue, text-brand-cyan … */ --color-brand-blue: var(--brand-blue); --color-brand-indigo: var(--brand-indigo); --color-brand-cyan: var(--brand-cyan); --color-brand-teal: var(--brand-teal); --color-brand-orange: var(--brand-orange); --color-brand-amber: var(--brand-amber); --color-brand-gold: var(--brand-gold); --color-brand-red: var(--brand-red); --color-brand-dim: var(--brand-dim); /* status hues as utilities → text-status-done, bg-status-live … */ --color-status-live: var(--status-live); --color-status-done: var(--status-done); --color-status-waiting: var(--status-waiting); --color-status-review: var(--status-review); --color-status-broken: var(--status-broken); --color-status-rest: var(--status-rest); } /* ── 3. Theme ──────────────────────────────────────────────────────────── */ /* Dark is the default. */ :root { /* ground */ --bg-primary: #000000; --bg-section: #051823; /* text */ --text-primary: #E8E8EC; --text-secondary: #B0B0BC; /* glass: every surface is white at low opacity over the ground */ --glass-bg: rgba(255, 255, 255, 0.06); --glass-bg-hover: rgba(255, 255, 255, 0.1); --glass-border: rgba(255, 255, 255, 0.08); --glass-border-hover: rgba(255, 255, 255, 0.15); --input-border: rgba(255, 255, 255, 0.15); /* chrome */ --logo-display-light: none; --logo-display-dark: block; --nav-bg-scrolled: rgba(0, 0, 0, 0.85); } /* Light, chosen in the theme picker. */ [data-theme="light"] { --bg-primary: #F4F5F7; --bg-section: #EBEDF0; --text-primary: #1A1A2E; --text-secondary: #5A5A72; --glass-bg: rgba(255, 255, 255, 0.65); --glass-bg-hover: rgba(255, 255, 255, 0.8); --glass-border: rgba(0, 0, 0, 0.06); --glass-border-hover: rgba(0, 0, 0, 0.12); --input-border: rgba(0, 0, 0, 0.12); --nav-bg-scrolled: rgba(255, 255, 255, 0.85); } /* System, when the device asks for light. The same values as light. */ @media (prefers-color-scheme: light) { [data-theme="system"] { --bg-primary: #F4F5F7; --bg-section: #EBEDF0; --text-primary: #1A1A2E; --text-secondary: #5A5A72; --glass-bg: rgba(255, 255, 255, 0.65); --glass-bg-hover: rgba(255, 255, 255, 0.8); --glass-border: rgba(0, 0, 0, 0.06); --glass-border-hover: rgba(0, 0, 0, 0.12); --input-border: rgba(0, 0, 0, 0.12); --nav-bg-scrolled: rgba(255, 255, 255, 0.85); } } /* ── 4. Status ─────────────────────────────────────────────────────────── */ /* Color is meaning. 6 meanings, one muted color each, the same in every * app: a task, a job, an order, a translation. Pick the meaning, never the * color. * * live running right now in progress, sending, processing * done finished or healthy published, paid, sent, connected * waiting queued or paused scheduled, pending, stale * review needs a human look machine translation, awaiting approval * broken failed, needs you failed, disputed, error * rest inert draft, cancelled, archived * * A muted tint with same-hue text, never a saturated fill, so a list reads * at a glance without any chip shouting. Brand blue is not a status: it is * links and actions. Every text color clears 4.5:1 on its tint, both themes, * and 5:1 alone on the page, so one hue serves chip text, icons, bars and the * heartbeat. Only live moves. */ :root { /* each meaning: the hue (text, dots, bars), then the chip's tint */ --status-live: #6EA8DC; --status-live-bg: #143A4E; --status-done: #6DB58E; --status-done-bg: #22402F; --status-waiting: #D9985F; --status-waiting-bg: #4E3524; --status-review: #9D9AE8; --status-review-bg: #2F2C4E; --status-broken: #E38678; --status-broken-bg: #4E2C29; --status-rest: var(--text-secondary); --status-rest-bg: #16181D; } [data-theme="light"] { --status-live: #2A6099; --status-live-bg: #E3EEF7; --status-done: #2C7049; --status-done-bg: #E4F0E8; --status-waiting: #A4501C; --status-waiting-bg: #FAEBDD; --status-review: #4F4AB8; --status-review-bg: #ECEBFA; --status-broken: #B03A2C; --status-broken-bg: #FBE8E5; --status-rest-bg: #FFFFFF; } @media (prefers-color-scheme: light) { [data-theme="system"] { --status-live: #2A6099; --status-live-bg: #E3EEF7; --status-done: #2C7049; --status-done-bg: #E4F0E8; --status-waiting: #A4501C; --status-waiting-bg: #FAEBDD; --status-review: #4F4AB8; --status-review-bg: #ECEBFA; --status-broken: #B03A2C; --status-broken-bg: #FBE8E5; --status-rest-bg: #FFFFFF; } } /* The chip: Done. A pill, a 1px border in its own hue at 25%, an optional 12px icon. */ .status-chip { --_hue: var(--status-rest); --_tint: var(--status-rest-bg); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--_hue) 25%, transparent); background: var(--_tint); color: var(--_hue); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; } .status-chip > svg { width: 12px; height: 12px; flex: none; } /* Ended, not waiting: cancelled, refunded, expired. Still at rest, struck through so it never reads as a draft. */ .status-chip[data-ended] { text-decoration: line-through; text-decoration-thickness: 1px; } :is(.status-chip, .status-bar, .status-beat)[data-status="live"] { --_hue: var(--status-live); --_tint: var(--status-live-bg); } :is(.status-chip, .status-bar, .status-beat)[data-status="done"] { --_hue: var(--status-done); --_tint: var(--status-done-bg); } :is(.status-chip, .status-bar, .status-beat)[data-status="waiting"] { --_hue: var(--status-waiting); --_tint: var(--status-waiting-bg); } :is(.status-chip, .status-bar, .status-beat)[data-status="review"] { --_hue: var(--status-review); --_tint: var(--status-review-bg); } :is(.status-chip, .status-bar, .status-beat)[data-status="broken"] { --_hue: var(--status-broken); --_tint: var(--status-broken-bg); } :is(.status-chip, .status-bar, .status-beat)[data-status="rest"] { --_hue: var(--status-rest); --_tint: var(--status-rest-bg); } /* The bar:
. A 6px track in glass, filled with the meaning's hue. */ .status-bar { --_hue: var(--status-rest); height: 6px; border-radius: 999px; background: var(--glass-bg-hover); overflow: hidden; } .status-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--_hue); transition: width 400ms ease; } /* The heartbeat: . An 8×16 capsule, 4px radius, solid in the meaning's hue, for anything that runs: an agent, a job, a connector. Still unless it is live. */ .status-beat { --_hue: var(--status-rest); display: inline-block; flex: none; width: 8px; height: 16px; border-radius: 4px; background: var(--_hue); } /* Motion is reserved for live: the chip's icon breathes, the heartbeat sends out a soft ring and the bar's fill carries a slow sheen. Broken stays still on purpose: red already says it, and a blink would shout. */ .status-chip[data-status="live"] > svg { animation: status-breathe 1.6s ease-in-out infinite; } .status-beat[data-status="live"] { animation: status-beat 1.6s ease-out infinite; } .status-bar[data-status="live"] > span { background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%); background-size: 200% 100%; background-color: var(--_hue); animation: status-sheen 1.8s linear infinite; } @keyframes status-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes status-beat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--_hue) 55%, transparent); } 70% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--_hue) 0%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes status-sheen { from { background-position: 150% 0; } to { background-position: -50% 0; } } @media (prefers-reduced-motion: reduce) { .status-chip[data-status="live"] > svg, .status-beat[data-status="live"], .status-bar[data-status="live"] > span { animation: none; } } /* ── 5. Motion ─────────────────────────────────────────────────────────── */ /* The values the sites already use, measured from the code: typed in * globals.css, or Tailwind's own defaults. framer-motion cannot read CSS * variables, so a site that animates with it mirrors these in * src/lib/motion.ts. Change a value in both. */ :root { --ease-standard: ease; /* card light, FAQ rows, theme swap */ --ease-tailwind: cubic-bezier(0.4, 0, 0.2, 1); /* every Tailwind transition-* class */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* Tailwind ease-out */ --dur-micro: 150ms; /* Tailwind's default: color shifts, button hover */ --dur-hover: 200ms; /* duration-200: rows, links, icons */ --dur-short: 250ms; /* .faq-item */ --dur-surface: 300ms; /* card light, theme swap, image zoom */ --dur-panel: 400ms; /* card shadow, status bar fill */ --rise: 20px; /* how far an entrance travels */ --stagger: 60ms; /* the gap between items in a grid */ } /* Reduced motion. When the device asks for less, nothing travels: * animations finish at once and stop looping, a hover becomes a quick fade, * anchors jump instead of glide. A spinner keeps turning, because it says * "still working", and opts anything else in. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 100ms !important; scroll-behavior: auto !important; } .animate-spin, [data-motion="essential"] { animation-duration: 1s !important; animation-iteration-count: infinite !important; } } ``` ## Do's and Don'ts ### Do - Use the file as supplied, on the background it was made for. - Sentence case for headings, pills and buttons - Digits, not spelled-out numbers - Reference the token, so the color follows the theme. - Use green only for a real state, such as live, verified or done. - Pick the radius by what the element is, such as rounded-lg for a card and rounded-full for a pill. - American English - Digits - Full sentences - Fade a section up the first time it scrolls into view - Stagger a grid so it arrives in order - Light a card's surface on hover - Pulse only what is live - Use the tokens, never a typed duration ### Don't - Do not stretch or squash the mark. Scale both sides together. - Do not add a shadow, glow, gradient or outline. - Do not rotate, skew or tilt the mark. - Do not recolor the mark or place it on a background that hides it. - Do not crop the logo or use part of it on its own. - Do not set the name in type and call it the mark. - All-caps headings - A second typeface - Em dashes - Do not hard-code a hex value in a component. - Do not use an accent color as a large flat fill. - Do not invent a new radius for a single component. - Do not use square corners on a button or an input. - Em dashes - British spellings - Sentence fragments - Filler adjectives: powerful, robust, seamless - Exclamation marks in interface copy - Lift, scale or tilt a card - Rotate or bounce an icon - Loop anything that isn't live, verified or a marquee - Zoom an image past 1.05 - Ship motion without a reduced-motion fallback ## Iteration Guide How to build with this system without breaking it. An agent reading `design.md` gets these same rules. | Rule | Why | |---|---| | Start from the meaning, then use its token. Never type a hex. | The value lives in one file, so a change reaches every site. | | Change a value in `tokens.css` only, then run `npm run tokens:sync`. | Each site's copy is generated, and the check fails on drift. | | Build from the components on this page. | A new page composes them. It never writes its own card, button, nav or footer. | | Design dark first, then check light. | Light is designed rather than inverted, so it needs its own look. | | Words come from the CMS. | A component never carries its own copy, so every word can be edited and translated. | | In status, only live moves. | Motion means something is running right now. | ## Known Gaps An honest list, so nobody builds on something that is not decided. | Gap | Where it shows | |---|---| | Form fields have no focus ring, except the hub search bar. | Contact, testimonial and newsletter forms | | Touch targets are 30 to 36px. There is no 44px rule yet. | Mobile menu, search and hub buttons | | Resting cards use 4 slightly different shadows, not one scale. | Light mode cards | | Article text drops to 16px at 640px, while body text changes at 768px. | Articles on screens between 641px and 767px | | Form fields use a 12px radius on contact and 8px on testimonials. | Contact and testimonial forms | | About 29,000 brand colors are still typed by hand outside the global stylesheets. | TypeScript and page stylesheets | | Navs switch to phone layouts at 3 widths: 768px, 1024px and 1100px. | Sales navs, top navs and hub pages | | Sidebars come in 5 widths: 248, 260, 264, 280 and 60px collapsed. | Hub, admin, app and drawer sidebars | | Footer copies have drifted: 9 versions of the hub footer, 2 copyright styles and 2 platform disclaimer wordings. | Footers across the sites |