t.Co. — Design System

01

Colors

Three-tier system: background surfaces, semantic accents, and text hierarchy. Click any hex to copy.

Surfaces — Dark Mode

Background

#0A0A0F

Surface

#13131A

Card

#1C2230

Border

#2A3245

Surfaces — Light Mode

Background

#FAFAF7

Surface

#FFFFFF

Card

#F4F1EB

Border

#E2DDD4

Accent

Gold

#C8A96E

Gold (Light)

#9A7A3E

Teal

#4ECDC4

Purple

#7C6FCD

Amber

#F8B743

Red

#E05A5F

Text

Primary

#F0EDE8

Secondary

#8A95AA

Muted

#4A5568

02

Typography

Poppins for Latin/UI, Noto Sans Hebrew for RTL content, JetBrains Mono for code and data.

LIVE SCALE

Display — AI Travel Concierge

38pxBold 700letter-spacing: -0.02em Poppins

H1 — Your Journey Begins Here

32pxSemiBold 600Poppins

H2 — Intelligent Itinerary Planning

22pxMedium 500Poppins

H3 — Section Label / Gold Accent

15pxMedium 500color: GoldPoppins

Body — t.Co. analyzes your preferences, budget, and schedule to craft a personalized travel experience. Every recommendation is powered by 11 specialized AI agents working in concert.

15pxLight 300line-height: 1.7Poppins

Label — Section Title / Key Info

10pxMedium 500UPPERCASE · 0.10em spacingPoppins

Caption — Last updated 04 April 2026 · Version 1.0 · HIT M.Design

10pxLight 300color: MutedPoppins

const agent = new TravelConcierge({ lang: 'he', mode: 'dark' })

13pxRegular 400color: TealJetBrains Mono

כותרת בעברית — יועץ נסיעות AI

28pxSemiBold 600direction: rtlNoto Sans Hebrew

גוף עברית — t.Co. מציע חוויית נסיעה מותאמת אישית, מתוחכמת וחכמה.

22pxLight 300direction: rtlNoto Sans Hebrew

Poppins — Latin / UI / Numbers

Light 300 — Travel Intelligence Regular 400 — Travel Intelligence Medium 500 — Travel Intelligence Bold 700 — Travel Intelligence

Noto Sans Hebrew — RTL / עברית

Light 300 — יועץ נסיעות SemiBold 600 — יועץ נסיעות

03

Spacing

8px base grid. All layout values are multiples of 8.

SCALE

--sp-half4pxIcon gaps, tight pairs

--sp-18pxBase unit · button padding-y, badge gap

--sp-216pxCard inner gap, list item spacing

--sp-324pxCard padding, section sub-groups

--sp-432pxSection horizontal padding

--sp-648pxSection vertical padding

--sp-864pxMajor section breaks

--sp-1080pxBetween DS sections (this page)

--radius-btn8pxButtons, inputs

--radius-card12pxCards, panels

--radius-pill20pxBadges, theme pills

04

Motion

Subtle and purposeful. Hover the cards to preview each easing.

Lift / Hover

0.2s ease

Scale / Expand

0.25s spring

Fade

0.2s ease

Rotate

0.3s ease

Pulse (AI active)

2s infinite

Color shift

0.2s transition

05

Buttons

Four semantic variants, three sizes. Gold is the primary action color.

VARIANTS

Sizes

/* Primary button */
.btn-primary {
  background: var(--gold);
  color: #0A0A0F;
  border-radius: var(--radius-btn);  /* 8px */
  font-weight: 500;
}

06

Badges & Status Pills

Used for task types, agent states, and system status. Labels always in English.

ALL VARIANTS

KEY DESIGN DEV IMPL QA DOCS FIX SUBMIT LIVE CONTENT

07

Cards

Elevated surfaces. No shadows — depth via background contrast and border only.

Agent · AGT-01

Trip Planner

Orchestrates the full journey from initial request to confirmed itinerary.

DEV LangGraph

Agent · AGT-04

Flight Monitor

Real-time flight tracking, delay alerts, and alternative routing.

IMPL FlightRadar24

08

Inputs

Minimal form fields with gold focus ring. Error state uses red.

Destination

Travel Dates Format: MMM DD → MMM DD, YYYY

Passport Number Invalid format — use XX-XXXXXXX

09

Tables

Dark header row, alternating rows, monospace for data values.

#	Agent	Status	API	Phase
AGT-01	Trip Planner	KEY	LangGraph	P2
AGT-03	Hotel Scout	DEV	Amadeus	P2
AGT-06	Language & Culture	IMPL	DeepL	P3
AGT-09	Budget Tracker	DESIGN	internal	P2

10

Notifications

Left-border accent style. Four semantic levels mapped to accent palette.

✦

Itinerary Ready

Your 7-day Tokyo journey has been confirmed and is ready to review.

◈

AI Processing

Flight Monitor is scanning 14 alternative routes for your connection.

⚠

Flight Delay Detected

TLV → NRT delayed 45 min. Budget impact: +₪120. Approve rerouting?

✕

API Unavailable

Amadeus connection lost. Retrying in 30s with fallback provider.

11

Status System

Consistent across project plan, agent dashboard, and UX spec pages.

KEY

#C8A96E

Critical milestones, must-ship features

DESIGN

#7C6FCD

Visual design, UX flows, prototyping

DEV

#4ECDC4

Frontend / backend development

IMPL

#4ECDC4

Implementation, integration work

QA

#F8B743

Testing, quality assurance

DOCS

#7C6FCD

Documentation, academic writing

FIX

#E05A5F

Bug fixes, corrections, patches

SUBMIT

#C8A96E

Submission deadline markers

LIVE

#C8A96E

Exhibition days, live deployment

12

Icons

Inline SVG only. 20×20 default, 16×16 small. Color via currentColor.

clock

location

hotel

flight

calendar

budget

chat

ai

13

CSS Tokens Reference

Complete variable list — import tco-design.css in every page.

/* ── tco-design.css · :root (dark default) ── */
:root {
  /* Surfaces */
  --bg:           #0A0A0F;
  --surface:      #13131A;
  --card:         #1C2230;
  --border:       #2A3245;

  /* Accents */
  --gold:         #C8A96E;
  --gold-dim:     rgba(200,169,110,0.12);
  --teal:         #4ECDC4;
  --purple:       #7C6FCD;
  --amber:        #F8B743;
  --red:          #E05A5F;

  /* Text */
  --text-primary:   #F0EDE8;
  --text-secondary: #8A95AA;
  --text-muted:     #4A5568;

  /* Shape */
  --radius-card:  12px;
  --radius-pill:  20px;
  --radius-btn:   8px;
  --transition:   0.2s ease;
}