Keyu.tech Design System v1.0
Keyu.tech · brand & product system · v1.0 · 2026

The system
behind Keyu.

Premium, modern, tech-forward. A foundation of black, a single signature gold, Kufi typography that reads natively in Arabic, Kurdish and English — and the components, motion and voice that make every Keyu surface feel of a piece.

Owner
Keyu.tech
Founded
2021, ML & software engineering
Locales
EN · AR · KU
Direction
Circuit — industrial
00 — Fundamentals

Mission, pillars, voice.

Keyu builds custom IT solutions — web, AI, SaaS and data analysis — for businesses navigating the digital age. The brand expresses that work as engineered, considered and quietly premium.

Mission 01 / 01

To empower businesses with advanced technology — designing custom solutions that streamline operations, sharpen customer experience, and drive durable growth.

01 / Innovation

Forward by default.

ML, modern web, real-time systems. We ship work that wouldn't have been possible a year ago — and that still feels obvious to use.

02 / Quality

Built to be kept.

Considered architecture, observable systems, clean handoffs. Keyu deliverables are meant to outlast the engagement.

03 / Partnership

Close to the work.

We embed with clients, not adjacent to them. Decisions move fast because trust is established first.

04 / Impact

Measured in outcomes.

Pretty doesn't ship. We define the metric on day one and instrument against it from day two.

Voice — Yes

  • Precise. We use specific verbs and specific numbers, not adjectives.
  • Confident. We state what is true; we don't qualify everything.
  • Quietly premium. Restraint signals capability — we don't oversell.
  • Bilingual-first. Every headline works in Arabic, Kurdish and English.
  • Technical without being insular. We translate, not show off.

Voice — No

  • Revolutionary, game-changing, paradigm-shifting
  • Synergize, leverage, unlock value
  • AI-powered everything, "next-generation" everything
  • Excessive exclamation marks or hype
  • Emoji in product surfaces or marketing copy
02 — Color

Black, gold,
and the room in between.

Circuit is a study in restraint: deep neutrals carry 90% of the surface, a single bright gold carries everything that matters. The palette is dense, industrial, and tuned for technical UI.

Circuit
Industrial · technical · the Keyu direction
#0B0C0E · deep ink · page canvas
#E8B833 · accent
#C99A20 · press
#E8E6DD · fg
#131418 · elevated

Primitive scales

Gold
Ink
Status

Semantic tokens — current direction

--bg-canvas
Page background. Holds the surface for everything else.
--bg-elevated
One level up: cards, dropdowns, popovers.
--bg-sunken
Wells, code blocks, input fills.
--accent
Primary CTA, focus, brand emphasis.
--fg-primary
Body and heading text on canvas.
--fg-secondary
Supporting copy, secondary text.
--line
Hairline rules and dividers.
--line-gold
Focus rings, gold-edged surfaces.
03 — Typography

Kufi, native.
Geist, supporting.

Noto Kufi Arabic is the system's voice. It's geometric and modern in Arabic, confident and architectural in Latin — and it carries Kurdish (Sorani) cleanly. Geist Sans pairs alongside it for dense UI and body copy. Geist Mono is used sparingly for metadata, code, and labels.

Aa   کـ   كNOTO KUFI ARABIC · 400 / 500 / 700 / 900

Three scripts, one system

EnglishLTR · Latin
Custom AI & SaaS solutions.
We build durable systems for businesses navigating the digital age — from machine-learning pipelines to revenue-grade web apps.
300400500700900
ArabicRTL · العربية
حلولٌ مُخصَّصة للذكاء الاصطناعي
نُشيِّد أنظمةً متينةً للأعمال التي ترسم طريقها في العصر الرقمي — من خطوط تعلّم الآلة إلى تطبيقات الويب على مستوى الإنتاج.
300400500700900
KurdishRTL · کوردی
چارەسەری تایبەت بۆ AI و SaaS
سیستەمە بەهێزەکان دروست دەکەین بۆ ئەو بازرگانیانەی کە لە سەردەمی دیجیتاڵدا ڕێگای خۆیان دەدۆزنەوە — لە پایپ‌لاینی فێرکاری ماشێنەوە تا ئەپلیکەیشنە وێبیە بەرهەمهێنەکان.
300400500700900

Scale

Display 1
112 / 0.95 / -2%
Keyu.
Display 2
84 / 1.0 / -2%
Built to be kept.
H1
64 / 1.05 / -1%
Custom AI & SaaS.
H2
48 / 1.1 / -1%
Engineered for clarity.
H3
30 / 1.2 / 0
Section heading
H4
20 / 1.3 / 0
Card title or subheading
Body L
18 / 1.55 / 0
Long-form reading copy — used in articles, hero subtitles, and high-density narrative sections.
Body
16 / 1.5 / 0
Default UI text. Geist Sans paired with Noto Kufi for Arabic and Kurdish.
Caption
12 / 1.4 / 6%
METADATA · LABEL · TIMESTAMP

Pairing

Display
Noto Kufi Arabic — 600 / 700 / 800
Body
Geist Sans — 400 / 500. Slight optical sizing on smaller body. Numerals: tabular for tables, proportional for prose.
Mono
geist mono · 400 / 500 · labels, code, metadata, timestamps
Arabic / Kurdish
Noto Kufi Arabic عبر جميع الأوزان · کوردی بە هەموو قورساییەکان
04 — Iconography

Line geometry,
1.5px stroke.

Icons are line-based, drawn on a 24px grid with rounded caps and joins. They share the geometric DNA of the key mark — circles, vertical stems, and clean horizontals — and read at sizes from 16 to 32 pixels without modification.

KEY
SHIELD
LOCK
CODE
BRAIN
CLOUD
CHART
DATABASE
CUBE
GRID
SPARKLE
ZAP
GLOBE
USERS
SETTINGS
SEARCH
MAIL
PHONE
ARROW-R
EXTERNAL
CHECK
CLOSE
PLUS
MENU
01 — Grid
24 × 24, 2px padding

All icons are drawn inside a 20×20 live area on a 24px canvas. Optical balance over mathematical centering when they conflict.

02 — Stroke
1.5px, round caps

Consistent stroke weight across the family. Joins are rounded; corners use a 2px radius. No filled shapes except for solid-icon variants.

03 — Color
currentColor only

Icons inherit color from their context. Use --fg-primary for default, --accent for active, --fg-muted for disabled.

05 — Spacing, radii & elevation

A 4-pixel grid,
three depths.

All spacing snaps to a 4-pixel grid. Radii are deliberately sharp — 4px on cards, 2px on buttons — to reinforce the industrial Circuit direction. Shadows are restrained: three steps from hairline to deep.

Spacing4px base
sp-1
4 px
sp-2
8 px
sp-3
12 px
sp-4
16 px
sp-6
24 px
sp-8
32 px
sp-12
48 px
sp-16
64 px
sp-24
96 px
Radiidirection-aware
0
2
4
6
8
12

CIRCUIT — 4px on cards, 2px on buttons, pill on chips.

/ 2 / 2
SIGNAL → 0 / 0 / 0

Elevation4 levels
01
02
03
GOLD

01 — chips, inputs
02 — cards, popovers
03 — modals, sheets
GOLD — focus, accent surfaces

06 — Components

Buttons, inputs,
and what they're for.

The component library follows the shadcn philosophy: small surface, composable, theme via CSS variables. Every component here is themed by the Circuit token sheet.

Button — variants5 styles · 3 sizes
Input · Formfocus state in gold
Email address
Subscribe to updates
Message
I agree to terms
Send me updates
Notifications
Badge · Avatar · Toggledensity elements
Badges
Default Featured New Live Beta Down
Avatars
A K N +4
Tabs
Overview
Engagements
Team
Settings
SERVICE / 01

Web Development

Custom-built revenue-grade web applications. From technical architecture to ship.

14 engagements
SERVICE / 02Featured

AI & Machine Learning

Models, pipelines, evaluation. We embed ML where it pays back — not where it looks good.

9 engagements
SERVICE / 03

SaaS & Data Analysis

End-to-end product builds and the analytics that make them measurable.

22 engagements
Top navigationmarketing site
Tabledense data
ProjectClientStatusValue
Atlas MLBanque SaderatLive$284,000
Nahla SaaSKorek TelecomBeta$120,500
Vault InsightNEOM HoldingsDraft$78,000
Pilot AIAramex MENALive$311,200
07 — shadcn library

The full kit,
themed to Circuit.

Every shadcn/ui primitive — re-skinned in Circuit tokens. Sharp 2–4 px corners, gold accent, hairline rules. Use these as the source of truth for product surfaces; they share types and behaviors with the upstream library while reading unmistakably as Keyu.

Inputs & form primitives

LabelFORM
Email * We’ll never share your email.
SelectFORM
Erbil — KRG
Iraq
Erbil — KRG
Baghdad
Sulaymaniyah
Gulf
Dubai — UAE
Riyadh — KSA
Radio GroupFORM
SwitchFORM
Realtime sync
Push notifications
Telemetry (disabled)
SliderFORM
Engagement budget$48k
$0$50k$100k
Team size6–12
Input OTPFORM
4
7
9
2
3
Six-digit code from your authenticator.
ComboboxFORM
TypeScript× Postgres× Search stack…
React 19
Next.js 15
Drizzle ORM
Redis
Kubernetes

Disclosure

AccordionDISCLOSURE
What does an engagement look like?
Two-week discovery, four-to-twelve week build, then a 30-day stabilization window. We instrument the metric before we write the first line.
Do you work in Arabic and Kurdish?
Yes. Every Keyu surface is bilingual-first.
What stacks do you ship?
TypeScript end-to-end, Postgres, Python for ML.
CollapsibleDISCLOSURE
@keyu/atlas-ml has 3 open PRs
feat: streaming inference for embeddings · +402 / −88
fix: race in batch scheduler · +14 / −9
chore: pin torch to 2.6 · +1 / −1

Overlays

DialogOVERLAY
Start a project

Tell us the metric you’d like to move. We’ll reply within a day with two engagement shapes.

Email
Alert DialogOVERLAY
Delete project “Atlas ML”?

This will permanently delete 14 deployments, 6 datasets and revoke 23 API tokens. This action cannot be undone.

PopoverOVERLAY
Filter by status
TooltipOVERLAY
Last sync 4 min ago
Hover CardOVERLAY
K
@keyu/core
14 members · Erbil · Dubai

Custom IT solutions: web, AI, SaaS, data. Founded 2021. Currently shipping for clients in seven countries.

Hiring Featured
Dropdown MenuOVERLAY
Account
Profile⇧⌘P
Settings⌘,
Switch workspace
Team
Invite members⌘I
Billing
Sign out
Context MenuOVERLAY
Back⌘[
Forward⌘]
Reload⌘R
View
Save as…⌘S
Print…⌘P
Inspect element⌥⌘I
MenubarOVERLAY
File
Edit
View
Window
Help
Undo⌘Z
Redo⇧⌘Z
Cut⌘X
Copy⌘C
Paste⌘V
CommandOVERLAY
Suggestions
Ship release v1.4.2
Schedule shipment for tomorrow
Pages
Open Shipments dashboard
Customer shipping prefs
SheetOVERLAY
Notifications

3 new this week

Atlas ML deploy succeeded
2 min ago
3 PRs ready for review
18 min ago
Invoice INV-0429 paid
2 hr ago
DrawerOVERLAY
Quick action

Mobile-first bottom sheet

Feedback

AlertFEEDBACK
Heads up

Your trial ends in 5 days. Upgrade to keep access to your data.

New release — Atlas v1.4

Streaming inference, faster batching, and a redesigned eval dashboard.

Connection lost

We couldn’t reach the analytics gateway. Retrying in 12s.

ProgressFEEDBACK
UPLOAD72%
DEPLOY32%
EVAL100%
SkeletonFEEDBACK
Toast · SonnerFEEDBACK
Deploy successful

atlas-ml/v1.4.2 · Production

×
Scheduled for review

Will run at 09:00 Erbil time

×
Build failed

Step 14/22 — see logs for details

×
ChartDATA
DEPLOYSINCIDENTS

Navigation

BreadcrumbNAV
Keyu / Engagements / Atlas ML / Inference
Docs / / Auth / OAuth 2.1
PaginationNAV
1 2 3 4 27
Navigation MenuNAV
Services Work About Resources

Data & layout

Calendar · Date PickerDATA
April 2026
MoTuWeThFrSaSu
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
CarouselDATA
ResizableLAYOUT
PANEL A · 60%
PANEL B · 40%
Scroll AreaLAYOUT
01 — TypeScript 02 — React 19 03 — Next.js 15 04 — Drizzle ORM 05 — Postgres 16 06 — Redis 07 — pgvector 08 — Kubernetes 09 — Cloudflare R2 10 — Pulumi
Aspect RatioLAYOUT
16 : 9 · placeholder
SeparatorLAYOUT
Keyu.tech
Custom IT solutions · Erbil · Dubai
Web AI & ML SaaS Data
Toggle · Toggle GroupCONTROL
Inventory54 primitives · circuit theme
Button
Input
Textarea
Label
Select
Combobox
Checkbox
Radio Group
Switch
Slider
Input OTP
Form
Toggle
Toggle Group
Date Picker
Calendar
Accordion
Collapsible
Dialog
Alert Dialog
Sheet
Drawer
Popover
Tooltip
Hover Card
Dropdown Menu
Context Menu
Menubar
Navigation Menu
Command
Tabs
Breadcrumb
Pagination
Alert
Toast
Sonner
Progress
Skeleton
Badge
Avatar
Card
Table
Data Table
Chart
Carousel
Aspect Ratio
Scroll Area
Resizable
Separator
08 — Imagery & illustration

Material, not metaphor.

Photography is low-key and architectural: brass surfaces, raw concrete, machined metal, and warm-tungsten interiors. Illustrations are technical diagrams — schematics, network graphs, isometric line drawings — never decorative spot art.

01 / brass & tungsten
02 / warm light
03 / technical grid
04 / negative space
05 / system diagram

Yes

  • Architectural photography with strong directional light
  • Materials: brass, concrete, raw metal, oxidized copper
  • Technical diagrams, system schematics, line drawings
  • People in environment — engaged with work, not the camera

No

  • Stock photos of suits shaking hands
  • Generative AI art with obvious 3D-render lighting
  • Cliché tech illustrations (glowing circuit boards, AI brains)
  • Heavy color filters or saturated marketing-grade photography
09 — Motion

Crisp, considered,
almost imperceptible.

Motion in Keyu surfaces signals engineered precision. Three timing curves do almost all the work — paired with four durations from 120ms (button feedback) to 520ms (page transitions). The default is restraint; flourish is the exception.

01 / Snap
ease-out · 120–200ms

Button presses, hover changes, focus rings. Confident, immediate, then settled.

02 / Ease
ease-in-out · 320ms

Modal opens, drawer slides, content reveals. The medium-weight default.

03 / Hold
ease-out · 520ms

Page transitions, hero entries. Used sparingly — only on first impression and rare big moments.

Timing tokens4 durations · 3 curves
TokenValueCurveUse
--dur-1120msease-outHover, focus, button press
--dur-2200msease-outTabs, tooltip, dropdown
--dur-3320msease-in-outModal, drawer, content reveal
--dur-4520msease-outPage transition, hero entry