Skip to content
Tech360 logo

Design system

The Tech360 design kit

Every diagram, button, infographic and interface mockup the website and the client platforms use — rendered live from the production components, so what you review here is exactly what ships. The set covers accessible sequence, funnel and swimlane diagrams, eight infographic layouts, and the three product surfaces (website, CRM console, admin dashboard).

01 · Actions

Buttons and link affordances

One primary action per screen, outlined and secondary actions beside it, and a visible focus ring on every control. All buttons meet a 44px minimum touch target.

Primary · one per screen

Used for the single most important action.

Start a projectSee our work

Secondary · supporting actions

Explore servicesHow we workRead the FAQ

Grouped actions

Stacked on mobile, inline from the small breakpoint.

Book a consultationPrivacy policy

Embedded and progressive affordances

Card-level links and inline “learn more” arrows.

Industry pages20 verticals with their own intake flowRead the delivery process

Honest-by-default components

The WhatsApp action renders nothing at all unless a number is supplied — the owner removed the public WhatsApp route, so no dead button is shown.

Chat on WhatsAppRendered output: nothing (component returns null while unconfigured).

02 · Diagrams

Accessible diagram set

Diagrams are drawn as real SVG with a text alternative, a title band, numbered steps and a legend — readable by screen readers and legible in print. Each one carries a border, a surface and a caption, never colour alone.

Sequence · portal sign-in

Client portal sign-in with a one-time code1. Client to Tech360 Portal: Client ID + email or phone. 2. Tech360 Portal to Tech360 Portal: Match record, rate-limit. 3. Tech360 Portal to Message channel: Send 6-digit code. 4. Message channel to Client: Code arrives (valid 10 min). 5. Client to Tech360 Portal: Enter the code. 6. Tech360 Portal to Client: Secure session cookieSecurity · SequenceClient portal sign-in with a one-time codeClientBROWSERTech360 PortalNEXT.JS APIMessage channelEMAIL · WHATSAPP · SMS1. Client ID + email or phonePOST /api/portal/login2. Match record, rate-limit3. Send 6-digit codeto the contact on file4. Code arrives (valid 10 min)5. Enter the codesigned challenge + code6. Secure session cookieHttpOnly · SameSite

Funnel · pipeline to handover

From first message to handoverStage 1: First message, any channel → Client ID. Stage 2: Scope & questions, business detection · plan. Stage 3: Approved scope, admin + client approval. Stage 4: HTML preview, shown BEFORE any payment. Stage 5: Verified payment, milestones confirmed by finance. Stage 6: Build & review, tasks · testing · client review. Stage 7: Final payment, gate to source release. Stage 8: Handover, source package · credentials · supportPipeline · FunnelFrom first message to handoverFirst messageany channel → Client ID01Scope & questionsbusiness detection · plan02Approved scopeadmin + client approval03HTML previewshown BEFORE any payment04Verified paymentmilestones confirmed by finance05Build & reviewtasks · testing · client review06Final paymentgate to source release07Handoversource package · credentials · support08

Swimlane · who does what, in order

Who does what, in order1. Client: Sends first message. 2. AI workforce: Creates Client ID, drafts scope. 3. Tech360 team: Reviews & approves scope (gate). 4. AI workforce: Builds HTML preview. 5. Client: Reviews preview, approves (gate). 6. Tech360 team: Verifies payment, starts build. 7. Tech360 team: Delivers & hands over sourceDelivery · SwimlaneWho does what, in orderClientAI workforceTech360 teamSends firstmessageCreates ClientID, draftsscopeReviews &approves scopeBuilds HTMLpreviewReviewspreview,approvesVerifiespayment, startsbuildDelivers &hands oversource

Infographic · delivery lifecycle

Infographic · quality checklist

Infographic · cloud architecture

Infographic · security architecture

03 · Product surfaces

Interface concept mockups

Concept mockups of the three surfaces the platform delivers: the public website, the client CRM workspace and the admin dashboard. All three are drawn with the same tokens as the live product.

Website concept

CRM workspace concept

Admin dashboard concept

04 · Playground

Component playground — realistic business contexts

The same primitives in real jobs: CRM board, inbox bubbles and marketing calendar — plus empty, loading and error states. All components support light and dark themes and are keyboard-accessible.

NEW

Acme Ltd — TECH-2026-0001
Beta Co — TECH-2026-0002

CONTACTED

Gamma LLC — TECH-2026-0003

DEVELOPMENT

Delta — PRJ-2026-0001
Filter: stage = NEWPriority: HighKanban · drag between stages · keyboard: Space to pick, arrows to move
Empty state: No leads match these filters — clear filters to see all records.
Notifications· File upload· Timeline· Media player· Agent execution card· Approval dialog · Light & dark reviewed

05 · Foundations

Colour, type and spacing tokens

Tokens are shared between the marketing site and the client platforms so a generated application inherits the same visual language the day it is handed over.

Brand blue

#063B8F

Primary actions, headings, footer

Accent cyan

#009FE3

Focus rings, links, highlights

Success green

#18B83A

Confirmations, delivered states

Warning amber

#F59E0B

Pending / needs attention

Danger red

#EF4444

Failures, refusals, destructive

Ink

#0B1F33

Body copy on light surfaces

Surface

#F7FAFC

Page background

Console ink

#0B1220

Admin console background

Type scale

Display · 30–36px

Section heading · 20–24px

Body · 16px with 1.75 line height for long-form reading.

Meta · 14px, used for captions, dates and helper text.

Eyebrow · 11px, tracked

Spacing & radius

  • 4pxIcon gaps
  • 8pxInline spacing
  • 12pxButton padding
  • 16pxCard padding (mobile)
  • 24pxCard padding (desktop)
  • 32–48pxSection rhythm
  • radius 8 / 16pxControls / cards

Accessibility rules the kit enforces

  • • Every diagram has an aria-label or text alternative.
  • • Focus is always visible via a 2px #009FE3 ring.
  • • Minimum 44px touch targets on all controls.
  • • Colour is never the only signal — icons and labels carry the meaning.
  • • Motion respects prefers-reduced-motion.
  • • Text contrast targets WCAG AA on every surface.

The same kit powers generated client applications, so a delivered app looks like a Tech360 product on day one.