---
name: grupo-tera-design
description: Use this skill to generate well-branded interfaces and assets for Grupo Tera, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
user-invocable: true
---

# Grupo Tera — Design Skill

Grupo Tera is a corporate ecosystem operating in smart cities, BIM, AI, Lean Construction, IoT, ESG, architecture and real estate. The brand is **ultra-premium, cinematic, dark-first, holographic** — never SaaS, never startup.

## How to use this skill

Read the `README.md` file within this skill, and explore the other available files. It contains all foundations (brand context, content voice, visual foundations, iconography).

If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. The fastest path:

1. Link `colors_and_type.css` from this skill in any new HTML file.
2. Reuse components from `ui_kits/website/` — copy the JSX files you need (`Nav.jsx`, `Hero.jsx`, `HoloPlanet.jsx`, `Sections.jsx`) and their CSS.
3. Lift the holographic planet (`HoloPlanet.jsx`) for any hero/feature that needs the brand's signature motif.
4. Use Lucide via CDN for icons (`https://unpkg.com/lucide@0.395.0/dist/umd/lucide.min.js`). All names are kebab-case.

If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand. The system is tech-stack agnostic — CSS tokens map cleanly into Tailwind, CSS Modules, styled-components, etc.

## Critical brand rules — do not violate

- **Dark only.** No light mode. Base is `#05070D`.
- **No emoji. No unicode-as-icon.** The brand's only decoration is the mono `[ section / counter ]` eyebrow.
- **No bouncy springs, no neon sat-pumps, no gamer aesthetics.** Motion is cinematic ease-out, 320–1200ms, 0–8px translates.
- **Glass everywhere but disciplined.** `backdrop-filter: blur(24px) saturate(140%)` is the load-bearing effect.
- **Spanish-first copy.** Corporate, declarative, third-person. Never "we ship" or hype.
- **No bluish-purple SaaS gradients.** The brand has its own gradient: `linear-gradient(135deg, #7C5CFF, #22D3EE, #10E0C7)`.

## Asking the user

If the user invokes this skill without other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code depending on the need. Always ask:

1. Output format (slide deck, landing page, app screen, sub-brand)
2. Surface (mobile, desktop, presentation)
3. Whether they need variations / tweaks
4. If they want the holographic planet to appear, or a calmer treatment

## File index

- `README.md` — full brand & visual foundations
- `colors_and_type.css` — all tokens, importable directly
- `assets/` — logo, mark (SVG placeholders)
- `fonts/` — font setup (Google Fonts CDN)
- `ui_kits/website/` — full website recreation with reusable JSX components
- `preview/` — design system card specimens