Teqfocus Taste

Teqfocus Taste — Persistent Design Identity

The Teqfocus visual identity encoded as a standing brief. This skill prevents AI-generated output from looking like every other B2B SaaS consultancy — and makes every Teqfocus asset unmistakably ours.

What This Skill Is

This is not a style guide PDF that no one reads. This is the Teqfocus design identity encoded as instructions that Claude carries into every design decision — without being re-explained each session.

After running /teach, Claude knows:

• The exact colors, weights, and spacing that make Teqfocus visual identity
• What patterns to avoid (the AI slop fingerprints that make us look generic)
• The aesthetic intention behind each design decision
• The difference between a Teqfocus ABM microsite and a generic SaaS landing page

Commands

/teach

Run once per project. Establishes persistent design context.

Saves a .teqfocus-design.md file in the project root with all design tokens and taste rules. Future sessions load this file automatically.

<!-- .teqfocus-design.md — auto-generated by /teach, edit to customize -->

# Teqfocus Design Context

## Identity
Brand: Teqfocus — Data & AI Company, Salesforce Summit Partner
Audience: CIO, CDO, VP Data/AI at enterprises in Healthcare, Insurance, Hi-Tech
Tone: Authoritative, precise, approachable — like a trusted senior practitioner
Register: [BRAND or PRODUCT — update per project]

## Color Tokens
--tq-light-purple:  #BD72EF   /* Primary — headlines, CTAs, accent bars */
--tq-slate-blue:    #7751E2   /* Secondary — subheads, icons, borders */
--tq-dark-purple:   #59267E   /* Footer bars, labels, H1 text */
--tq-light-blue:    #8E9BF5   /* Supporting icons, tag backgrounds */
--tq-green:         #21A88A   /* Success states, positive callouts */
--tq-dark-blue:     #244495   /* Body text, supporting copy */
--tq-light-orchid:  #D48EEF   /* Soft fills, hover tints, dividers */
--tq-dark-orchid:   #A33BC7   /* Mid-weight accents, card borders */
--tq-mauve:         #E2B0F3   /* Subtle background tints */
--tq-white:         #FFFFFF   /* ALL backgrounds — mandatory */
--tq-gradient:      linear-gradient(135deg, #BD71EF, #8D9BF5)

## Typography
Primary:  Poppins (700 headings, 600 subheadings, 400 body)
Fallback: Calibri, sans-serif
Load:     @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
Never use: Inter, Roboto, Arial, Space Grotesk, DM Sans

## Spacing System (8px grid)
--space-1: 8px
--space-2: 16px
--space-3: 24px
--space-4: 32px
--space-6: 48px
--space-8: 64px
--space-12: 96px

## Layout Rules
Background: #FFFFFF always — no dark backgrounds, no gradient fills
Max content width: 1200px
Body text max-width: 680px
Min section padding: 80px top/bottom (desktop), 48px (mobile)
Min page margin: 48px sides (desktop), 24px (mobile)
Border radius: 8px for cards, 6px for inputs, 8px for buttons

## Brand Signatures
1. Top accent bar: 5px, gradient #BD71EF → #8D9BF5, full width
2. Left accent bar on cards: 4px solid #7751E2
3. Footer band: #59267E background, white logo + text
4. CTA button: #BD72EF fill, white Poppins Bold text
5. Focus ring: 0 0 0 3px rgba(189, 114, 239, 0.15)

## Anti-patterns (NEVER generate)
- Inter or Roboto as primary font
- Purple-to-blue gradient as page background
- Pure #000000 text (use #244495 or #59267E)
- Card nested in card nested in card
- 3-column icon tile grid as default layout
- Multiple competing CTAs at equal weight
- Decorative animations without functional purpose
- "Click here" / "Learn more" as CTA text
- Generic stats without [VERIFY] flag

/generate [component or page description]

Build a Teqfocus-branded component or page from scratch.

Before writing any code:

1. Load .teqfocus-design.md if present in the project
2. Identify the register: Brand (marketing) or Product (functional)
3. Confirm the target persona and primary CTA
4. Then generate — applying all tokens and taste rules from context

Taste principles applied during generation:

• Start from the message, not the layout template
• Choose a specific aesthetic direction before writing a line of CSS
• White space first — content that breathes reads as confident
• One focal point per screen — hierarchy, not equality
• Earn every decorative element — if it has no functional job, remove it

/restyle [existing code or screenshot]

Apply Teqfocus taste to existing output that looks generic.

Step 1: Identify the slop fingerprints (check against anti-pattern list) Step 2: Apply Teqfocus color tokens Step 3: Replace generic font with Poppins Step 4: Add brand signatures (accent bar, left card border) Step 5: Polish interactions (hover states, focus rings, transitions) Step 6: Run /audit pass before delivering

/extract [codebase or component]

Extract reusable Teqfocus design patterns from existing code.

Produces a component inventory:

• What components exist
• How they currently implement brand tokens (or where they deviate)
• Recommended token names for each design decision
• A DESIGN.md summary compatible with the .teqfocus-design.md format

Use when: onboarding to an existing Teqfocus project, auditing consistency across multiple pages, or building a shared component library.

The Teqfocus Aesthetic — What Makes It Distinctive

Most B2B consultancy sites look the same. Here is what makes Teqfocus visually distinct — and what to protect:

Purple as authority, not as decoration

Purple is rare in enterprise B2B design. Most firms use blue. Teqfocus's #BD72EF → #59267E palette reads as confident and distinctive when used with restraint. The trap is using it everywhere — that's when it starts looking like the generic SaaS gradient.

The rule: Purple appears in headings, thin accent bars, CTA buttons, and the footer. White is the canvas. Purple is the punctuation.

White space as a positioning signal

Generous white space is itself a message — it signals that Teqfocus isn't rushing to fill the page with features and bullets. It signals confidence. A page that breathes says "we know what matters."

The rule: When in doubt, add white space. The visual quality almost always goes up.

Poppins as precision

Poppins Bold at the right size reads as precise and authoritative — not corporate, not cold. The key is weight hierarchy. When Poppins 700 and Poppins 600 appear together, the difference reads clearly. When two weights are too close (600 and 700 at the same size), it looks like an accident.

The rule: Clear weight separation. 700 for titles. 600 for subheads. 400 for body. Never two weights within 100 of each other at the same size.

Left accent bars as spatial grammar

The 4–6px left accent bar on cards and callout blocks is a Teqfocus signature. It creates a consistent visual rhythm without filling large areas with color. At a glance, it tells the reader: "this is a discrete unit."

The rule: Use on cards, case study blocks, callout boxes, pull quotes. Consistent color: #7751E2 (slate blue) at rest, #BD72EF (light purple) on hover or for primary callouts.

Motion as confirmation, not entertainment

Teqfocus interfaces don't animate for style. They animate to confirm interactions, direct attention to new content, and show relationships. A CTA button that gives subtle feedback on hover is more trustworthy than one that doesn't respond. That's the logic.

The rule: If removing the animation would confuse a user — keep it. If they wouldn't notice it's gone — remove it.

Presets

Preset: ABM Microsite (Brand register)

For named-account targeted landing pages. Design intent: Premium, considered, personal. Signals that the page was made for this specific person — not generated.

Aesthetic dials:

• Typography: Display headline large, breathing room generous
• Color: Generous white space, purple used sparingly as punctuation
• Layout: Single-column hero with accent bar, 2-column content, strong CTA
• Motion: Scroll-reveal on content sections, hover states on CTA
• Persona match: Industry-specific language, proof from same vertical

Preset: Demo Artifact / Dashboard (Product register)

For Agentforce demos, data dashboards, functional prototypes. Design intent: Precise, information-dense where needed, clearly organized. Signals that the product does what it promises.

Aesthetic dials:

• Typography: Slightly smaller body (13–14px), Poppins Regular throughout
• Color: Data visualization uses full Teqfocus color system (bars, lines)
• Layout: Higher density acceptable, clear section separation
• Motion: Minimal — only state changes and loading indicators
• Data: Format numbers correctly, design empty states, show loading skeletons

Preset: TeqTalk Visual (Brand register, social)

For carousels, quote cards, episode thumbnails. Design intent: Stops the scroll. Reads in 3 seconds.

Aesthetic dials:

• Typography: Large, bold, single idea per frame
• Color: Full #BD72EF used more liberally — social cards tolerate more color
• Layout: Portrait 4:5 for carousels, 1200×628 landscape for announcements
• Motion: Static (carousels), max 1 subtle animation for video thumbnails
• Hook: Slide 1 must contain a specific number or contrarian claim

Preset: Sales Asset (Brand register, document)

For one-pagers, capability briefs, leave-behinds. Design intent: Professional, easy to skim, leaves one clear impression.

Aesthetic dials:

• Typography: 22pt SemiBold section heads, 13–14pt Regular body
• Color: Restrained — white canvas, purple accents on headers and CTAs
• Layout: 2-column for most content, stat strip for proof points
• Motion: None (static PDF)
• Proof: Every metric from proof library, [VERIFY] on anything uncertain

Installation for Claude Code

Drop .teqfocus-design.md in the project root after running /teach. Reference it in your CLAUDE.md:

## Design System
Load and apply /home/project/.teqfocus-design.md before any frontend work.
All UI components must use the tokens defined there. No Inter, no Roboto,
no purple gradients as backgrounds. White canvas, Poppins, precision.

Every Claude Code session in that project will then inherit the Teqfocus design context without needing re-explanation.