Y-Technologies · v2.0
The design system behind every page.
Tokens, components, states, charts, illustrations, and motion — every element rendered from the same code the marketing site ships.
17
Color tokens
8
Type styles
40+
Components
16
Illustrations
Brand
The YT monogram pairs a cobalt chevron with a charcoal wordmark. Use the light variant on night surfaces; never recolor, stretch, or add effects.
Logo · light surface
/brand/yt-logo.png
Logo · dark surface
/brand/yt-logo-light.png
Mark
/brand/yt-mark.png · favicon, avatars
Clear space & minimum size
1× mark heightMinimum 24px tall on screen.
Color
A cobalt-led palette on cool neutrals. Cobalt is reserved for action and emphasis — never for large decorative fills.
Brand
Cobalt
#1554F5 · yt-cobalt
Primary actions, links, focus
Cobalt hover
#3A6FF7 · yt-cobalt-hover
Button hover
Cobalt pressed
#0F43C9 · yt-cobalt-pressed
Button active
Cobalt light
#7DA2FF · yt-cobalt-light
Accents on dark
Cobalt soft
#E8EFFE · yt-cobalt-soft
Icon tiles, highlights
Neutrals
Night
#0E131A · yt-night
Dark sections, footer
Night 2
#161D27 · yt-night-2
Raised dark surfaces
Charcoal
#252D37 · yt-charcoal
Headings, primary text
Slate
#475569 · yt-slate
Body text
Muted
#64748B · yt-muted
Captions, meta
Mist
#CBD5E1 · yt-mist
Text on dark, borders
Line
#E2E8F0 · yt-line
Dividers, input borders
Cloud strong
#EEF2F7 · yt-cloud-strong
Chips, tracks
Cloud
#F8FAFC · yt-cloud
Alternate section bg
White
#FFFFFF · white
Base surface
Semantic
Success
#16A34A · yt-success
Healthy, complete
Warning
#D97706 · yt-warning
Degraded, attention
Error
#DC2626 · yt-error
Failure, destructive
Contrast pairs
WCAG 2.2
Charcoal on white
13.9:1 · AAA
Slate on white
7.6:1 · AAA
White on cobalt
5.8:1 · AA
Mist on night
12.6:1 · AAA
Typography
Manrope for display and headings; Inter for everything people read. Tight negative tracking on large sizes, generous line-height on body.
Display / H1
Manrope 700 · clamp(40–64px) · 1.05 · −0.03em
Technology that moves you forward
H2
Manrope 700 · clamp(30–44px) · 1.1 · −0.025em
Infrastructure that holds
H3
Manrope 700 · 21px · 1.25
Enterprise IT Consulting & Cloud Migration
Lead
Inter 400 · clamp(17–20px) · 1.55
Cloud modernization, multi-tenant SaaS, and DevSecOps for teams that cannot afford fragile systems.
Body
Inter 400 · 16px · 1.6
We reject fragile single-point dependencies. Every architecture is documented to institutional-grade specifications.
Small
Inter 400 · 14px · 1.6
Canary traffic routing with instant automated rollback.
Eyebrow
Inter 600 · 12px · uppercase · 0.16em
Practice 01 · Cloud & Infrastructure
Mono
System mono · 13px
tf-module: cloud.agnostic.oci.v2
Special treatments
Spacing, radius & elevation
A 4px base grid. Sections breathe at 80–112px vertically; cards use 24–28px padding.
Spacing scale
4px base
Radius
yt-xs
4px
yt-sm
8px
yt-md
12px
yt-lg
16px
yt-xl
24px
full
9999px
Elevation
shadow-yt-card
Resting cards
shadow-yt-media
Media frames, modals
shadow-yt-cta
Primary buttons
Breakpoints
Tailwind defaults
Iconography
Material Symbols Outlined at 20–24px, weight 400. Icons sit in a cobalt-soft tile when they lead a card.
Icon set
Icon tile
<IconTile />
Form controls
Labels always visible above the field. 48px inputs, 8px radius, cobalt focus ring, inline validation with icon + text (never color alone).
Text input · states
Select, textarea, search
Selection controls
Range & file
Drop architecture docs
PDF or PNG up to 20 MB
Badges, chips & status
Status always pairs color with an icon or dot plus a text label.
Status badges
Chips & tags
<Chip />
Dot indicators & counters
Cards
Glass cards are the core container: translucent white, 16px radius, hairline border, and a pointer-tracking spotlight when interactive.
Glass card · variants
<GlassCard />
Interactive
Hover me — spotlight follows the pointer and the card lifts.
Static
For forms and dense content where motion distracts.
On dark
Night-tinted glass for dark sections.
Feature / info cards
<InfoCards />
Architectural Sovereignty
Vendor-neutral multi-cloud and hybrid foundations.
Multi-cloud parity
Scalable SaaS Platforms
Tenant isolation and distributed event-sourcing.
Executive IT Advisory
Fractional CTO leadership and SOC2 blueprints.
Metric cards
<MetricCards />
Uptime target
99.995%
SLA-backed geo-redundancy
Pipeline cadence
< 14m
Commit to production
FinOps yield
−34.8%
First-quarter run-rate
Peak TPS
120K
Verified under load
KPI card with trend
Monthly cloud spend
$182K
−12.4% vs last month
P99 latency
4.8ms
−0.6ms vs last month
Error budget burn
38%
+9% vs last month
Testimonial card
<QuoteCards />
“Y TECHNOLOGIES rebuilt our financial routing core in under 90 days.”
- Peak TPS
- 115K
- Downtime
- 0 ms
Marcus Sterling
CTO · ApexPay Global
“Flawless execution from day one, clear pull requests, and ironclad security audits.”
Founder & CEO
SynthData AI Platform
Media / case card
Case #902 · 120K TPS
Global Fintech Payment Engine
Case #841 · HIPAA
Encrypted Telehealth & EHR SaaS
Pricing / plan card
Architectural Audit
2–3 weeks
- 2 senior evaluators
- Risk & FinOps score
- Remediation dossier
Dedicated Pod
3–12 months
- Senior SRE + full-stack lead
- Sprint KPIs & reviews
- Continuous releases
Fractional CTO
6–24 months
- Principal architect
- Weekly exec sync
- Vendor & hiring reviews
Data display
Tables scroll horizontally on small screens; the first column is a row header. Timelines read left-to-right on desktop and stack on mobile.
Comparison table
<DataTable highlightLast />
| Parameter | Generic agencies | Y TECHNOLOGIES |
|---|---|---|
| Ownership | Retained IP clauses | 100% client-owned |
| Talent | Junior offshore layers | Principal engineers in Irving, TX |
| Recovery | Single-zone, manual | Active/active, sub-second failover |
Data table with status
| Service | Region | Latency | Uptime | Status |
|---|---|---|---|---|
| payments-api | us-central | 4.8ms | 99.999% | Healthy |
| ledger-writer | us-east | 11.2ms | 99.98% | Healthy |
| rag-retriever | eu-west | 38ms | 99.71% | Degraded |
| billing-sync | us-west | — | 97.20% | Failing |
Timeline
<Timeline />
2021
Irving hub opens
12 core architects.
Genesis
2022
SOC2 & ISO 27001
Zero exceptions.
Verification
2023
$500M+ processed
2.8B daily ops.
Scale
2024–25
AI fabric
Private agent clusters.
Autonomy
Progress & description list
- Headquarters
- 585 West Royal Ln, Irving, TX
- Hours
- Mon–Fri · 8 AM – 6 PM CST
- Response
- Within one business day
Charts
Hand-built SVG charts — no chart library. Cobalt for the primary series, cobalt-light for comparison, semantic colors only for status. Each animates in once when scrolled into view.
Throughput
Requests / sec (thousands)
- This week
- Last week
Cloud savings
Cumulative, $K
Deployments per week
Production releases
Compute mix
On-demand vs spot (nodes)
- On-demand
- Spot
Workload by practice
Share of engineering hours
- Cloud & infrastructure38%
- SaaS engineering27%
- DevSecOps20%
- AI & data15%
SLO attainment & load
Gauges and heatmap
Feedback & states
Every async surface defines loading, empty, error, and success. Messages say what happened and what to do next.
Alerts
Scheduled maintenance
Edge gateways restart Sunday 02:00 CST. No action needed.
Request received
A principal architect will follow up within one business day.
Budget threshold reached
Spend is at 85% of the monthly limit. Review spot allocation.
Deployment blocked
2 critical CVEs found at the scan gate. Patch base image and retry.
Toasts
aria-live=polite
Loading
Skeleton
Fetching telemetry…
Spinner
Uploading blueprint.pdf
Indeterminate
Empty, error & success states
No engagements yet
Schedule a review to start your first engagement.
Couldn’t load case studies
Check your connection and try again.
Audit complete
Your risk & FinOps score is ready to download.
Overlays
Modals use the native <dialog> for focus trapping and Escape-to-close. Menus close on outside click and Escape.
Avatars
Illustrated portraits for leadership; initials on cobalt for testimonials and lists.
Illustrations
Animated inline-SVG scenes replace photography. Each has light and dark tones, pauses offscreen, and stops under reduced motion.
16 scenes · light tone
Surfaces & backgrounds
Three section tones alternate down every page. Ambient layers stay subtle and never sit behind body text at full strength.
White
AppleTile tone=white
Cloud + aurora
tone=parchment
Night + aurora + grid
tone=dark
Glass on gradient
.yt-glass
white/70 · blur 20px · saturate 160%
.yt-glass-dark
night/60 · blur 20px · hairline white/10
Motion
Motion explains hierarchy and confirms action — it never blocks reading. All of it is disabled under prefers-reduced-motion.
Tokens
| Token | Duration | Easing | Used for |
|---|---|---|---|
| Micro | 150–200ms | ease-out | Hover color, toggles, focus |
| Standard | 300ms | cubic-bezier(.2,.8,.2,1) | Card lift, button arrow, menus |
| Reveal | 700–900ms | power3.out (GSAP) | Scroll reveals, staggers (80ms) |
| Ambient | 18–30s | linear / ease-in-out | Aurora drift, marquee, illustration loops |
Live demos
Hover lift + spotlight
.yt-glass-interactive
.yt-btn
float · 3s loop
.yt-marquee
Scroll reveal
data-gsap="stagger"
01
Discover
02
Design
03
Build
04
Operate
Accessibility
Target: WCAG 2.2 AA across every page.
Contrast
Body text ≥ 4.5:1, large text and UI ≥ 3:1. All pairs above pass.
Keyboard
Every control is reachable by Tab, with a visible 2px cobalt focus ring.
Targets
Interactive targets are at least 44×44px on touch devices.
Reduced motion
GSAP, CSS loops, and SVG animations stop under prefers-reduced-motion.
Screen readers
Illustrations expose role=img with labels; status uses aria-live.
Not color alone
Status, validation, and charts pair color with icons, text, or legends.