# ITCAN reimagined: design brief

**Client:** ITCAN Pte Ltd, Singapore. Technology consulting, custom solutions, outsourcing and staffing, managed applications. Offices in Singapore, Malaysia, Australia, Hong Kong. Recruitment product: Talent Suite.

## Design read
For CIOs, delivery heads and HR directors at Singapore enterprises and government-linked companies who need a technology partner that does not drop the ball. Register: precise, quiet confidence, expensive but not showy.

## Concept spine
**The keystone lattice.** Every ITCAN engagement is a load-bearing structure: people and technology blocks slot together into something that holds. The site is a precision instrument that assembles in front of the visitor. The film shows scattered obsidian and steel blocks locking into an interlocking lattice with a signal-red core.

## Delivery tier
`spectacle`. Scroll-driven film as the hero spine, custom cursor, second beat: 3D-feel tilt on the Talent Suite panel and a magnetic primary CTA.

## Locked palette (sampled from the client's logo, logo.png: red #E80000 and blue #0000C8)
- Ground `#070A1F` deep navy (the logo blue pulled down to a ground; not pure black)
- Ground raised `#0E1230`
- Ink `#F3F1EC` bone
- Muted `#9AA0B8`
- Hairline `#1E2448`
- Accent `#E80000` ITCAN logo red (primary accent, CTAs, red core)
- Accent 2 `#2E2EFF` ITCAN logo blue lifted for contrast (hairline glows, active states, icon strokes)

Defense: the user asked to keep the logo palette. Red and blue are both logo colours, so blue becomes the ground family and a secondary glow while red stays the single loud accent. The client logo PNG is used as-is in the nav and footer.

## Locked type
Display and body: **Outfit** (geometric grotesk, wide and confident at large sizes). Mono labels: **IBM Plex Mono**. No serif.

## Animation mode: animated-website
User picked Animated at intake ("animated aesthetic 3D website, very unique").

### Journey shape: single-shot
One continuous ~15s film, 16:9, no cuts.

### Journey (4 chapters over one film)
1. **Hero** (0 to 25%). Scattered blocks in darkness. Kicker: none. Headline: "Technology that holds." Body: "ITCAN builds, staffs and runs the systems Singapore enterprises depend on." Tags: Singapore, Malaysia, Australia, Hong Kong.
2. **Consulting and solutions** (25 to 50%). Blocks drifting together. Headline: "Advice that becomes a build." Body: "Business consulting and custom solutions from one team, so the plan and the code never disagree."
3. **Outsourcing and staffing** (50 to 75%). Lattice half-assembled, red seams. Headline: "The right people, placed fast." Body: "Vetted engineers and analysts deployed at your site, managed by ITCAN, backed by Talent Suite."
4. **Managed applications** (75 to 100%). Finished lattice, red core lit. Headline: "Run, watched, kept alive." Body: "Application management with named owners and response times you can hold us to."

### World grammar (byte-identical preamble for every generated asset)
"Ultra-premium 3D render, dark studio void in deep graphite-blue #0E1420, soft top-left key light, matte obsidian-glass and brushed-steel rectangular blocks with crisp bevels, one signal-red #C8102E light source, subtle reflections, clean empty negative space on the left third, locked exposure, no text, no logos, no watermark."

### Mobile framing
Structure kept in the centre-safe area; copy stacks at the bottom on mobile. Mobile encode capped at 720p.

### Delivery budget
Desktop clip ≤ 32 MiB, mobile clip ≤ 16 MiB.

## Section plan (after the journey)
1. Journey chapters (4, over the film). Layout family: full-bleed film with pinned copy.
2. Services: hover-accordion slices (4 vertical slices). Composition: top-left lead.
3. Proof strip: oversized metrics strip (4 countries, awards 2007 to 2023, 4 service lines). Composition: centered statement.
4. Talent Suite: image-as-canvas product panel with tilt. Composition: bottom-left over image.
5. Awards: vertical rhythm line timeline with oversized numeral. Composition: off-grid offset. Second-read moment: the oversized "2007" numeral as structure.
6. Careers plus contact: banner CTA band in red, then footer row of four cities. Composition: stacked center.

Eyebrow budget: ceil(6/3) = 2. Used: services ("What we do"), awards ("Since 2007").

## Asset plan
- Storyboard (1 image, 6-panel) then the single-shot film (Seedance 2.5, 15s, 1080p, audio off).
- Section boards: services, Talent Suite, awards/footer.
- Launch cover and OG (app-cover recipe, GRAPHIC route).
- Icon sheet: 8 line glyphs in bone on graphite (consulting, code, people, server, shield, clock, award, globe), sliced and background-removed.
- Section plates: obsidian macro plate (services background), steel plaque (awards).
- Talent Suite dashboard image (abstract dark UI, no readable text).
- Favicon: inline SVG "I" monogram on signal red (client logo not supplied).

## CTA inventory (each its own component)
- `TalkCta`: primary, framed block with red hairline frame that fills on hover, magnetic on desktop. Label "Talk to ITCAN" (nav, hero, contact band). One label page-wide.
- `SuiteLink`: underlined inline link with arrow that slides. Label "Explore Talent Suite".
- `CvBanner`: full-width banner button in the careers band. Label "Send your CV".
- Chapter route buttons: engine-provided, restyled.