Foundations
Colour
Four brand colours, each given an eleven-step ramp so components have somewhere to go for hover, tint and dark-mode states without inventing new hues. The step marked with a dot is the exact hex from the printed guidelines — it is the only one a designer may quote as 'the brand colour'.
YES Navy
Primary--color-navy-*The voice of the brand. Dark surfaces, headings, structure, and the default action.
50
#F1F3F8
100
#E1E6F0
200
#C2CCE0
300
#94A5C6
400
#5E75A3
500
#3A5183
600
#26396A
700
#1A2A52
800
#122040
900
#0D1B3D
950
#070F23
ILUNI Gold
Accent--color-gold-*Emphasis, never decoration: the rule under a heading, one call to action, a highlighted figure.
50
#FFFAEB
100
#FEF0C7
200
#FDE08A
300
#FCCB4D
400
#F9B924
500
#F4B400
600
#D89A00
700
#B37800
800
#915E07
900
#784D0C
950
#452805
UAE Green
Success--color-green-*Growth, confirmation, progress. Registration and completion states.
50
#ECFDF3
100
#D1FADF
200
#A6F4C5
300
#6CE9A6
400
#32D583
500
#12B76A
600
#039855
700
#007A3D
800
#05603A
900
#054F31
950
#032B1B
UAE Red
Destructive--color-red-*Errors and irreversible actions. As an accent stripe it is decorative — as a button it is a warning.
50
#FEF3F2
100
#FEE4E2
200
#FECDCA
300
#FDA29B
400
#F97066
500
#F04438
600
#E0293A
700
#CE1126
800
#A80E1F
900
#8A0E1C
950
#4E0509
Neutral
Surface & text--color-neutral-*Cool-tinted greys that sit beside navy without going muddy. Page surfaces, borders, secondary text.
25
#FCFCFD
50
#F9FAFB
100
#F2F4F7
200
#E4E7EC
300
#D0D5DD
400
#98A2B3
500
#667085
600
#475467
700
#344054
800
#1D2939
900
#101828
950
#0C111D
ILUNI Gold at full saturation reads 1.9:1 against white — unreadable as type, and it also fails as a background for white text. Two tokens exist so this never has to be remembered: text-accent-ink for gold type (5.5:1) andtext-accent-graphic for gold icons and rules (3.8:1). On navy the brand hex needs no substitute at all.
Semantic tokens
components ask for these, never a raw hex
| Token | Light | Dark | Purpose |
|---|---|---|---|
| background | white | navy-900 | Page surface |
| foreground | navy-900 | neutral-50 | Body text |
| card | white | navy-800 | Raised surface |
| primary | navy-900 | white | Default action |
| secondary | neutral-100 | navy-700 | Supporting action |
| accent | gold-500 | gold-500 | Emphasis |
| muted | neutral-100 | navy-700 | Quiet surface |
| muted-foreground | neutral-600 | navy-300 | Secondary text |
| success | green-700 | green-400 | Confirmation |
| warning | gold-500 | gold-400 | Caution |
| destructive | red-700 | red-500 | Error / danger |
| border | neutral-200 | white / 12% | Dividers, outlines |
| ring | navy-500 | gold-500 | Focus indicator |
Measured contrast
WCAG 2.2, normal text
- Navy 900 on White16.9:1AAA
- White on Navy 90016.9:1AAA
- Gold 500 on Navy 9009.2:1AAA
- Navy 900 on Gold 5009.2:1AAA
- White on Green 7005.5:1AA
- White on Red 7005.6:1AA
- Gold 800 on White5.5:1AA
- Gold 500 on White1.9:1FAIL
- White on Gold 5001.9:1FAIL
Colour usage — logo on background
On light — full colour
On neutral — navy
On navy — white
On colour — white
Foundations
Typography
Poppins is the primary typeface: it sets every heading, label and control. Montserrat is the secondary face and earns its place in one job only — long-form body copy, where its narrower forms hold a paragraph better than Poppins does. Both are self-hosted as woff2, so the brand renders correctly on first paint.
Aa
PrimaryPoppins
Headings, labels, buttons, navigation, data. Geometric and open — the "bold & confident" half of the brand voice.
Regular 400 — Empowering Ideas
Medium 500 — Empowering Ideas
SemiBold 600 — Empowering Ideas
Bold 700 — Empowering Ideas
ExtraBold 800 — Empowering Ideas
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Aa
SecondaryMontserrat
Body copy and captions only. Variable weight 100–900, so a single file covers every need. Reach for it when a paragraph runs longer than two lines.
Light 300 — Building Nations
Regular 400 — Building Nations
Medium 500 — Building Nations
SemiBold 600 — Building Nations
Bold 700 — Building Nations
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Display scale
Poppins · negative tracking
text-display-2xl72px · 800 · -3.5%
Empowering Ideas.
text-display-xl60px · 800 · -3.2%
Building Nations.
text-display-lg48px · 700 · -2.8%
Young Entrepreneur Series
text-display-md36px · 700 · -2.2%
Program Pillars
text-display-sm30px · 700 · -1.8%
Impact We Aim
text-display-xs24px · 600 · -1.4%
Timeline Overview
text-eyebrow-lg14px · 600 · +14%
ILUNI UI UAE
text-eyebrow12px · 600 · +16%
Presentation Cover
Body scale
Montserrat · font-body
text-lg18px · 400
YES menghubungkan talenta muda Indonesia dan UAE untuk berkolaborasi, berinovasi, dan menciptakan dampak nyata bagi masyarakat dan dunia.
text-base16px · 400
Fokus pada pertumbuhan, inovasi, dan keberlanjutan untuk masa depan yang lebih baik.
text-sm14px · 400
Memperluas jaringan dengan komunitas dan industri.
text-xs12px · 400
Pendaftaran dibuka Januari – Februari 2026.
Eyebrow + rule
the deck's signature heading block
Program Pillars
Empat pilar yang menopang program
Setiap pilar punya tujuan yang jelas dan terukur, sejalan dengan prinsip brandPurposeful.
Prose defaults
.yes-prose
Our Mission
YES menghubungkan talenta muda Indonesia dan UAE untuk berkolaborasi, berinovasi, dan menciptakan dampak nyata bagi masyarakat dan dunia. Program ini mempertemukan mahasiswa, alumni, mentor, dan pelaku industri dalam satu rangkaian yang terukur — dari ide hingga eksekusi.
Foundations
Space, shape & elevation
A 4px base grid, a single radius variable that the whole system derives from, and navy-tinted shadows — never neutral black, which would grey out the brand.
Spacing
4px base grid
Radius
--radius: 0.625rem
rounded-sm
Checkbox, chip
rounded-md
Button, input, menu item
rounded-lg
Menu, popover, alert
rounded-xl
Card, dialog
rounded-2xl
Hero panel, media frame
rounded-full
Badge, avatar, rule
Elevation
navy-tinted, never black
shadow-xs
Inputs at rest
shadow-sm
Cards at rest
shadow-md
Buttons on hover
shadow-lg
Raised cards, popovers
shadow-xl
Cards on hover
shadow-2xl
Modals
shadow-gold
Gold action on hover
Iconography
Lucide · 1.5px stroke, line style
The deck specifies line-style icons. Lucide matches that geometry, so it is the system's icon set. Keep the stroke at 1.5px for display sizes and let the default 2px stand inside buttons and menus, where icons are small.
Motion
--ease-out-brand
Decisive, short, one direction
Hover this card's swatch — 200ms for state, 300ms for surfaces, 600ms for entrances.
--ease-out-brandentrances, hovers--ease-in-out-brandreversible motionanimate-risecontent on scroll-inanimate-sweeprules and curves
Brand assets
Logo
Three approved files cover every context. The Logo component takes a variant and a width — it derives the height from the source file, so proportions cannot drift, and it reserves clear space by default. Nothing in the system applies a filter, shadow or recolour to the mark.
Full colour
variant="fullColor"
The default. White and very light neutral backgrounds only.
Monochrome navy
variant="navy"
Single-colour reproduction: print, engraving, embroidery, faxable documents.
Reversed white
variant="white"
Navy and saturated colour backgrounds — the cover-slide lockup.
Clear space
6% of logo width, all sides
The dashed rule marks the minimum keep-out area. No type, image edge or graphic element enters it. clearSpace is on by default; switch it off only when the parent already provides the padding.
Do's
- Gunakan logo dengan warna resmi.
- Pastikan kontras yang cukup dengan background.
- Berikan ruang aman di sekitar logo.
- Gunakan versi logo yang sesuai dengan background.
Don'ts
- Jangan mengubah proporsi logo.
- Jangan mengubah warna logo.
- Jangan menambahkan efek atau bayangan.
- Jangan menempatkan logo di background yang kurang kontras.
Brand assets
Visual elements
The guidelines name four recurring graphic devices. Each is a component or a utility here, so a page assembles the brand rather than approximating it. All four are decorative and aria-hidden — they carry mood, never meaning.
Colour blocks
<BlockBar /> · .yes-blockbar
Gold, green, red, navy in fixed order. Caps a header, a footer or a card edge — one per surface, so it reads as a signature rather than a texture.
Solid accent shapes
<AccentStripes />
Exactly four bars — navy, gold, green, red — as a corner flourish on covers, banners, certificates and ID cards. Bleeds off the edge; never floats in the middle..yes-stripes repeats the same four colours as a fill texture, which is a different job.
Pattern
<DotPattern /> · .yes-dots
Empowering Ideas
A 12px dot grid that inherits currentColor, so the tone is set with a text utility on the caller. Masked at the edges so it never competes with copy.
Flowing accent curves
<Swoosh />
Thank You
Gold, green and red lines rising left to right — the curve that runs across every navy slide in the deck. kind="arc" gives the cover-slide edge sweep instead.
Bold lines & frames
Card variant='frame'
Frame
Navy 2px
Frame
Gold 2px
Capped card
Block bar edge
Components
Component library
shadcn/ui as the base — Radix primitives you own the source of, restyled against the token layer rather than themed on top of it. Every example below is the real component; the docs cannot drift from the code. Interactive pieces hydrate as islands, so the rest of the page ships zero JavaScript.
Button — variants
10 variants · 7 sizes
Button — sizes & states
gold is the emphasis variant — one per view. Two golds and neither is emphasis any more.
Badge
10 variants · solid and soft
Card
64% kuota terisi
82% target dampak
Use for a single highlighted item in a grid of default cards.
Alert
5 tones mapped to the brand palette
Progress · Avatar · Skeleton · Separator
Text fields
Gunakan email aktif — konfirmasi dikirim ke alamat ini.
Selection controls
Tabs
Radix Tabs
Accordion
Radix Accordion
Overlays
Dialog · Dropdown · Popover
Tooltip
Radix Tooltip
Table
uppercase eyebrow headers, tabular data
| Peserta | Jalur | Kota | Status |
|---|---|---|---|
| Aisyah Rahman | Growth | Dubai | Diterima |
| Bimo Prakoso | Ideation | Jakarta | Seleksi |
| Clara Wijaya | Prototype | Abu Dhabi | Diterima |
| Daniyal Haq | Scale-up | Bandung | Ditolak |
Working notes
Using these components from Astro
shadcn/ui is React and the pages are Astro, so three rules apply at the boundary. Each one fails silently — the component renders, just without its styling or behaviour — which is why they are written down here.
1 · className, never class
React passes an unknown class straight to the DOM, where it overwrites the className the component just computed — the element loses every style. Astro components in this repo take class; React ones takeclassName.
2 · Compose compounds in .tsx
Astro mounts each React component as its own island, so context does not flow between them. Avatar, Tabs, Dialog,Select and friends must be assembled inside one .tsx file — seeshowcase/demos.tsx — and handed to Astro as a single component.
3 · No asChild from Astro
Radix's Slot clones a React child to merge props onto it, but Astro hands children over as pre-rendered HTML — there is nothing left to clone. For links that look like buttons, use ButtonLink.astro, which appliesbuttonVariants() to a real anchor.
Patterns
Composed patterns
The recurring layouts from the presentation template, built once as components so a new page assembles from known parts. These are the shapes the programme actually needs: principles, pillars, impact figures, timeline, and the cover lockup.
Brand principles
four-up, icon + title + one sentence
Purposeful
Setiap elemen memiliki makna dan tujuan yang jelas.
Bold & Confident
Tegas, kuat, dan mencerminkan keberanian serta kepemimpinan.
Collaborative
Menghubungkan talenta, ide, dan peluang untuk dampak yang lebih besar.
Impact-Driven
Fokus pada pertumbuhan, inovasi, dan keberlanjutan untuk masa depan.
Program pillars
<PillarCard />
Compete
Menciptakan ide terbaik dan solusi nyata melalui kompetisi bertahap.
Learn
Belajar langsung dari para ahli dan mentor terbaik di bidangnya.
Connect
Memperluas jaringan dengan komunitas, investor, dan industri.
Accelerate
Mendorong pertumbuhan startup unggulan menuju tahap berikutnya.
Impact We Aim
Angka yang kami tuju
Talenta Terhubung
500+
Ide & Solusi
100+
Mentor & Expert
50+
Dampak Sosial Berkelanjutan
∞
Timeline overview
<Timeline /> · horizontal ⇄ vertical
Pendaftaran
Jan – Feb
Seleksi
Mar
Academy
Apr – Mei
Demo Day
Jun
Acceleration
Aug+
Cover lockup
Empowering Ideas.
Building Nations.
YES menghubungkan talenta muda Indonesia dan UAE untuk berkolaborasi, berinovasi, dan menciptakan dampak nyata.
Call-to-action band
Batch 2026
Punya ide yang layak diperjuangkan?
Pendaftaran dibuka hingga 28 Februari 2026 untuk mahasiswa dan alumni UI di Indonesia maupun UAE.