# Astroline brand guidelines for AI-made content > Public version · 2026-11-04 · Astroline team · www.astroline.com/en/marca > > This guide has two uses: **as context for any AI tool** (Claude, v0, Lovable, Cursor, Higgsfield, Midjourney, Runway, Veo, ElevenLabs…) that produces anything on Astroline's behalf, and **as a review checklist** for the person who publishes it. > > The source of truth is the live website (www.astroline.com, October 2026 redesign) and its code. Every value in this document comes from the website's code. If the code changes, this guide is updated with it. --- ## 1. How to use this guide Everything made with AI on Astroline's behalf has to look as if it were made by the same team that built www.astroline.com, and never “made by an AI”. **Applies to:** websites and landing pages, platforms and dashboards, videos and animations, images and creatives, social media and blog posts, emails, presentations and any customer-facing text. **How to give it to an AI:** 1. Paste the whole guide as project instructions or system context, not a summary. For tools with a small context window, paste at least sections 2–8, 11 and the relevant base prompt. 2. Add the base prompt from [section 26](#26-base-prompts) (web, image, video or text) and then your brief. 3. Always state the **market** (Mexico, Spain, United Kingdom or rest of Europe, US): it changes what can be said. 4. Check the result against the [checklist](#27-checklist-before-publishing). If it fails a point marked **Never**, it is not published. **Priorities:** - If the tool suggests something that clashes with the guide, the guide wins. - **Never** and **Always** are not negotiable; everything else is a default that can be departed from with a good reason. - When in doubt, copy what the home page already does. --- ## 2. Who Astroline is Astroline is a voice operator (carrier) for high-volume operations, and everything we make has to tell a single idea: **with Astroline, more calls end in a conversation.** We are the *AI-first* carrier network, for campaigns run with AI agents and with people. **Who we talk to:** contact centres, sales and collections teams that make millions of calls a month, and contact centre platform integrators (Genesys, inConcert, Voximplant). They are technical and operations people: they value data, speed and not being sold hot air. **Markets and website version:** | Market | Path | Language | Form of address | | --- | --- | --- | --- | | Mexico | `/mx` | Mexican Spanish | Usted (formal) | | Spain | `/es` | Spanish (Spain) | Tú (informal) | | United Kingdom and rest of Europe | `/en` | British English | You | | US | `/us` | American English | You | ### What we sell and where it can be mentioned | Product or capability | What it is, in one line | Markets | | --- | --- | --- | | SIP Trunk | Top-quality SIP trunk over a private multicloud network, redundant end to end | All | | Global voice | Voice in more than 85 countries over our private network | All | | Numbering | Local and international numbers, with a local prefix | All | | 400 numbering | The numbering that sales calls in Spain must go out on (not debt collection, customer service or recruitment) | Spain only | | VHunter | Voicemail detection in early media, by frequency, before the call is answered | All | | WhatsApp Calling | Voice calls over WhatsApp Business | All | | Spam detection | We detect when a number is flagged as spam | Mexico only | | Number rotation | Spreading calls across the customer's numbers | Mexico only | | SMS | Follow-up by SMS | Mexico only | | ASR Vooster | A boost to contact rate | Mexico only | | Omnichannel dialling | Predictive, progressive and power dialling technology that we integrate | All | | AI agents | Conversational voice, WhatsApp and social media agents that we integrate or deploy | All | | Astra AI | Our WhatsApp agent for talking to Astroline | All | The “Number rotation” and “ASR Vooster” pages only exist on `/mx`; in the other languages they redirect with a 307 (`next.config.mjs`, `src/lib/mercados.js` → `SOLO_MEXICO`). ### Facts that can be used as they are - Voice in **more than 85 countries**. - POPs in **Madrid, Amsterdam, Virginia, Monterrey, Bogotá, Lima and São Paulo**. - **ISO 27001:2022** certification. - Astra AI on WhatsApp: **+34 910 88 86 20** (Spain and the English website) and **+52 1 55 9990 7556** (Mexico and US) — `src/lib/astra.js`. **Unconfirmed, do not use yet:** the uptime (99.99% or 99.999%), the total number of POPs (11 or 7) and ISO 27701. Neither `public/llms.txt` nor the old website is a valid source: they describe the previous positioning, centred on Microsoft Teams. ### Names that are always written the same way - **VHunter**, one word, with a capital V and H. - **ASR Vooster**, never “Booster”. - **SIP Trunk**, **WhatsApp Calling**, **Astra AI**, **Astroline** (never ASTROLINE or “astroline” in running text; the logo is lower case, the name is not). ### Third-party brands - **Never** name or show PulseDial, 008 Agent or 008 Engage as our product. Talk about the concept: «marcación omnicanal» (omnichannel dialling), «agentes IA de voz» (AI voice agents), «agentes IA de WhatsApp» (AI WhatsApp agents). They only appear on the Partners page, as one more partner, on the same level as Genesys. - Microsoft and Teams never take centre stage: they only appear on the corporate telephony page. - Integration logos (Genesys, Salesforce, HubSpot, Zendesk, Zoho, Five9, Talkdesk, Sprinklr, Avaya, NiCE, Voximplant, inConcert, Vapi, Retell, ElevenLabs, Pipedrive, Freshdesk) always in their official version, from `public/images/marcas`, through `src/lib/marcas.js` and the `` component. Never recoloured or redrawn. For NiCE, use the logo, never its “smile” on its own. --- ## 3. Voice and tone Astroline speaks like a network engineer who knows how to sell: specific, confident and unadorned. The fact comes before the adjective, and we only promise what the network delivers. ### Five principles | Principle | Like this | Not like this | | --- | --- | --- | | Specific before pretty | «Detectamos el buzón antes del descuelgue.» (“We detect voicemail before the call is answered.”) | «Revolucionamos la detección con IA de última generación.» (“We are revolutionising detection with state-of-the-art AI.”) | | The customer's outcome | «Y cuida tu tasa de contacto.» (“And protect your contact rate.”) | «Nuestra plataforma ofrece múltiples funcionalidades.» (“Our platform offers multiple features.”) | | Promises we keep | «Alta tasa de efectividad», «gran ahorro en buzones» (“High success rate”, “big savings on voicemail”) | «100 % de buzones detectados», «nunca», «siempre», «garantizado» (“100% of voicemails detected”, “never”, “always”, “guaranteed”) | | Confident, not grandiose | «Más que un operador.» (“More than a carrier.”) | «El operador líder del mercado», «el mejor del mundo» (“The market-leading carrier”, “the best in the world”) | | Technical but readable | «Reconocemos el buzón por la frecuencia de la señal, no por patrones del saludo.» (“We recognise voicemail by the frequency of the signal, not by greeting patterns.”) | Unexplained acronyms or paragraphs of specifications | ### The two-beat headline It is the brand's signature. Every headline has two short sentences, each with its own full stop: the first states the fact and the second, what the customer gains. On screen, the first is in grey (`--soft` #5c5c68) and the second in black (`--text` #0b0b10, inside ``), running on in the same line, with no line break. Only in the closing block does each sentence go on its own line. - «Millones de llamadas al mes. *Con la máxima contactación.*» (Mexico; “Millions of calls a month. *With the highest contact rate.*”) - «La red de operador AI-first. *Para campañas con IA y personas.*» (Spain; “The AI-first carrier network. *For campaigns with AI and people.*”) - «Sabe cuándo un número entra en spam. *Y cuida tu tasa de contacto.*» (“Know when a number is flagged as spam. *And protect your contact rate.*”) - «Detectamos el buzón antes del descuelgue. *Y el contacto sigue por WhatsApp.*» (“We detect voicemail before the call is answered. *And the contact continues on WhatsApp.*”) - «Tu voz, sobre una red privada. *SIP Trunk de máxima calidad.*» (“Your voice, over a private network. *Top-quality SIP Trunk.*”) - «Tu operación está en España. *Tu voz llega a más de 85 países.*» (“Your operation is in Spain. *Your voice reaches more than 85 countries.*”) - «Más que un operador. *La tecnología para sacarle partido.*» (“More than a carrier. *The technology to make the most of it.*”) - «Hablemos de tu operación. *Y de cómo contactar a más clientes.*» (“Let's talk about your operation. *And how to reach more customers.*”) Hyphenated words (“AI-first”) are never split across lines (`.hr-sin-corte { white-space: nowrap }`, helper `sinCortes` in `HeroContactacion.jsx`). ### Form of address by piece | Piece | Spain (es) | Mexico (mx) | English (en, us) | | --- | --- | --- | --- | | Website and platforms | Tú («Habla con un experto») | Usted («Hable con un experto», «Sepa cuándo…») | You, direct (“Talk to an expert”) | | Blog and LinkedIn | Tú | Tú | You | | Emails to leads | Tú | Usted (default, for consistency with the website) | You | | Videos and ads | Tú | Usted (default) | You | The English on `/en` is British (*dialling*, *optimise*, *dialler*) and on `/us`, American (*dialing*, *optimize*, *dialer*). Mexico uses Mexican Spanish: «celular», not «móvil», when talking about the person's mobile phone; «lada» for the local area code. ### What is said in each market | Market | Main message | Never | | --- | --- | --- | | Mexico | Millions of calls with the highest contact rate: SIP Trunk, spam and voicemail detection, number rotation and SMS. Voice in 85 countries as an extra | «Número quemado» (“burnt number”), «numeración siempre limpia» (“always-clean numbering”) | | Spain | AI-first carrier network: SIP Trunk in Spain, 400 numbering for sales campaigns, voicemail detected before the call is answered and voice in 85 countries over a private network | Spam, antispam, number rotation, SMS | | United Kingdom and Europe | SIP Trunk in the UK, omnichannel dialling, voicemail detection and voice in 85 countries | Spam, rotation (Ofcom considers it misuse), SMS | | US | The same as the UK, with SIP Trunk in the US | Spam, rotation (the FCC is considering restricting it), SMS | Outside Mexico, the filters in the contact flow are «Red privada», «Enrutamiento» and «Buzones» (private network, routing, voicemail), and the event is «Ruta óptima» (optimal route). Calls that go unanswered continue on WhatsApp; SMS only exists in Mexico. In code: `conAntispam(locale)` and `numero400()` in `src/lib/mercados.js`, and the `antispam` flag in `home-components/rediseno/region.js`. ### The two rules that are never broken 1. **Voicemail:** never say that voicemail calls «no se facturan», «no cuestan» or «llamada no facturada» (“are not billed”, “cost nothing”, “unbilled call”). Do say: «gran ahorro en buzones» (“big savings on voicemail”) and «alta tasa de efectividad en la detección» (“high detection success rate”). 2. **Spam:** never promise to dial «siempre con numeración limpia» (“always with clean numbers”) or to «sustituir los números en spam por otros limpios» (“replace spam-flagged numbers with clean ones”). Do say: «detectamos cuándo un número entra en spam» (“we detect when a number is flagged as spam”) and, only in Mexico, «rotación de numeración» (“number rotation”), without linking it to «limpio» (“clean”). These two rules also apply to things that do not look like text: event labels in animations, dashboard states, on-screen text in videos and voice-overs. --- ## 4. Writing rules ### Capitalisation - Headlines, buttons, labels, badges and kickers take an **initial capital** and the rest lower case: «Agente IA de voz», «Antispam», «Habla con un experto». The same in English: “Talk to an expert”, never *Title Case*. - **Never** all-lower-case labels («antispam») or whole words in capitals («NO facturada», «GRATIS»: “NOT billed”, “FREE”), nor `text-transform: uppercase`. Acronyms are fine: IA (AI), SIP, SMS, POP, ASR, CRM. ### Punctuation and symbols | Case | Rule | Example | | --- | --- | --- | | Headlines | Each part ends with a full stop | «Más que un operador. La tecnología para sacarle partido.» (“More than a carrier. The technology to make the most of it.”) | | Buttons, labels, states | No full stop at the end | «Ver todos los casos», «Conectada» (“See all case studies”, “Connected”) | | Quotations and sample messages | Angle quotes in Spanish, curly quotes in English | «…te confirmo la cita del jueves.» / “…” | | Flows and results | Arrow → with spaces | «Buzón detectado → WhatsApp» (“Voicemail detected → WhatsApp”) | | Data in a label | Middle dot · with spaces | «Prefijo local · 8 provincias» (“Local prefix · 8 provinces”) | | Something in progress | Single-character ellipsis (…) | «Llamando…» (“Calling…”) | | Asides | Commas or brackets; at most one em dash per piece | — | ### Figures, times and phone numbers | Data | Spain | Mexico | English | | --- | --- | --- | --- | | Thousands and decimals | 1.250.000 · 3,4 kHz | 1,250,000 · 3.4 kHz | 1,250,000 · 3.4 kHz | | Percentage | 99,99 % (with a space) | 99.99% | 99.99% | | Coverage | «más de 85 países» | «más de 85 países» | “85+ countries” | | Time | 24 h: 10:00, 17:00 | 24 h: 10:00, 17:00 | 10:00 (en), 10:00 a.m. (us) | | Phone numbers | +34 910 88 86 20 | +52 1 55 9990 7556 | +44 20 7946 0482 | - In code, figures are always formatted with the market's `toLocaleString(locale)` (`region.formato` in `region.js`), never by hand. - In running text, the numbers one to nine are written as words when they are not data («tres correos», “three emails”); data always goes in figures («85 países», «8 provincias»: “85 countries”, “8 provinces”). - Figures that change on screen use fixed-width digits (`font-variant-numeric: tabular-nums`). - **In examples and creatives, never a real person's phone number.** Use masked numbers (“+52 55 ··· 4821”, “+34 91 ··· 2273”) or fictional ranges (UK: 020 7946 0xxx; US: 555-01xx). In Spain, sample outbound campaigns go out on `+34 400 …` (`numero400()`). - Sample conversations use common first names (on the website, “Ana”) and real industry cases: confirming an appointment, a payment reminder, following up a missed call. ### Lengths | Piece | Maximum | | --- | --- | | Each part of the headline | 8 words | | Subheading or lead paragraph | 40 words, 2 sentences | | Title of a feature or card | 6 words | | Text of a feature or card | 1 sentence, 20 words | | Label, badge or state | 3 words | | Button | 4 words, starts with a verb | | On-screen text in video | 7 words on screen at a time | ### Calls to action | Use | Spain | Mexico | English | | --- | --- | --- | --- | | Primary (demo with the team, goes to `/contacto`) | Habla con un experto | Hable con un experto | Talk to an expert | | Secondary (WhatsApp with Astra AI) | Habla con Astra AI | Hable con Astra AI | Chat with Astra AI | | Link to a product | Conocer el + producto («Conocer el marcador omnicanal») | Same | Discover + product (“Discover the omnichannel dialler”) | | Listing | Ver todos los + objeto | Same | See all + object (“See all case studies”) | Buttons only lead to booking a demo or talking to Astra; to go to another page, use a text link with an arrow (`.hr-enlace`), which does not compete with the CTAs. Never «Solicita información», «Empieza gratis», «Descubre más» or «Haz clic aquí» (“Request information”, “Start for free”, “Find out more”, “Click here”). ### Vocabulary | We use | Instead of | | --- | --- | | Contactación, tasa de contacto (contact rate) | Alcance, engagement (reach, engagement) | | Buzón, detección de buzones (voicemail, voicemail detection) | Contestador (answering machine), voicemail (in Spanish copy) | | Antes del descuelgue, early media (before the call is answered, early media) | En tiempo real, on its own (“in real time”) | | Agente IA de voz, agente IA de WhatsApp (AI voice agent, AI WhatsApp agent) | Bot, robot, asistente virtual (virtual assistant), chatbot | | Marcación omnicanal, marcador predictivo (omnichannel dialling, predictive dialler) | Third-party brand names | | Red privada multicloud (private multicloud network) | La nube, infraestructura de última generación (the cloud, state-of-the-art infrastructure) | | Operación, campañas (operation, campaigns) | Negocio, soluciones, in the abstract (business, solutions) | | IA (in Spanish) | AI, except in “AI-first” | **Banned words and phrases** (they give away AI-written text or overpromise): revolucionario, disruptivo, de vanguardia, de última generación, potenciar, desbloquear, sin fisuras, holístico, sinergia, líder, «en el mundo actual», «no es solo X, es Y», «imagina…», «¿y si te dijera…?», «el futuro ya está aquí» (revolutionary, disruptive, cutting-edge, state-of-the-art, empower, unlock, seamless, holistic, synergy, leader, “in today's world”, “it's not just X, it's Y”, “imagine…”, “what if I told you…?”, “the future is already here”), lists of three adjectives in a row, and emojis in any brand piece. --- ## 5. Logo The logo is the word “astroline” in lower case with a coloured wedge at the foot of the “a”; it is always used from the official file and **an AI never draws it**. ### Versions | Version | File | Letters | Wedge | When | | --- | --- | --- | --- | --- | | Logo for light backgrounds | `public/images/logo-black.svg` | #242424 | Purple #8331A7 | Default: white, #fafafa, light greys | | Logo for dark backgrounds | `public/images/logo-white.svg` | #FFFFFF | Mint #3FCEA6 | Black #0b0b10 and dark gradients (ink, titanium, night, graphite) | | Symbol for light backgrounds | `public/images/astro-white-icon.svg` | #242424 | Purple #8331A7 | Favicon, avatar, watermark, stamp inside an illustration | | Symbol for dark backgrounds | `public/images/astro-black-icon.svg` | #FFFFFF | Mint #6CD1B0 | The same, on dark | | Favicon | `src/app/[locale]/favicon.ico`, `public/favicon.ico` (512 px) | #242424 | Purple | Browser tab | | Email signature | `public/images/logos-astroline/logo_firmas.webp` / `.png` | #242424 | Purple | Email signatures and templates | Note: the symbol file names are the wrong way round. `astro-white-icon` is the dark one (for white backgrounds) and `astro-black-icon` the white one (for black backgrounds). **Obsolete, do not use in new pieces:** `public/images/astroline.svg` (the “A” with a pink #FE00E5/#FD51E2, purple and blue #3F87A6 gradient) and `public/images/black.svg` / `public/images/favicon.svg` (purple circle with mint dots). They still appear in old components (`AstrolineServices.jsx`, `Testimonials.jsx`). ### Sizes - Logo `viewBox`: 2224 × 448 → ratio 4.96 : 1. On the website: 109 × 22 px in the menu (`.hn-logo img { height: 22px }`) and 129 × 26 px in the footer. - Minimum size: 88 px wide on screen and 25 mm in print. Below that, use the symbol, which holds up down to 16 px (13–14 px as a stamp inside panels). - Clear space: around the logo, at least the height of the “a” kept free of text, borders and other logos. - In video: logo in the closing shot, centred, at 25–30% of the frame width in 16:9 and 45–50% in 9:16. - In HTML: always `Astroline` (or `next/image` with `alt="Astroline"`), never the name typeset in a font. ### Incorrect use - Generating, redrawing or “improving” it with AI or with a typeface. Image and video models distort the letters: the logo always goes on afterwards, on top, from the SVG. - Changing the colour of the letters or the wedge, or adding a gradient, shadow, glow, outline or 3D effect. - Stretching, rotating or slanting it, or separating the wedge from the “a”. - Setting it in capitals or writing “Astroline” as text instead of using the logo. - Placing it over a busy area (a noisy photo, the intense part of a gradient) or over greens where the mint wedge disappears. - Putting it inside a coloured box, pill or circle. ### Alongside other brands With a partner or a customer, the two logos sit at the same optical height, separated by a 1 px vertical line in #e6e6ea, with clear space on each side. Astroline goes first, except in the partner's own pieces. In integration listings, other brands' logos go in their official version, at the same height (18–22 px) and in a single row or a regular grid. In the customer logo strip, white logos are turned black with `filter: brightness(0); opacity: .75`. --- ## 6. Colour Astroline is a light-themed brand: white and grey backgrounds, near-black text, purple #8331A7 **only in details** and strong colour reserved for the intense gradients of the illustrations. When something needs to stand out, use black, never purple. ### Neutrals and text | Token | Hex | Use | | --- | --- | --- | | `--bg` | #fafafa | Page background | | White | #ffffff | Cards with text, labels, secondary buttons | | `--panel` | #f2f2f4 | Large block panels: flat grey, no gradient | | Band (franja) | #f3f3f5 | Background of “band” sections and of the top strip (`--panel` becomes #fafafa inside) | | Band over grid | rgba(236, 236, 241, 0.6) | Band inside `.hr-pagina`, so that the dots show through | | `--line` | #e6e6ea | Grid lines and dividers | | Inner line | #f0f0f3 | Dividers inside cards, tab track | | `--edge` | #e4e4e8 | Border of cards, labels and tiles | | Light button border | #dcdce2 (hover #b9b9c2) | Secondary button | | `--cross` | #b4b4bd | Crosses at the grid vertices; inactive modes | | Dimmed dot | #c4c4cc | Inactive status dot | | Hover | #f4f4f6 | Background of a list item on hover; incoming bubble | | Menu highlight | #f7f7f9 | Highlighted cards in the menu | | `--text` | #0b0b10 | Main text, second part of the headline, primary button, active states, outgoing bubble (hover #2a2a33) | | Label text | #3a3a44 | Text inside labels, badges and bubbles | | `--soft` | #5c5c68 | First part of the headline, lead paragraphs, body | | `--muted` | #8a8a96 | Secondary data and captions. Not for reading text (contrast 3.3 : 1 on #fafafa) | | Logo | #242424 | Only the letters of the logo | ### Accent and status colours | Colour | Hex | Use | Never | | --- | --- | --- | --- | | Astroline purple | #8331A7 | Icons in labels, kickers and features; status dots, 3 px progress bars, 10 px pods, 3 px wave bars; thin borders (at 35–45%); focus ring (at 14%); grid pulses; highlighted 3D pieces; globe arcs | Section background, button, bubble, active pill, block, card, soft tint or lavender | | Mint | #3FCEA6 / #6CD1B0 | Only the logo wedge on dark | As an interface colour | | Status red | #e5484d | Spam detected, incident, error | Decoration | | Status green | #30a46c | Connected, rotation, all good | Decoration | | Status amber | #e8a33c | Voicemail detected, warning | Decoration | **Working rule for purple:** as a fill, only in **data marks and signals**: status dots (5–6 px), pods (10 px), wave bars (2–3 px), progress bars (2–3 px), chart bars (up to about 14 px wide) and the highlighted band in a spectrum. Never on **surfaces**: backgrounds, buttons, bubbles, pills, tabs, cards or blocks. Everywhere else, purple can only be a stroke, a border, an icon or the text of an icon. Status backgrounds on light: alert #fff6f6 (border rgba(229,72,77,.55)), ok #f3fbf6 (border rgba(48,164,108,.55)), warning #fffaf0 (border rgba(232,163,60,.6)). On a gradient, the event is filled with its status colour: rgba(229,72,77,.92), rgba(36,158,98,.92), rgba(222,140,30,.94), with white text. ### Intense (“vivid”) gradients All illustrations, hero backdrops and covers use the same scheme: **two radial glows in opposite corners over a base colour, with grain on top.** Each card has a different palette from the one next to it, and each page has its own backdrop, tied to what it is about. The full code is in [section 17](#17-vivid-gradients-and-grain-in-code). **Card palettes** (they alternate in this order with `nth-child(6n + k)`): | Palette | Glow 1 | Glow 2 | Base | | --- | --- | --- | --- | | Fire (`--vivo-1`) | #ffd23f top left | #ff2e4d bottom right | #ff7a1a | | Ocean (`--vivo-2`) | #43f0ff top right | #0031e0 bottom left | #1672ff | | Lime (`--vivo-3`) | #e6ff3d top left | #009c63 bottom right | #32cc72 | | Pink (`--vivo-4`) | #ffc29a top right | #ff1f68 bottom left | #ff5c7c | | Turquoise (`--vivo-5`) | #2dffcb bottom left | #0a7cff top right | #00bfb3 | | Ink (`--vivo-6`) | #2a5cff bottom left | #ff6a2b top right | #0e0f16 | **Backdrops by topic** (one per page, never repeated): | Topic | Backdrop | Glow 1 · Glow 2 · Base | | --- | --- | --- | | Home | Ocean | `--vivo-2` | | Omnichannel dialler | Pink | `--vivo-4` | | Contact centre | Fire | `--vivo-1` | | Rotation | Turquoise | `--vivo-5` | | Contact | Ink | `--vivo-6` | | WhatsApp | WhatsApp greens | #c8ffd8 · #075e54 · #25d366 | | SIP Trunk | Titanium | #2ee6ff · #05070c · #1d2635 | | Numbering | Dawn | #1f6dff · #ff7a59 · #58adff | | VHunter (voicemail) | Amber | #f06a00 · #ffd23f · #ff9f1a | | ASR Vooster | Acid lime | #f4ff5a · #0f8a3c · #8fdc2a | | AI voice agents | Ink with pink | #2a5cff · #f02f65 · #0e0f16 (`--vivo-008`) | | AI WhatsApp agents | Night with aurora | #1de9b6 · #ffd23f · #0d1117 (`--vivo-aurora-noche`) | | Sales | Crimson | #ffb199 · #b8002e · #ff3b3b | | Collections | Navy and gold | #ffcf4a · #04103a · #0f2f7a | | Corporate telephony | Slate | #a5dcff · #111827 · #4b5d75 | | Education | Notebook | #ffe14d · #0038c7 · #2f7dff | | Professional services | Petrol | #ff9a5a · #022b33 · #0c6170 | | Energy | Volt | #ffe600 · #9dff3a · #16171c | | Tourism | Caribbean | #ff9c6b · #007a8a · #18c6c0 | | Other sectors | Sand | #ffd9a3 · #a83a16 · #e2803c | | About us | Graphite | #8ec5ff · #2a1d17 · #23262f | | Partners | Aurora | #2de2ff · #c6ff3d · #0f9c86 | | Infrastructure | Night | #1fb6ff · #000000 · #0a1430 | For a new topic, create a new backdrop with the same scheme and a colour associated with what it is about (money coming back, the network at night, voicemail in amber). ### Gradient rules - **No gradient may produce purple or lavender.** That is why pink is never blended over blue. - No pastel meshes (lilac, soft yellow, sky blue, cream): they look flat and “AI-made”. - Always with grain (see [section 17](#17-vivid-gradients-and-grain-in-code)). - Anything placed loose on top (text, bars, lines) turns white: text to rgba(255,255,255,.92), secondary bars to rgba(255,255,255,.5), baselines to rgba(255,255,255,.55) and the highlighted bar in solid white. On light gradients (lime, yellows), loose text goes in black. - The gradient fills the backdrop edge to edge; never a box with a gradient inside another one. ### Proportions in a piece As a reference: 70% light neutrals, 20% vivid colour in illustrations, 9% black (text and button) and 1% purple. Full black sections are ruled out: they were tried (a black globe, a black event strip) and did not fit. --- ## 7. Typography Everything is set in **General Sans**, a single family for headlines, body, buttons, labels, numbers and code. Mixing typefaces (a monospace for figures, a decorative serif) is the clearest sign of AI-made design and is forbidden. - **File:** `src/fonts/GeneralSans-Variable.woff2` (variable, weight axis 200–700). Outside the website: General Sans from Fontshare (Indian Type Foundry), free for commercial use. - **Fallback** if the tool cannot load fonts: Inter or `system-ui`, never Poppins (the old website's font) or a serif. - **Numbers:** always with fixed-width figures (`tabular-nums`), in the same General Sans. ``, `` and `` inherit the font. ### Weights | Weight | Use | | --- | --- | | 400 Regular | Body, lead paragraphs, subheadings | | 500 Medium | Headlines at every level, buttons, labels, kickers, large figures, menu | | 600 Semibold | Only to highlight a brand name within text (`.hr-marca b`, `.hr-producto-marca b`) | | 700 Bold | Not used. Astroline headlines are medium, not bold | ### Scale | Element | Desktop | ≤ 1100 px | ≤ 760 px | Weight | Line height | Letter spacing | Colour | | --- | --- | --- | --- | --- | --- | --- | --- | | Hero headline (`.hr-h1`) | 46 px | 40 px | 34 px | 500 | 1.04 | −0.025 em | soft + text | | Closing headline | 52 px | 52 px | 34 px | 500 | 1.04 | −0.025 em | soft + text | | Section headline (`.hr-h2`) | 42 px | 42 px | 31 px | 500 | 1.08 | −0.02 em | soft + text | | FAQ headline | 36 px | 36 px | 28 px | 500 | 1.08 | −0.02 em | text | | Highlighted figure (`.hr-caso-dato b`) | 56 px | 56 px | 44 px | 500 | 1.0 | −0.03 em | text | | Case study card title | 21 px | — | — | 500 | 1.3 | −0.01 em | text | | Product card title | 18 px | — | — | 500 | — | −0.01 em | text | | Hero subheading (`.hr-sub`) | 18 px | 18 px | 17 px | 400 | 1.45 | — | soft | | Lead paragraph (`.hr-lead`) | 18 px | — | — | 400 | 1.5 | — | soft | | FAQ question | 16.5 px | — | 15.5 px | 500 | — | — | text | | Feature title (`.hr-feat h3`) | 15.5 px | — | — | 500 | — | — | text | | Body and answers | 15 px | — | — | 400 | 1.6 | — | soft | | Feature and card text | 14.5 px | — | — | 400 | 1.55 | — | soft | | Menu (triggers) | 14.5 px | — | — | 500 | — | — | soft → text | | Kicker (`.hr-kicker`) | 14 px | — | — | 500 | — | — | soft | | Button | 15 px (14 px in the menu) | — | — | 500 | — | — | — | | Label (`.hr-tag`) | 13 px | — | — | 500 | — | — | #3a3a44 | | Floating badge (`.hr-flota`) | 12 px (12.5 px in events) | — | — | 500 | — | — | #3a3a44 | | Micro (axes, states, tiles) | 10.5–12 px | — | — | 400–500 | — | — | muted | ### Hierarchy and layout - Line length: subheadings up to 440 px, lead paragraphs up to 480 px (560 px in the closing block). - Left-aligned. Centred only in the closing block and at the end of a video. - No italics for emphasis (`em` has `font-style: normal`), decorative underlines, gradient text, outlines or shadows. - In slides and video the same relationship holds: headline in 500 with negative letter spacing and a single supporting weight (400). --- ## 8. Iconography Icons are from **Lucide** (`lucide-react` on the website, lucide.dev for any other tool), outline style, in purple #8331A7 and **free-standing, with no container**: never inside a coloured square, circle or pill. | Rule | Value | | --- | --- | | Family | Lucide only. No mixing with Heroicons, Material, Font Awesome, filled icons or emojis | | Stroke | 2 px by default (Lucide's own); 1.5 px on large illustration icons | | Size in a floating badge | 13 px | | Size in a label | 14 px | | Size in a kicker and in links | 15 px | | Size in a feature title | 16 px | | Size in a product card title | 20 px | | Gap to the text | 6–9 px | | Colour | Purple #8331A7 in labels, kickers, features and links; white on gradient; `--muted` for menu chevrons | | Container | None: no box, no circle, no background, no shadow | ### Reference icons | Concept | Lucide icon | | --- | --- | | AI agent (generic, instead of any brand) | `Bot` | | Voice, audio | `AudioLines` | | Private network | `Network` | | Routing | `Route` | | Security, antispam | `ShieldCheck` | | Rotation, distribution | `Split` | | Outbound call | `PhoneOutgoing` | | Integration | `Plug` | | Layers | `Layers` | | Global coverage | `Globe` | | Numbering | `Hash` | | Infrastructure | `Server` | | Contact centre | `Headset` | | Person | `UserRound` | | Data security | `Lock` | | Sectors | `GraduationCap`, `Hotel`, `Landmark` | | Question | `MessageCircleQuestion` | | Open FAQ | `Plus` (rotates 45° when opened) | | Link or next step | `ArrowRight` (moves 2 px on hover) | ### The AI agent in creatives It is shown with the free-standing `Bot` icon, in purple and with no container (component `home-components/rediseno/IconoIA.jsx`, prop `lado` in px, 18 by default). **Never** with the logo of a specific technology, a generated human face or a stock 3D robot. To signal “Astroline does this” inside a panel or an animation, use the `astro-white-icon.svg` symbol at 13–14 px. --- ## 9. Image, illustration and 3D Astroline images show the product at work (calls flowing, events, numbers, the network) over intense gradients with grain, or as 3D pieces in frosted glass and white clay. We do not use stock photos or flat illustrations. ### What to use, in order of preference 1. **Product creative:** the interface or the flow in action, with realistic data (voicemail panel, numbering wall, WhatsApp conversation, call counters). 2. **3D scene** in glass and clay: gates that filter, destination blocks, tubes the calls travel through, network nodes, the globe. 3. **Gradient backdrop with grain**, as the background for any of the above or for a headline. 4. **Real photography:** only of real Astroline people, offices and events, or of customers with their permission. ### Composing a creative - The gradient fills the panel full-bleed; on top go white pieces (cards with a 1 px border and a 9–16 px radius) or glass pieces. - On a light background, badges are white pills (rgba(255,255,255,.96)) with an `--edge` border, a 13–14 px purple icon and 12–13 px text in 500. On a gradient, they are “glass”: background rgba(255,255,255,.2), 1 px border rgba(255,255,255,.42) (0.5 px at 70% on 2x screens), white text and icon and shadow 0 6px 18px rgba(8,24,72,.12), **no `backdrop-filter`** because the scene underneath moves. On a still gradient, the glass pill does take `blur(16px) saturate(150%)`. - Live figures go in pills at the top left («2.461.208 llamadas hoy», «3.214 simultáneas»: “2,461,208 calls today”, “3,214 concurrent”). - Each event uses its status colour: red for spam, green for connected or rotated and amber for voicemail. - Phone numbers are masked or fictional, and portraits are small (18–24 px), circular, with a 1 px `--edge` ring, as a supporting element. The portraits on the website are fictional (`public/images/avatares/cliente-1…8.webp`). - Plenty of white space: at most three or four elements that can be read at a glance. ### 3D style - Main material: white frosted glass, translucent, with a clear coat that catches reflections and lets the gradient behind show through. - Secondary material: matte white clay for volumes (servers, nodes, blocks, the globe). - Accents: purple with a soft glow of its own only on highlighted pieces; status red, green and amber. - Light: one white directional light from the upper left and a soft studio environment; soft, very faint shadows on an invisible floor. - Orthographic camera, no perspective, near-frontal and slightly elevated. - The pieces stay still; what moves are the dots, the waves and a slow camera sway. - **Off-style:** chrome metal, neon, bloom, glowing particles, space backgrounds, realistic textures, lenses with strong perspective and humanoid robots. ### What is never used - Stock photos: smiling call centre agents with headsets, handshakes, people pointing at a screen. - AI-generated people presented as customers, employees or testimonials. Testimonials only with a real photo and a real name. - Flat corporate-style illustrations (long-armed characters), generic isometric servers and clouds. - Cliché AI imagery: brains, glowing neural networks, holograms, circuits, robotic eyes, magic sparkles. - Neon globes and maps with glowing arcs. The Astroline globe is light-coloured, made of clay, with calls in purple. - Text inside generated images. Text goes on afterwards, on top, in General Sans. ### Blog, covers and infographics - Blog covers are 3D pieces from the website's sections on a gradient backdrop with grain; each post gets a different variant. - Infographics follow the same palette: light background, white cards, figures in 500 and thin purple accents. - Blog posts are signed by the generic author «Equipo Astroline» (“Astroline team”): an AI-made text is never signed with the name of a real person. - Each post has its `mercados` field, so that Mexico-only content (antispam, rotation, SMS) does not appear on `/es`. --- ## 10. Video and motion Astroline's motion is calm and functional: it shows calls flowing, events appearing and figures going up, with smooth curves and no effects. A brand video looks like the home page in motion, not like a template ad. ### Interface motion | Movement | Duration | Curve | | --- | --- | --- | | Dropdown menu | 0.16 s, drops 4 px | ease | | Hover (colour, border, background) | 0.15–0.2 s | ease | | Colour change of a status text | 0.3 s | ease | | An event or a card appearing | 0.4 s, rises 6 px with a fade | ease | | Wall tile that is calling | 0.5 s (rises 18 px in Z) | ease | | Distribution bar | 0.6 s | ease | | Voice wave | 1.1 s, alternating | ease-in-out | | 3D filter lighting up | 1.3 s | quadratic ease-in-out | | A new event in the flow | every 2.3 s | — | | Demo cycle (modes, states) | 6 s, pieces staggered every 2 s | — | | Conversation bubbles | 7.5 s, staggered every 1.2 s | — | | Case study progress | 8 s | linear | | Logo strip | 70 s per loop | linear | The reference curve is the quadratic *ease-in-out*: `k < .5 ? 2k² : 1 − (−2k + 2)² / 2`. **Never** bounces, elastic easing, spins, sudden zooms, flicker or *glitch* effects. ### Video formats | Use | Format | Resolution | Duration | | --- | --- | --- | --- | | Website, YouTube, LinkedIn landscape | 16:9 | 1920 × 1080 | 45–90 s for explainers; up to 3 min for demos | | LinkedIn and Instagram feed | 4:5 or 1:1 | 1080 × 1350 / 1080 × 1080 | 15–30 s | | Reels, TikTok, Shorts, stories | 9:16 | 1080 × 1920 | 6, 15 or 30 s | | Ads | All three | — | 6, 15 and 30 s | At 30 fps (25 if broadcast on television in Europe). In 9:16, nothing important in the top 14% or the bottom 20%. ### Structure 1. **Hook (0–2 s):** a real fact or a specific contact centre problem, with the two-beat headline. Never made-up figures. 2. **The product in action:** the product creative or the 3D scene, one message per shot. 3. **Result:** what the customer gains (higher contact rate, savings on voicemail, voice in 85 countries). 4. **Close (2–3 s):** official logo, the market's call to action and www.astroline.com. ### Visuals in video - Backgrounds in #fafafa or gradient backdrops with grain; the interface either real or recreated pixel for pixel. - Slow camera: lateral moves, slow push-ins and a slight sway over orthographic scenes. No 360° spins or drone flights. - Transitions: clean cut or short fade (6–8 frames). No template transitions. - Red, green and amber only for states; purple on the detail you want to point out. ### On-screen text and subtitles | Element | Specification | | --- | --- | | Main on-screen title | General Sans 500, initial capital, letter spacing −0.02 em, maximum 7 words; two-beat (#5c5c68 + #0b0b10 on light; white at 70% + white on gradient) | | Reference size | 1080p: headline 72–96 px; supporting text 36–44 px | | Position | Left-aligned, in the left or bottom third; 5% safe margin | | Entrance | Fade and rise of 0.4 s; exit, fade of 0.3 s | | Subtitles | Always. General Sans 500, 42–48 px at 1080p, white on a #0b0b10 pill at 80%, up to 2 lines and 32 characters per line | | Figures on screen | In the market's format, with fixed-width digits | ### Voice and sound - **Voice-over:** natural, warm and confident, at about 150 words per minute, with the market's accent. - **Synthetic voices:** may be used. Never clone a real person's voice without their written consent, or imitate anyone well known. - **AI agents on screen:** if a video shows a call with an AI agent, the «Agente IA» (“AI agent”) label is visible. Never pass the AI off as a person. - **Music:** minimal electronic or technical ambient, 90 to 110 BPM, licensed. Neither epic music nor corporate ukulele. Mixed 18–20 dB below the voice. - **Sound effects:** few and real: ringing tone, pick-up, WhatsApp notification. ### AI-generated video - Acceptable for ambient shots and abstract scenes in the brand's 3D style. - Not acceptable for interfaces with text, logos, people speaking as customers or employees, or synthetic presenters. - Frame-by-frame review: distorted text, hands, objects that change shape, flicker and colours that drift towards purple or lavender. - If realistic content is generated or retouched with AI, label it as such wherever the platform requires it. In the EU, since August 2026 the AI Act requires realistic synthetic content to be identified. --- ## 11. Signs of “made with AI” to avoid ### In design | Sign | Instead | | --- | --- | | Two or more typefaces, or a monospace for figures and labels | Only General Sans, with `tabular-nums` | | Icons inside coloured squares, circles or pills | Free-standing Lucide icons, in purple | | Pastel gradient meshes (lilac, peach, sky blue, cream) | Vivid gradients with two glows and grain | | Purple or violet backgrounds, purple-to-blue gradients | Light neutrals; to make something stand out, black | | *Glassmorphism* (`backdrop-filter` on cards), glows, coloured shadows, glowing borders | White cards with a 1 px border and almost no shadow | | A grid of three identical cards with icon, title and text | Two-column blocks with a live creative; cards each with a different illustration | | Centred hero with a huge headline and a screenshot floating in perspective | Two-column hero with the creative filling its panel | | Headlines with gradient text (`background-clip: text`) | Two-beat headline, in grey and black | | The sparkles icon (`Sparkles`, ✨) for everything AI | `Bot` or, better, show what it does | | Corners of 20 px or more, thick coloured borders | Radii of 9–16 px and 1 px neutral borders | | Spheres, blobs and shiny 3D shapes with no meaning | 3D pieces that represent something in the product | | Distorted text, odd hands, made-up logos in images | An image with no text, and the text on top, in General Sans | | Emojis as icons or bullets | Lucide or nothing | | Default Tailwind classes left untouched (`rounded-2xl shadow-xl bg-gradient-to-r from-purple-500 to-indigo-600`) | The tokens in [section 20](#20-tailwind) | ### In text | Sign | Instead | | --- | --- | | «No es solo X, es Y», «Imagina…», «En el mundo actual…» (“It's not just X, it's Y”, “Imagine…”, “In today's world…”) | Start with the data or the fact | | Three adjectives in a row («rápida, segura y escalable», “fast, secure and scalable”) | One statement with its data point | | Em dashes in every sentence | Commas, full stops and short sentences | | Title Case, words in capitals, exclamation marks | Initial capital and a full stop | | Made-up round figures («10x más contactos», «300 % de mejora»: “10x more contacts”, “300% improvement”) | Only real data from Astroline or from a case study with permission | | Made-up testimonials, customers or logos | Only real case studies from Contentful | | “AI” in Spanish copy, unnecessary anglicisms | «IA» and the Spanish word | | Literal translations from English | Rewrite in the market's language | | Bullet lists where one sentence will do | Short prose | ### In video | Sign | Instead | | --- | --- | | Synthetic presenters or avatars | The product in action or real people | | A flat voice, with no pauses, with another country's pronunciation | A voice with the market's accent and natural pauses | | Epic stock music and a “whoosh” on every cut | Minimal electronic music and real sound effects | | Objects that change shape, flicker, flying cameras | Still shots or slow camera moves | | Template transitions | Clean cut or short fade | --- ## 13. CSS tokens ### Tokens defined in the code ```css /* rediseno.css — root of all sections */ .hr { --bg: #fafafa; /* page background */ --line: #e6e6ea; /* grid guides and dividers */ --edge: #e4e4e8; /* border of cards, labels and tiles */ --cross: #b4b4bd; /* crosses at the vertices */ --text: #0b0b10; /* main text, primary button, active states */ --soft: #5c5c68; /* first part of the headline, body */ --muted: #8a8a96; /* secondary data (not for reading text) */ --acc: #8331a7; /* purple: details only */ --panel: #f2f2f4; /* large panels, flat grey */ background: var(--bg); color: var(--text); font-family: var(--font-general-sans), system-ui, sans-serif; -webkit-font-smoothing: antialiased; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-x: clip; /* clips the crosses without creating a scroll container */ } .hr *, .hr *::before, .hr *::after { box-sizing: border-box; } /* band (franja): section with a slightly darker background and lighter panels */ .hr.hr-franja { --panel: #fafafa; background: #f3f3f5; } ``` `navegacion.css` repeats the same tokens (`--bg`, `--line`, `--edge`, `--text`, `--soft`, `--muted`, `--acc`) in `.hn-tira, .hn, .hn-pie`. ### Full token sheet for new projects For a website, platform or prototype outside this repository, start from this sheet. It combines the tokens in the code with the values the code uses directly (without a variable), so that nobody has to invent a grey. ```css /* astroline-tokens.css */ :root { /* — Neutrals — */ --ast-bg: #fafafa; --ast-white: #ffffff; --ast-panel: #f2f2f4; --ast-franja: #f3f3f5; --ast-franja-rejilla: rgba(236, 236, 241, 0.6); --ast-line: #e6e6ea; --ast-line-in: #f0f0f3; /* dividers inside cards */ --ast-edge: #e4e4e8; --ast-btn-edge: #dcdce2; --ast-btn-edge-hover: #b9b9c2; --ast-cross: #b4b4bd; --ast-off: #c4c4cc; /* dimmed status dot */ --ast-track: #efeff2; /* progress bar track */ --ast-hover: #f4f4f6; /* list hover, incoming bubble */ --ast-destacado: #f7f7f9; /* highlighted menu cards */ /* — Text — */ --ast-text: #0b0b10; --ast-text-hover: #2a2a33; --ast-label: #3a3a44; --ast-soft: #5c5c68; --ast-muted: #8a8a96; --ast-logo: #242424; /* — Accent (details only: icons, strokes, borders and data marks; never surfaces) — */ --ast-acc: #8331a7; --ast-acc-borde: rgba(131, 49, 167, 0.45); --ast-acc-borde-suave: rgba(131, 49, 167, 0.35); --ast-acc-anillo: rgba(131, 49, 167, 0.14); /* — Status — */ --ast-rojo: #e5484d; --ast-rojo-fondo: #fff6f6; --ast-rojo-borde: rgba(229, 72, 77, 0.55); --ast-rojo-vivo: rgba(229, 72, 77, 0.92); --ast-verde: #30a46c; --ast-verde-fondo: #f3fbf6; --ast-verde-borde: rgba(48, 164, 108, 0.55); --ast-verde-vivo: rgba(36, 158, 98, 0.92); --ast-ambar: #e8a33c; --ast-ambar-fondo: #fffaf0; --ast-ambar-borde: rgba(232, 163, 60, 0.6); --ast-ambar-vivo: rgba(222, 140, 30, 0.94); /* — On gradient — */ --ast-sobre-texto: rgba(255, 255, 255, 0.92); --ast-sobre-secundario: rgba(255, 255, 255, 0.78); --ast-sobre-apagado: rgba(255, 255, 255, 0.55); --ast-sobre-barra: rgba(255, 255, 255, 0.5); --ast-cristal-fondo: rgba(255, 255, 255, 0.2); --ast-cristal-borde: rgba(255, 255, 255, 0.42); --ast-guia: rgba(255, 255, 255, 0.75); /* dashed guide lines */ /* — Typography — */ --ast-font: "General Sans", var(--font-general-sans), system-ui, sans-serif; --ast-fs-h1: 46px; --ast-lh-h1: 1.04; --ast-ls-h1: -0.025em; --ast-fs-cierre: 52px; --ast-fs-h2: 42px; --ast-lh-h2: 1.08; --ast-ls-h2: -0.02em; --ast-fs-dato: 56px; --ast-ls-dato: -0.03em; --ast-fs-h3-caso: 21px; --ast-fs-h3-producto: 18px; --ast-fs-lead: 18px; --ast-lh-lead: 1.5; --ast-fs-feat: 15.5px; --ast-fs-body: 15px; --ast-lh-body: 1.6; --ast-fs-small: 14.5px; --ast-lh-small: 1.55; --ast-fs-kicker: 14px; --ast-fs-btn: 15px; --ast-fs-tag: 13px; --ast-fs-flota: 12px; --ast-fs-micro: 11px; /* — Radii — */ --ast-r-pill: 999px; --ast-r-panel-menu: 14px; /* menu panels, tab track */ --ast-r-escenario: 16px; /* hero backdrop, card on a backdrop */ --ast-r-card: 12px; --ast-r-pieza: 10px; /* bubbles, rows, active tab, menu items */ --ast-r-ficha: 9px; /* wall tiles, social media icons */ --ast-r-mini: 2px; /* 2–3 px bars */ /* — Shadows (neutral, always very soft) — */ --ast-sh-card: 0 1px 2px rgba(16, 16, 24, 0.04), 0 8px 24px rgba(16, 16, 24, 0.05); --ast-sh-flota: 0 6px 18px rgba(16, 16, 24, 0.08); --ast-sh-deteccion: 0 4px 14px rgba(16, 16, 24, 0.08); --ast-sh-ficha: 0 12px 26px rgba(16, 16, 24, 0.09); --ast-sh-pestana: 0 1px 2px rgba(16, 16, 24, 0.06), 0 4px 14px rgba(16, 16, 24, 0.06); --ast-sh-menu: 0 16px 40px rgba(16, 16, 24, 0.1); --ast-sh-desplegable: 0 12px 32px rgba(16, 16, 24, 0.1); --ast-sh-barra: 0 4px 18px rgba(16, 16, 24, 0.05); --ast-sh-escena: 0 1px 2px rgba(16, 16, 24, 0.08), 0 24px 60px rgba(16, 16, 24, 0.22); --ast-sh-cristal: 0 6px 18px rgba(8, 24, 72, 0.12); /* — Layout — */ --ast-site: 1440px; --ast-gutter: 24px; --ast-section-y: 96px; /* 72 px ≤ 1100, 60 px ≤ 760 */ --ast-gap-cols: 64px; /* 44 px ≤ 1100 */ --ast-dot-step: 30px; /* — Motion — */ --ast-ease: ease; --ast-t-hover: 0.2s; --ast-t-menu: 0.16s; --ast-t-sube: 0.4s; } ``` The gradients (`--vivo-*`) and the grain (`--grano`) are in [section 17](#17-vivid-gradients-and-grain-in-code). --- ## 17. Vivid gradients and grain in code ### Grain ```css .hr { --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E"); } ``` Fractal noise (`feTurbulence fractalNoise`, `baseFrequency .85`, `numOctaves 3`, `stitchTiles stitch`), desaturated (`feColorMatrix saturate 0`), at 50% opacity, in a 180 × 180 px tile. It is **always** applied as the first layer with `background-blend-mode: overlay`. ### How it is applied ```css .elemento-con-degradado { background: var(--grano), var(--vivo, var(--vivo-1)); background-blend-mode: overlay, normal, normal; /* grain · glow 1 · glow 2 (the base does not count) */ } /* each page picks its backdrop by redefining --vivo at its root, e.g. vhunter.css: */ .vh { --vivo: var(--vivo-ambar); } ``` Scheme of each palette: two `radial-gradient`s of 110–120% in opposite corners that fade to `transparent` between 55% and 64%, over a solid base colour. ### Card palettes ```css .hr { /* fire: yellow, orange and red */ --vivo-1: radial-gradient(110% 110% at 0% 0%, #ffd23f 0%, transparent 58%), radial-gradient(120% 120% at 100% 100%, #ff2e4d 0%, transparent 62%), #ff7a1a; /* ocean: cyan over electric blue */ --vivo-2: radial-gradient(110% 110% at 100% 0%, #43f0ff 0%, transparent 56%), radial-gradient(120% 120% at 0% 100%, #0031e0 0%, transparent 62%), #1672ff; /* lime: acid green over emerald */ --vivo-3: radial-gradient(110% 110% at 0% 0%, #e6ff3d 0%, transparent 58%), radial-gradient(120% 120% at 100% 100%, #009c63 0%, transparent 62%), #32cc72; /* pink: peach and hot pink */ --vivo-4: radial-gradient(110% 110% at 100% 0%, #ffc29a 0%, transparent 56%), radial-gradient(120% 120% at 0% 100%, #ff1f68 0%, transparent 62%), #ff5c7c; /* turquoise: mint over blue */ --vivo-5: radial-gradient(110% 110% at 0% 100%, #2dffcb 0%, transparent 58%), radial-gradient(120% 120% at 100% 0%, #0a7cff 0%, transparent 62%), #00bfb3; /* ink: near-black with one blue glow and one orange glow */ --vivo-6: radial-gradient(90% 90% at 0% 100%, #2a5cff 0%, transparent 60%), radial-gradient(80% 80% at 100% 0%, #ff6a2b 0%, transparent 55%), #0e0f16; } ``` ### Backdrops by page ```css .hr { --vivo-whatsapp: radial-gradient(110% 110% at 100% 0%, #c8ffd8 0%, transparent 55%), radial-gradient(120% 120% at 0% 100%, #075e54 0%, transparent 64%), #25d366; --vivo-titanio: radial-gradient(110% 110% at 100% 0%, #2ee6ff 0%, transparent 55%), radial-gradient(120% 120% at 0% 100%, #05070c 0%, transparent 62%), #1d2635; --vivo-amanecer: radial-gradient(110% 110% at 0% 0%, #1f6dff 0%, transparent 58%), radial-gradient(120% 120% at 100% 100%, #ff7a59 0%, transparent 60%), #58adff; --vivo-ambar: radial-gradient(110% 110% at 0% 0%, #f06a00 0%, transparent 58%), radial-gradient(120% 120% at 100% 100%, #ffd23f 0%, transparent 62%), #ff9f1a; --vivo-lima: radial-gradient(110% 110% at 100% 0%, #f4ff5a 0%, transparent 56%), radial-gradient(120% 120% at 0% 100%, #0f8a3c 0%, transparent 62%), #8fdc2a; --vivo-008: radial-gradient(90% 90% at 0% 100%, #2a5cff 0%, transparent 60%), radial-gradient(85% 85% at 100% 0%, #f02f65 0%, transparent 56%), #0e0f16; --vivo-aurora-noche: radial-gradient(95% 95% at 0% 100%, #1de9b6 0%, transparent 60%), radial-gradient(85% 85% at 100% 0%, #ffd23f 0%, transparent 55%), #0d1117; --vivo-carmin: radial-gradient(110% 110% at 100% 0%, #ffb199 0%, transparent 56%), radial-gradient(120% 120% at 0% 100%, #b8002e 0%, transparent 62%), #ff3b3b; --vivo-marino: radial-gradient(100% 100% at 100% 0%, #ffcf4a 0%, transparent 55%), radial-gradient(120% 120% at 0% 100%, #04103a 0%, transparent 62%), #0f2f7a; --vivo-pizarra: radial-gradient(110% 110% at 100% 0%, #a5dcff 0%, transparent 56%), radial-gradient(120% 120% at 0% 100%, #111827 0%, transparent 62%), #4b5d75; --vivo-cuaderno: radial-gradient(100% 100% at 100% 0%, #ffe14d 0%, transparent 55%), radial-gradient(120% 120% at 0% 100%, #0038c7 0%, transparent 62%), #2f7dff; --vivo-petroleo: radial-gradient(100% 100% at 100% 0%, #ff9a5a 0%, transparent 55%), radial-gradient(120% 120% at 0% 100%, #022b33 0%, transparent 62%), #0c6170; --vivo-voltio: radial-gradient(120% 120% at 100% 0%, #ffe600 0%, transparent 58%), radial-gradient(80% 80% at 0% 100%, #9dff3a 0%, transparent 55%), #16171c; --vivo-caribe: radial-gradient(110% 110% at 100% 0%, #ff9c6b 0%, transparent 56%), radial-gradient(120% 120% at 0% 100%, #007a8a 0%, transparent 62%), #18c6c0; --vivo-arena: radial-gradient(100% 100% at 0% 0%, #ffd9a3 0%, transparent 50%), radial-gradient(120% 120% at 100% 100%, #a83a16 0%, transparent 64%), #e2803c; --vivo-grafito: radial-gradient(100% 100% at 100% 0%, #8ec5ff 0%, transparent 55%), radial-gradient(120% 120% at 0% 100%, #2a1d17 0%, transparent 62%), #23262f; --vivo-aurora: radial-gradient(90% 90% at 0% 0%, #2de2ff 0%, transparent 58%), radial-gradient(110% 110% at 100% 100%, #c6ff3d 0%, transparent 60%), #0f9c86; --vivo-noche: radial-gradient(100% 100% at 100% 0%, #1fb6ff 0%, transparent 55%), radial-gradient(120% 120% at 0% 100%, #000 0%, transparent 62%), #0a1430; } ``` | Page | File | Backdrop | | --- | --- | --- | | Home | `HeroContactacion.jsx` | `--vivo-2` | | Contact centre | `soluciones/contact-center/componentes/HeroContactCenter.jsx` | `--vivo-1` | | Omnichannel dialler | `marcador-omnicanal/componentes/HeroPulseDial.jsx` | `--vivo-4` | | AI voice agents | `agentes-ia-voz/componentes/HeroAgente.jsx` | `--vivo-008` | | AI WhatsApp agents | `agentes-ia-whatsapp/engage.css` | `--vivo-aurora-noche` | | WhatsApp Calling | `whatsapp-business-calling/whatsapp.css` | `--vivo-whatsapp` | | SIP Trunk | `smart-sip-trunk/sip.css` | `--vivo-titanio` | | Numbering | `numeracion/numeracion.css` | `--vivo-amanecer` | | Rotation (mx only) | `rotacion-de-numeracion/rotacion.css` | `--vivo-5` | | VHunter | `vhunter/vhunter.css` | `--vivo-ambar` | | ASR Vooster (mx only) | `asr-vooster/asr-vooster.css` | `--vivo-lima` | | Sales | `soluciones/ventas/ventas.css` | `--vivo-carmin` | | Collections | `soluciones/cobranza/cobranza.css` | `--vivo-marino` | | Corporate telephony | `soluciones/corporate/corporativa.css` | `--vivo-pizarra` | | Sectors | `soluciones/sectores-comun/sectores.css` | `--vivo-cuaderno` (education), `--vivo-petroleo` (services), `--vivo-voltio` (energy), `--vivo-caribe` (tourism), `--vivo-arena` (other) | | About us | `sobre-nosotros/sobre-nosotros.css` | `--vivo-grafito` | | Partners | `partners/partners.css` | `--vivo-aurora` | | Infrastructure | `infraestructura/infraestructura.css` | `--vivo-noche` | | Contact | `contacto/contacto.css` | `--vivo-6` | ### Rotation in card grids ```css /* the illustrations in each grid rotate through the six palettes */ .hr :is(.cc-capa-ilu, .st-capa-ilu, .rn-regla-ilu, .vh-salida-ilu, .ag-caso-ilu, .eg-tarjeta-ilu, .pd-cap-ilu, .wc-ventaja-ilu, .hr-producto-ilu, .rc-img.libro) { background: var(--grano), var(--vivo, var(--vivo-1)); background-blend-mode: overlay, normal, normal; } .hr :nth-child(6n + 1) > :is(…ilustraciones…) { --vivo: var(--vivo-1); } .hr :nth-child(6n + 2) > :is(…) { --vivo: var(--vivo-2); } .hr :nth-child(6n + 3) > :is(…) { --vivo: var(--vivo-3); } .hr :nth-child(6n + 4) > :is(…) { --vivo: var(--vivo-4); } .hr :nth-child(6n + 5) > :is(…) { --vivo: var(--vivo-5); } .hr :nth-child(6n) > :is(…) { --vivo: var(--vivo-6); } /* product cards start at a different point on the wheel so they do not repeat the neighbouring grid */ .hr :nth-child(3n + 1) > .hr-producto-ilu { --vivo: var(--vivo-5); } .hr :nth-child(3n + 2) > .hr-producto-ilu { --vivo: var(--vivo-6); } .hr :nth-child(3n) > .hr-producto-ilu { --vivo: var(--vivo-1); } ``` ### What goes on top of the gradient ```css /* loose text */ .hr :is(…ilustraciones…) :is(small, .etiqueta-suelta) { color: rgba(255, 255, 255, 0.92); } /* secondary bars */ .hr :is(…) .barras i { background: rgba(255, 255, 255, 0.5); } /* the highlighted bar */ .hr :is(…) .barras i.firma { background: #fff; opacity: 1; } /* chart baselines */ .hr :is(…) .barras { border-bottom-color: rgba(255, 255, 255, 0.55); } /* outline boxes */ .hr .rn-regla-ilu .rn-ilu-caja.reserva { border-color: rgba(255, 255, 255, 0.7); } /* dialler text on the backdrop */ .hr-escenario .hr-h3-marcador small { color: rgba(255, 255, 255, 0.78); } .hr-escenario .hr-h3-marcador i { color: rgba(255, 255, 255, 0.55); } .hr-escenario .hr-h3-marcador i.activo { color: #fff; } ``` Animation of a bar that “lights up” on a gradient (from translucent white to white, never to purple): ```css @keyframes hr-firma-vivo { 0%, 20%, 100% { transform: scaleY(0.25); background: rgba(255, 255, 255, 0.5); } 45%, 90% { transform: scaleY(1); background: #fff; } } ``` --- ## 20. Tailwind ### What there is today The redesign **does not use Tailwind**: everything is plain CSS with the `.hr-*` and `.hn-*` classes and each page's own prefixes. `tailwind.config.js` (Tailwind 3.3) belongs to the old website and its tokens are **not** those of the current brand: ```js // tailwind.config.js (LEGACY — do not use for anything new) colors: { main: "#8331A7", // purple, intended as the main colour (today it is only an accent) green: "#3FCEA6", // the logo mint, used as a UI colour (now forbidden) black: "#000000", // today the brand black is #0b0b10 carbono: "#191919", gris: "#e5e7eb", white: "#ffffff", "green-offer": "#00bd82", whatsapp: "#25D366", bg: "#F7F8FC", // today the background is #fafafa }, animation: { "text-gradient", "background-shine", "pulse-slow", "border-width", "loop-scroll", "text-slide" } ``` `text-gradient` and `background-shine` (gradient text and shine effects) are exactly the devices the current brand forbids. ### Preset for new projects with Tailwind 3 For tools that generate Tailwind (v0, Lovable, Bolt, Cursor), use this preset. It includes the redesign tokens and **deliberately leaves out** what nobody should be able to write: there is no large `bg-acc`, no coloured shadows and no radii over 16 px. ```js // tailwind.preset.astroline.js /** @type {import('tailwindcss').Config} */ module.exports = { theme: { // radii and shadows are replaced (not extended) so that Tailwind's defaults do not exist borderRadius: { none: "0", mini: "2px", DEFAULT: "9px", ficha: "9px", pieza: "10px", card: "12px", menu: "14px", escenario: "16px", full: "999px", }, boxShadow: { none: "none", card: "0 1px 2px rgba(16,16,24,.04), 0 8px 24px rgba(16,16,24,.05)", flota: "0 6px 18px rgba(16,16,24,.08)", deteccion: "0 4px 14px rgba(16,16,24,.08)", ficha: "0 12px 26px rgba(16,16,24,.09)", pestana: "0 1px 2px rgba(16,16,24,.06), 0 4px 14px rgba(16,16,24,.06)", menu: "0 16px 40px rgba(16,16,24,.1)", desplegable: "0 12px 32px rgba(16,16,24,.1)", barra: "0 4px 18px rgba(16,16,24,.05)", escena: "0 1px 2px rgba(16,16,24,.08), 0 24px 60px rgba(16,16,24,.22)", cristal: "0 6px 18px rgba(8,24,72,.12)", anillo: "0 0 0 3px rgba(131,49,167,.14)", }, fontFamily: { sans: ["var(--font-general-sans)", "General Sans", "system-ui", "sans-serif"], }, // the website works from desktop down screens: { portatil: { max: "1100px" }, menu: { max: "1099px" }, tablet: { max: "760px" }, movil: { max: "600px" }, mini: { max: "560px" }, }, extend: { colors: { ast: { bg: "#fafafa", panel: "#f2f2f4", franja: "#f3f3f5", line: "#e6e6ea", "line-in": "#f0f0f3", edge: "#e4e4e8", "btn-edge": "#dcdce2", "btn-edge-hover": "#b9b9c2", cross: "#b4b4bd", off: "#c4c4cc", track: "#efeff2", hover: "#f4f4f6", destacado: "#f7f7f9", text: "#0b0b10", "text-hover": "#2a2a33", label: "#3a3a44", soft: "#5c5c68", muted: "#8a8a96", rojo: "#e5484d", "rojo-fondo": "#fff6f6", verde: "#30a46c", "verde-fondo": "#f3fbf6", ambar: "#e8a33c", "ambar-fondo": "#fffaf0", }, }, // purple only exists for text, icons, borders, strokes and dot fills textColor: { "ast-acc": "#8331a7" }, borderColor: { "ast-acc": "#8331a7", "ast-acc-45": "rgba(131,49,167,.45)", "ast-acc-35": "rgba(131,49,167,.35)", }, fill: { "ast-acc": "#8331a7" }, stroke: { "ast-acc": "#8331a7" }, // for data marks: dots, pods, wave bars, progress and chart bars. Never on surfaces backgroundColor: { "ast-acc-punto": "#8331a7" }, fontSize: { "ast-h1": ["46px", { lineHeight: "1.04", letterSpacing: "-0.025em", fontWeight: "500" }], "ast-cierre": ["52px", { lineHeight: "1.04", letterSpacing: "-0.025em", fontWeight: "500" }], "ast-h2": ["42px", { lineHeight: "1.08", letterSpacing: "-0.02em", fontWeight: "500" }], "ast-dato": ["56px", { lineHeight: "1", letterSpacing: "-0.03em", fontWeight: "500" }], "ast-h3": ["21px", { lineHeight: "1.3", letterSpacing: "-0.01em", fontWeight: "500" }], "ast-h3-producto": ["18px", { letterSpacing: "-0.01em", fontWeight: "500" }], "ast-lead": ["18px", { lineHeight: "1.5" }], "ast-sub": ["18px", { lineHeight: "1.45" }], "ast-feat": ["15.5px", { fontWeight: "500" }], "ast-body": ["15px", { lineHeight: "1.6" }], "ast-small": ["14.5px", { lineHeight: "1.55" }], "ast-kicker": ["14px", { fontWeight: "500" }], "ast-btn": ["15px", { fontWeight: "500" }], "ast-tag": ["13px", { fontWeight: "500" }], "ast-flota": ["12px", { fontWeight: "500" }], "ast-micro": ["11px", { fontWeight: "500" }], }, maxWidth: { site: "1440px", sub: "440px", lead: "480px", "lead-cierre": "560px" }, spacing: { gutter: "24px", seccion: "96px", "seccion-portatil": "72px", "seccion-tablet": "60px", cols: "64px" }, keyframes: { sube: { from: { opacity: "0", transform: "translateY(6px)" } }, late: { "50%": { opacity: ".35" } }, onda: { from: { transform: "scaleY(.3)" }, to: { transform: "scaleY(1)" } }, progreso: { from: { transform: "scaleX(0)" }, to: { transform: "scaleX(1)" } }, cinta: { to: { transform: "translateX(calc(-50% - 28px))" } }, burbuja: { "0%": { opacity: "0", transform: "translateY(6px)" }, "8%, 80%": { opacity: "1", transform: "none" }, "90%, 100%": { opacity: "0" }, }, }, animation: { sube: "sube .4s ease both", late: "late 1s ease-in-out infinite", onda: "onda 1.1s ease-in-out infinite alternate", progreso: "progreso 8s linear both", cinta: "cinta 70s linear infinite", burbuja: "burbuja 7.5s infinite both", }, transitionDuration: { hover: "200ms", menu: "160ms", lista: "150ms" }, backgroundImage: { grano: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E\")", }, }, }, plugins: [ // .vivo-1 … .vivo-6 and backdrops: grain + gradient + blend, in one class function ({ addUtilities }) { const grano = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E\")"; const vivos = { 1: "radial-gradient(110% 110% at 0% 0%, #ffd23f 0%, transparent 58%), radial-gradient(120% 120% at 100% 100%, #ff2e4d 0%, transparent 62%), #ff7a1a", 2: "radial-gradient(110% 110% at 100% 0%, #43f0ff 0%, transparent 56%), radial-gradient(120% 120% at 0% 100%, #0031e0 0%, transparent 62%), #1672ff", 3: "radial-gradient(110% 110% at 0% 0%, #e6ff3d 0%, transparent 58%), radial-gradient(120% 120% at 100% 100%, #009c63 0%, transparent 62%), #32cc72", 4: "radial-gradient(110% 110% at 100% 0%, #ffc29a 0%, transparent 56%), radial-gradient(120% 120% at 0% 100%, #ff1f68 0%, transparent 62%), #ff5c7c", 5: "radial-gradient(110% 110% at 0% 100%, #2dffcb 0%, transparent 58%), radial-gradient(120% 120% at 100% 0%, #0a7cff 0%, transparent 62%), #00bfb3", 6: "radial-gradient(90% 90% at 0% 100%, #2a5cff 0%, transparent 60%), radial-gradient(80% 80% at 100% 0%, #ff6a2b 0%, transparent 55%), #0e0f16", }; const utilidades = {}; for (const [k, v] of Object.entries(vivos)) { utilidades[`.vivo-${k}`] = { background: `${grano}, ${v}`, backgroundBlendMode: "overlay, normal, normal" }; } addUtilities(utilidades); }, ], }; ``` Usage: ```js // tailwind.config.js in a new project module.exports = { presets: [require("./tailwind.preset.astroline.js")], content: ["./src/**/*.{js,jsx,ts,tsx}"] }; ``` ### Component equivalents in Tailwind The `size-*` classes need Tailwind 3.4 or later. | Component | Classes | | --- | --- | | Page | `bg-ast-bg text-ast-text font-sans antialiased` | | Container | `relative mx-auto max-w-site border-x border-ast-line` | | Block | `grid grid-cols-[1fr_1.05fr] items-center gap-cols px-gutter py-seccion portatil:grid-cols-1 portatil:gap-11 portatil:px-8 portatil:py-seccion-portatil tablet:px-gutter tablet:py-seccion-tablet` | | Kicker | `flex items-center gap-2 text-ast-kicker text-ast-soft` + icon `size-[15px] text-ast-acc` | | H2 | `mt-3.5 text-ast-h2 text-ast-soft tablet:text-[31px]` + `` | | Lead paragraph | `mt-4 max-w-lead text-ast-lead text-ast-soft` | | Primary button | `inline-flex items-center justify-center gap-2 rounded-full bg-ast-text px-[18px] py-2.5 text-ast-btn text-white transition-colors duration-hover hover:bg-ast-text-hover` | | Secondary button | `inline-flex items-center justify-center gap-2 rounded-full border border-ast-btn-edge bg-white px-[18px] py-2.5 text-ast-btn text-ast-text transition-colors duration-hover hover:border-ast-btn-edge-hover` | | Label | `inline-flex items-center gap-[7px] self-start rounded-full border border-ast-edge bg-white py-1.5 pl-[9px] pr-[11px] text-ast-tag text-ast-label` + icon `size-3.5 text-ast-acc` | | Card | `rounded-card border border-ast-edge bg-white shadow-card` | | Panel | `relative aspect-[1/0.92] overflow-hidden rounded-card border border-ast-edge bg-ast-panel` | | Backdrop | `vivo-2 rounded-escenario` (or the page's own backdrop) | | Live status dot | `size-1.5 rounded-full bg-ast-acc-punto animate-late` | ### Tailwind 4 (`@theme`) ```css @import "tailwindcss"; @theme { --font-sans: var(--font-general-sans), "General Sans", system-ui, sans-serif; --color-ast-bg: #fafafa; --color-ast-panel: #f2f2f4; --color-ast-franja: #f3f3f5; --color-ast-line: #e6e6ea; --color-ast-line-in: #f0f0f3; --color-ast-edge: #e4e4e8; --color-ast-btn-edge: #dcdce2; --color-ast-btn-edge-hover: #b9b9c2; --color-ast-cross: #b4b4bd; --color-ast-hover: #f4f4f6; --color-ast-text: #0b0b10; --color-ast-text-hover: #2a2a33; --color-ast-label: #3a3a44; --color-ast-soft: #5c5c68; --color-ast-muted: #8a8a96; --color-ast-acc: #8331a7; /* ONLY text-, border-, fill-, stroke- and data marks; never bg- on surfaces */ --color-ast-rojo: #e5484d; --color-ast-verde: #30a46c; --color-ast-ambar: #e8a33c; --radius-ficha: 9px; --radius-pieza: 10px; --radius-card: 12px; --radius-menu: 14px; --radius-escenario: 16px; --shadow-card: 0 1px 2px rgba(16,16,24,.04), 0 8px 24px rgba(16,16,24,.05); --shadow-flota: 0 6px 18px rgba(16,16,24,.08); --shadow-menu: 0 16px 40px rgba(16,16,24,.1); --shadow-escena: 0 1px 2px rgba(16,16,24,.08), 0 24px 60px rgba(16,16,24,.22); --text-ast-h1: 46px; --text-ast-h1--line-height: 1.04; --text-ast-h1--letter-spacing: -0.025em; --text-ast-h2: 42px; --text-ast-h2--line-height: 1.08; --text-ast-h2--letter-spacing: -0.02em; --text-ast-dato: 56px; --text-ast-dato--line-height: 1; --text-ast-dato--letter-spacing: -0.03em; --text-ast-lead: 18px; --text-ast-lead--line-height: 1.5; --text-ast-body: 15px; --text-ast-body--line-height: 1.6; --text-ast-tag: 13px; --container-site: 1440px; --animate-sube: sube .4s ease both; @keyframes sube { from { opacity: 0; transform: translateY(6px); } } } @utility vivo-2 { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E"), radial-gradient(110% 110% at 100% 0%, #43f0ff 0%, transparent 56%), radial-gradient(120% 120% at 0% 100%, #0031e0 0%, transparent 62%), #1672ff; background-blend-mode: overlay, normal, normal; } /* …one @utility per palette, with the values from section 17 */ ``` In Tailwind 4, to remove the default radii and shadows, add `--radius-*: initial;` and `--shadow-*: initial;` at the start of the `@theme`. ### Tailwind classes that are never used `bg-gradient-to-*` with purples or indigos, `from-purple-*`, `to-indigo-*`, `bg-purple-*`, `bg-violet-*`, `rounded-2xl`/`rounded-3xl`, `shadow-lg`/`shadow-xl`/`shadow-2xl`, `backdrop-blur-*` on cards, `uppercase`, `tracking-widest`, `font-bold` on headlines, `font-mono`, `bg-clip-text text-transparent`, `animate-bounce`, decorative `animate-spin`, `animate-pulse` on large blocks. --- ## 26. Base prompts Copy the relevant prompt, fill in what is in square brackets and add your brief underneath. The image and video prompts are in English because the models follow it better; any text that appears on screen is written separately, in the market's language. ### Rules by market (to paste where it says [MARKET]) | Market | Text to paste | | --- | --- | | Mexico | Mexican Spanish, formal address (usted). You may mention spam detection, number rotation, SMS and SIP Trunk for Mexico. Figures with a comma for thousands and a point for decimals. CTA: «Hable con un experto». | | Spain | Spanish from Spain, informal address (tú). Do not mention spam, antispam, number rotation or SMS. Do mention: 400 numbering for sales calls, SIP Trunk in Spain, private network, voicemail detected before the call is answered. Figures with a point for thousands and a comma for decimals. CTA: «Habla con un experto». | | United Kingdom | British English. Never mention spam, number rotation or SMS. Focus: SIP Trunk in the UK, omnichannel dialling, voicemail detection, voice in 85+ countries. CTA: “Talk to an expert”. | | US | American English. Never mention spam, number rotation or SMS. Focus: SIP Trunk in the US, omnichannel dialing, voicemail detection, voice in 85+ countries. CTA: “Talk to an expert”. | ### Website, landing page or platform (CSS or Tailwind) ```text You are a front-end designer and developer at Astroline, a voice carrier for high-volume contact centres. Design [PIECE] following these rules without exception. The brand guidelines are attached: their values override your defaults. MARKET: [MARKET] CODE: [plain CSS with the token sheet from section 13 / Tailwind with the preset from section 20]. Do not use Tailwind's default colours, radii or shadows. STYLE: light and technical, like www.astroline.com. Background #fafafa. 1440 px container with 1 px #e6e6ea vertical guides and 11 px #b4b4bd crosses at the vertices. Background grid of grey dots every 30 px. Two-column blocks (1fr 1.05fr: text and creative), 96 px vertical padding, 64 px gap; a single column below 1100 px. TYPOGRAPHY: General Sans only (400 for body; 500 for headlines, buttons and labels; never 700). Figures with font-variant-numeric: tabular-nums. No other font, not even a monospace. H1 46px/1.04/-0.025em; H2 42px/1.08/-0.02em; lead paragraph 18px/1.5, max. 480 px; body 15px/1.6. TWO-BEAT HEADLINES: two short sentences, each ending in a full stop; the first in #5c5c68 and the second inside (not italic) in #0b0b10, running on in the same line. COLOUR: text #0b0b10; secondary #5c5c68; borders #e4e4e8; large panels in flat #f2f2f4; white cards. Purple #8331A7 ONLY for icons, strokes, thin borders and data marks (dots, wave bars, progress and chart bars): never as a background, on buttons, on active states or as a tint. To make something stand out, use black #0b0b10. States: red #e5484d, green #30a46c, amber #e8a33c. ILLUSTRATIONS: intense full-bleed gradients with two radial-gradients in opposite corners over a base colour, with grain on top (feTurbulence fractalNoise .85, 3 octaves, desaturated, opacity .5, 180 px tile, background-blend-mode overlay). Palettes: fire (#ffd23f, #ff2e4d, base #ff7a1a), ocean (#43f0ff, #0031e0, base #1672ff), lime (#e6ff3d, #009c63, base #32cc72), pink (#ffc29a, #ff1f68, base #ff5c7c), turquoise (#2dffcb, #0a7cff, base #00bfb3), ink (#2a5cff, #ff6a2b, base #0e0f16). A different one on each card. None may produce purple or lavender. Nothing pastel. Anything on top of the gradient goes in white (text at 92%, secondary bars at 50%). ICONS: lucide-react, stroke 2, 13-16 px, in purple, free-standing, never inside a box or circle. COMPONENTS: primary button: #0b0b10 pill with white 15px/500 text, padding 10×18 (hover #2a2a33); secondary: white pill with a #dcdce2 border (hover #b9b9c2). Labels: white pill, #e4e4e8 border, 13px/500, #3a3a44 text, 14 px purple icon. White cards, 12 px radius, 1 px border, shadow 0 1px 2px rgba(16,16,24,.04), 0 8px 24px rgba(16,16,24,.05) or none. Hero backdrops with a 16 px radius. Tabs as a segmented control: #f0f0f3 track, active tab in white with a soft shadow. Allowed radii: 999, 16, 14, 12, 10, 9 and 2 px. MOTION: only transform and opacity; hover 0.2 s ease; entrance 0.4 s rising 6 px. Everything switches off with prefers-reduced-motion. TEXT: initial capital on labels and buttons; never whole words in capitals or text-transform: uppercase. No emojis or exclamation marks. Banned: revolutionary, cutting-edge, state-of-the-art, empower, unlock, seamless, “it's not just X, it's Y” (in Spanish: revolucionario, de vanguardia, última generación, potenciar, desbloquear, sin fisuras, «no es solo X, es Y»). Do not make up figures, customers or testimonials. MESSAGING: never say that voicemail calls are not billed or cost nothing; say “big savings on voicemail” (in Spanish: «gran ahorro en buzones»). Never promise always-clean numbering. Do not name PulseDial or 008: say “omnichannel dialling” and “AI voice and WhatsApp agents” (in Spanish: «marcación omnicanal» and «agentes IA de voz y de WhatsApp»). The AI agent is represented with Lucide's Bot icon. ACCESSIBILITY: minimum contrast 4.5:1, visible focus, a 2D alternative to any 3D, no horizontal scroll on mobile (24 px margin). AVOID: glassmorphism and backdrop-filter on cards, coloured shadows, glows, gradient text, a centred hero with a screenshot in perspective, three identical cards with a boxed icon, the Sparkles icon, radii of 20 px or more, bg-gradient-to-r from-purple. ``` ### three.js scene ```text Create a three.js scene (r186, ES modules) in Astroline's 3D style. Follow this recipe: WebGLRenderer with antialias and alpha, transparent clearColor, outputColorSpace SRGB, NeutralToneMapping, PMREM from RoomEnvironment as the environment, one white DirectionalLight from the upper left with a soft shadow, a near-frontal, slightly elevated orthographic camera, an invisible floor with a very faint ShadowMaterial, and pieces in frosted glass (white MeshPhysicalMaterial, roughness .18, clearcoat 1, opacity 0.46) and matte white clay. Purple #8331A7 only on the highlighted piece, with a soft emissive. Status colours: red #e5484d, green #30a46c, amber #e8a33c. The pieces do not move: what moves are the travelling dots and a slow camera sway. Quadratic ease-in-out curve. Background: the canvas is transparent and sits on top of a vivid gradient backdrop with grain, made in CSS. Labels: in HTML on top of the canvas, projecting the 3D position to the screen on every frame (transform translate), with the glass badge style from section 9. Performance: maximum pixelRatio 1.5, shadows with autoUpdate false, render only when the canvas is visible and the tab is active, dispose of geometries and materials on unmount. With prefers-reduced-motion, a single still frame. Without WebGL, a 2D fallback. Scene: [DESCRIPTION]. ``` ### 3D image or illustration ```text Minimal 3D product illustration for a voice carrier brand. Subject: [SUBJECT, e.g. three frosted-glass gates filtering a stream of small white dots that flow left to right into three white blocks]. Materials: white frosted glass with a clear-coat sheen, semi-translucent (opacity about 0.46), and matte white clay. Lighting: one soft white key light from the upper left, soft studio environment, very soft contact shadows at low opacity. Camera: orthographic, near-frontal, slightly elevated, rotated about 17 degrees, no perspective distortion. Background: full-bleed intense gradient, [PALETTE, e.g. electric blue #1672ff base with a cyan #43f0ff glow top-right and deep blue #0031e0 bottom-left], with fine monochrome film grain. Accent: a small purple #8331A7 glow on one highlighted element only. Mood: calm, precise, premium, lots of negative space, 3 to 4 elements at most. Negative: no text, no letters, no numbers, no logos, no people, no faces, no robots, no brains, no circuits, no holograms, no neon, no bloom, no lens flare, no chrome, no purple or lavender background, no pastel colours. ``` ### Generated video shot ```text [6]-second shot, [16:9 / 9:16], 30 fps. Scene: [SAME SCENE AS THE IMAGE PROMPT]. Camera: very slow lateral dolly of a few degrees, orthographic look, no rotation, no zoom. Motion: small white dots travel along glass tubes at constant speed; one gate lights up [amber #e8a33c / red #e5484d / green #30a46c] for about one second as a dot passes. Every object keeps its exact shape and position. Lighting and background: as above, with fine film grain. Negative: no text, no logos, no people, no cuts, no flicker, no morphing, no camera shake, no colour shift towards purple or lavender. ``` ### Copy (web, posts, emails, scripts) ```text Write [PIECE] for Astroline, a voice carrier for contact centres and for sales and collections teams that make millions of calls a month. MARKET: [MARKET] TONE: specific, confident and unadorned. The fact comes before the adjective. Sentences of fewer than 20 words. TWO-BEAT HEADLINE: fact + what the customer gains, each part ending in a full stop and 8 words at most. Example: «Detectamos el buzón antes del descuelgue. Y el contacto sigue por WhatsApp.» (“We detect voicemail before the call is answered. And the contact continues on WhatsApp.”) LENGTHS: subheading of 40 words at most; features with a title of up to 6 words and one sentence of up to 20. FORMAT: initial capital; no whole words in capitals, no emojis, no exclamation marks. Angle quotes «» in Spanish. BANNED: revolutionary, disruptive, cutting-edge, state-of-the-art, empower, unlock, seamless, “it's not just X, it's Y”, “imagine”, three adjectives in a row, made-up figures, “leader” (in Spanish: revolucionario, disruptivo, de vanguardia, última generación, potenciar, desbloquear, sin fisuras, «no es solo X, es Y», «imagina», «líder»). NEVER: say that voicemail calls are not billed; promise always-clean numbering; name PulseDial or 008. ALLOWED FACTS: voice in more than 85 countries; POPs in Madrid, Amsterdam, Virginia, Monterrey, Bogotá, Lima and São Paulo; ISO 27001:2022; voicemail detection in early media, by frequency, before the call is answered. Give me three headline options and explain in one line what each one has going for it. ``` --- ## 27. Checklist before publishing A team member goes through this list with the piece in front of them; if it fails a point marked **Never**, the piece does not go out. ### Message - [ ] It tells a single idea and can be summed up as “more calls that end in a conversation”. - [ ] It is made for a specific market and respects what can be said there (spam, rotation and SMS only in Mexico; 400 numbering only in Spain). - [ ] **Never:** says that voicemail calls are not billed or cost nothing. - [ ] **Never:** promises always-clean numbering or replacing spam-flagged numbers. - [ ] **Never:** names or shows PulseDial, 008 Agent or 008 Engage as our product. - [ ] Every figure is real and is on the list of allowed facts. ### Text - [ ] The headline is two-beat, with a full stop in each part. - [ ] It uses the market's form of address (tú, usted or you) and the correct spelling (en-GB or en-US). - [ ] Labels and buttons with an initial capital; no whole word in capitals. - [ ] No word from the banned list, no emojis, no exclamation marks. - [ ] Product names are spelt correctly (VHunter, ASR Vooster, SIP Trunk, WhatsApp Calling). - [ ] Sample phone numbers are fictional or masked. ### Design - [ ] A single typeface: General Sans, no 700 weights. - [ ] **Never:** purple as a background, on buttons, on active states or as a tint (as a fill, only in data marks). - [ ] No pastel gradients and none that produce purple or lavender; all with grain. - [ ] Lucide icons, free-standing and with no container. - [ ] White cards with a 1 px border, radii from the list and large panels in flat grey. - [ ] None of the signs of “made with AI”. ### Code - [ ] Uses the tokens from section 13 or the Tailwind preset from section 20; no invented colours, radii or shadows. - [ ] Figures formatted with the market's `toLocaleString` and `tabular-nums`. - [ ] Only `transform` and `opacity` are animated; no `backdrop-filter` over moving scenes. - [ ] Everything stops with `prefers-reduced-motion`. - [ ] The 3D has a 2D fallback and a capped pixel ratio, and frees memory on unmount. - [ ] 4.5 : 1 contrast on reading text, visible focus and no horizontal scroll on mobile. - [ ] Each language has its own copy and its own `lang`. ### Logo - [ ] It is the official SVG, in the right version for the background. - [ ] It respects the minimum size and the clear space. - [ ] **Never:** generated, redrawn, recoloured or with effects. ### Generated images, video and voice - [ ] No text, logos or generated faces inside the image. - [ ] No generated person is presented as a customer, employee or testimonial. - [ ] Reviewed frame by frame: no distortion, flicker or colour shifts. - [ ] Subtitles added, and closing logo with the market's call to action. - [ ] The voice does not imitate a real person without their written consent. - [ ] If it is realistic synthetic content, it is labelled wherever the platform or the law requires it.