Hugging Face's logo

Spaces:
ServiceNow-AI
/
NowAI-Bench
Running

App Files Community
bradnow Claude Opus 4.6 commited on
Commit
db3eaea
·
1 Parent(s): 30feb75

Reskin landing page with Tailwind + WCAG fixes

Browse files

Replace custom CSS layout with Tailwind-based design featuring animated
watermark, colorful card accents, and Material Symbols icons. Extract
custom styles to style.css. Fix WCAG AA contrast on EVA axis labels
and remove duplicate subtitle. Add v0_reskin mockups (sans binaries).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Files changed (8) hide show
  1. .gitignore +2 -0
  2. index.html +296 -783
  3. mockups/v0_reskin/IGNORE--nowai_bench_refined_pulse_animation_faster/code.html +377 -0
  4. mockups/v0_reskin/nowai_bench_icon_svg/code.html +11 -0
  5. mockups/v0_reskin/nowai_bench_refined_pulse_animation/code.html +377 -0
  6. mockups/v0_reskin/nowai_bench_style_guide.md +31 -0
  7. mockups/v0_reskin/precision_enterprise/DESIGN.md +176 -0
  8. style.css +65 -18
.gitignore CHANGED
@@ -1,2 +1,4 @@
1
  .claude/
2
  .env
 
 
 
1
  .claude/
2
  .env
3
+ *.png
4
+ .DS_Store
index.html CHANGED
@@ -1,789 +1,302 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>NOWAI-Bench</title>
7
- <style>
8
- /* ServiceNow Sans — Text weights */
9
- @font-face {
10
- font-family: 'ServiceNow Sans';
11
- src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Light.woff2') format('woff2');
12
- font-weight: 300; font-style: normal; font-display: swap;
13
- }
14
- @font-face {
15
- font-family: 'ServiceNow Sans';
16
- src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Regular.woff2') format('woff2');
17
- font-weight: 400; font-style: normal; font-display: swap;
18
- }
19
- @font-face {
20
- font-family: 'ServiceNow Sans';
21
- src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Book.woff2') format('woff2');
22
- font-weight: 450; font-style: normal; font-display: swap;
23
- }
24
- @font-face {
25
- font-family: 'ServiceNow Sans';
26
- src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Medium.woff2') format('woff2');
27
- font-weight: 500; font-style: normal; font-display: swap;
28
- }
29
- @font-face {
30
- font-family: 'ServiceNow Sans';
31
- src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Bold.woff2') format('woff2');
32
- font-weight: 700; font-style: normal; font-display: swap;
33
- }
34
- @font-face {
35
- font-family: 'ServiceNow Sans Mono';
36
- src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSansMono-Regular.woff2') format('woff2');
37
- font-weight: 400; font-style: normal; font-display: swap;
38
- }
39
-
40
- :root {
41
- /* ServiceNow brand palette */
42
- --infinite-blue: #032D42;
43
- --wasabi-green: #63DF4E;
44
- --bright-blue: #52B8FF;
45
- --bright-indigo: #7661FF;
46
- --bright-purple: #BF71F2;
47
-
48
- /* Light-theme surface colors (HuggingFace Space context) */
49
- --bg: #F9FAFB;
50
- --surface: #FFFFFF;
51
- --ink: #032D42;
52
- --ink-2: #374151;
53
- --ink-3: #6B7280;
54
- --ink-4: #9CA3AF;
55
- --rule: #E5E7EB;
56
- --rule-strong: #D1D5DB;
57
-
58
- /* Category accent colors (sourced from brand palette) */
59
- --eog: var(--infinite-blue);
60
- --eog-soft: #DCE7EC;
61
- --eva-a: var(--bright-indigo);
62
- --eva-a-soft: #E5E1FE;
63
- --eva-x: var(--bright-blue);
64
- --eva-x-soft: #DCEFFC;
65
-
66
- --banner: #F0F9EC;
67
- --banner-border: #C7E8BD;
68
- --banner-tag: var(--infinite-blue);
69
-
70
- --sans: 'ServiceNow Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
71
- --mono: 'ServiceNow Sans Mono', 'Consolas', 'Monaco', monospace;
72
- }
73
-
74
- * { box-sizing: border-box; margin: 0; padding: 0; }
75
-
76
- body {
77
- font-family: var(--sans);
78
- font-weight: 400;
79
- background: var(--bg);
80
- color: var(--ink);
81
- font-size: 14px;
82
- line-height: 1.6;
83
- -webkit-font-smoothing: antialiased;
84
- -moz-osx-font-smoothing: grayscale;
85
- }
86
-
87
- .page {
88
- max-width: 1280px;
89
- margin: 0 auto;
90
- padding: 0 32px 32px;
91
- }
92
-
93
- /* --- Top nav --- */
94
- .nav {
95
- display: flex;
96
- align-items: center;
97
- justify-content: space-between;
98
- padding: 20px 0;
99
- border-bottom: 1px solid var(--rule);
100
- }
101
- .nav-left {
102
- display: flex;
103
- align-items: center;
104
- gap: 14px;
105
- }
106
- .sn-logo {
107
- flex-shrink: 0;
108
- display: flex;
109
- align-items: center;
110
- }
111
- .nb-logo {
112
- flex-shrink: 0;
113
- display: flex;
114
- align-items: center;
115
- margin-right: -6px;
116
- }
117
- .nav-divider {
118
- width: 1px;
119
- height: 22px;
120
- background: var(--rule-strong);
121
- }
122
- .brand-wordmark {
123
- font-size: 15px;
124
- font-weight: 700;
125
- color: var(--infinite-blue);
126
- letter-spacing: -0.01em;
127
- }
128
- .nav-sep { color: var(--ink-4); }
129
- .nav-title {
130
- font-size: 14px;
131
- color: var(--ink-2);
132
- font-weight: 450;
133
- }
134
- .nav-meta {
135
- font-size: 13px;
136
- color: var(--ink-3);
137
- margin-left: 6px;
138
- font-weight: 400;
139
- }
140
- .nav-pills {
141
- display: flex;
142
- gap: 6px;
143
- }
144
- .pill {
145
- font-family: var(--sans);
146
- font-size: 12px;
147
- font-weight: 500;
148
- padding: 8px 16px;
149
- border-radius: 9999px;
150
- border: 1.5px solid var(--rule-strong);
151
- color: var(--ink-2);
152
- background: transparent;
153
- transition: all 0.15s ease;
154
- cursor: pointer;
155
- }
156
- .pill:hover { background: rgba(3, 45, 66, 0.04); border-color: var(--infinite-blue); }
157
- .pill .num {
158
- color: var(--ink-4);
159
- margin-right: 8px;
160
- font-variant-numeric: tabular-nums;
161
- font-weight: 400;
162
- }
163
- .pill.active {
164
- background: var(--infinite-blue);
165
- color: white;
166
- border-color: var(--infinite-blue);
167
- }
168
- .pill.active .num { color: rgba(255, 255, 255, 0.55); }
169
-
170
- /* --- Mockup banner --- */
171
- .banner {
172
- margin: 28px 0 40px;
173
- background: var(--banner);
174
- border: 1px solid var(--banner-border);
175
- border-left: 4px solid var(--wasabi-green);
176
- border-radius: 8px;
177
- padding: 14px 18px;
178
- display: flex;
179
- align-items: flex-start;
180
- gap: 14px;
181
- }
182
- .banner-tag {
183
- display: inline-block;
184
- font-family: var(--mono);
185
- font-size: 10px;
186
- font-weight: 400;
187
- letter-spacing: 0.08em;
188
- background: var(--banner-tag);
189
- color: white;
190
- padding: 5px 10px;
191
- border-radius: 4px;
192
- flex-shrink: 0;
193
- margin-top: 1px;
194
- text-transform: uppercase;
195
- }
196
- .banner-text {
197
- font-size: 13px;
198
- line-height: 1.6;
199
- color: var(--infinite-blue);
200
- font-weight: 400;
201
- }
202
- .banner-text b { font-weight: 700; }
203
-
204
- /* --- Page title --- */
205
- h1 {
206
- font-family: var(--sans);
207
- font-size: 44px;
208
- font-weight: 700;
209
- letter-spacing: -0.025em;
210
- margin-bottom: 10px;
211
- line-height: 1.0;
212
- color: var(--infinite-blue);
213
- }
214
- .subtitle {
215
- font-size: 16px;
216
- color: var(--ink-2);
217
- max-width: 760px;
218
- margin-bottom: 28px;
219
- font-weight: 300;
220
- }
221
-
222
- /* --- Compact stat strip --- */
223
- .stat-strip {
224
- display: flex;
225
- gap: 56px;
226
- align-items: flex-start;
227
- padding: 22px 0;
228
- border-top: 1px solid var(--rule);
229
- border-bottom: 1px solid var(--rule);
230
- margin-bottom: 48px;
231
- }
232
- .stat-value {
233
- font-family: var(--sans);
234
- font-size: 34px;
235
- font-weight: 700;
236
- line-height: 1;
237
- letter-spacing: -0.02em;
238
- font-variant-numeric: tabular-nums;
239
- color: var(--infinite-blue);
240
- }
241
- .stat-value .qualifier {
242
- font-size: 16px;
243
- color: var(--ink-3);
244
- font-weight: 450;
245
- margin-left: 4px;
246
- }
247
- .stat-label {
248
- font-family: var(--mono);
249
- font-size: 11px;
250
- color: var(--ink-3);
251
- letter-spacing: 0.10em;
252
- margin-top: 10px;
253
- font-weight: 400;
254
- text-transform: uppercase;
255
- }
256
-
257
- /* --- Section headers --- */
258
- .section-title {
259
- font-family: var(--sans);
260
- font-size: 26px;
261
- font-weight: 700;
262
- letter-spacing: -0.02em;
263
- margin-bottom: 4px;
264
- color: var(--infinite-blue);
265
- line-height: 1.1;
266
- }
267
- .section-tagline {
268
- font-family: var(--sans);
269
- font-size: 15px;
270
- color: var(--ink-3);
271
- margin-bottom: 22px;
272
- font-weight: 300;
273
- }
274
- .prose {
275
- max-width: 820px;
276
- }
277
- .prose p {
278
- font-size: 15px;
279
- line-height: 1.7;
280
- color: var(--infinite-blue);
281
- margin-bottom: 14px;
282
- font-weight: 400;
283
- }
284
- .prose p:last-child { margin-bottom: 0; }
285
- .prose b { font-weight: 700; color: var(--infinite-blue); }
286
-
287
- /* --- Capability leaders header --- */
288
- .leaders-header {
289
- display: flex;
290
- align-items: flex-end;
291
- justify-content: space-between;
292
- margin: 56px 0 22px;
293
- gap: 32px;
294
- }
295
- .leaders-intro p {
296
- font-size: 14px;
297
- color: var(--ink-3);
298
- margin-top: 6px;
299
- font-weight: 300;
300
- }
301
- .version-block {
302
- text-align: right;
303
- flex-shrink: 0;
304
- }
305
- .version-tag {
306
- display: inline-block;
307
- font-family: var(--mono);
308
- font-size: 11px;
309
- padding: 4px 10px;
310
- background: var(--infinite-blue);
311
- color: white;
312
- border-radius: 4px;
313
- font-weight: 400;
314
- margin-bottom: 8px;
315
- font-variant-numeric: tabular-nums;
316
- letter-spacing: 0.04em;
317
- }
318
- .version-note {
319
- font-size: 12.5px;
320
- color: var(--ink-3);
321
- max-width: 260px;
322
- line-height: 1.5;
323
- font-weight: 300;
324
- }
325
-
326
- /* --- Benchmark cards --- */
327
- .cards {
328
- display: grid;
329
- grid-template-columns: 1fr 1fr;
330
- gap: 18px;
331
- }
332
-
333
- .card {
334
- background: var(--surface);
335
- border: 1px solid var(--rule);
336
- border-radius: 16px;
337
- padding: 24px 28px 22px;
338
- border-left-width: 4px;
339
- border-left-style: solid;
340
- transition: box-shadow 0.2s ease, transform 0.2s ease;
341
- }
342
- .card:hover {
343
- box-shadow: 0 4px 6px -1px rgba(3, 45, 66, 0.08), 0 2px 4px -1px rgba(3, 45, 66, 0.04);
344
- }
345
- .card.eog { border-left-color: var(--eog); }
346
- .card.eva { border-left-color: var(--eva-a); }
347
-
348
- .card-header {
349
- display: flex;
350
- align-items: baseline;
351
- gap: 12px;
352
- margin-bottom: 20px;
353
- flex-wrap: wrap;
354
- }
355
- .dot {
356
- width: 10px;
357
- height: 10px;
358
- border-radius: 50%;
359
- flex-shrink: 0;
360
- align-self: center;
361
- }
362
- .dot.eog { background: var(--eog); }
363
- .dot.eva { background: var(--eva-a); }
364
- .card-tag {
365
- font-family: var(--sans);
366
- font-size: 26px;
367
- font-weight: 700;
368
- letter-spacing: -0.02em;
369
- color: var(--infinite-blue);
370
- line-height: 1.1;
371
- text-transform: none;
372
- }
373
- .card-sub {
374
- font-size: 13px;
375
- color: var(--ink-3);
376
- font-weight: 400;
377
- align-self: center;
378
- }
379
-
380
- .leader-eyebrow {
381
- font-family: var(--mono);
382
- font-size: 10.5px;
383
- color: var(--ink-3);
384
- letter-spacing: 0.10em;
385
- margin-bottom: 6px;
386
- text-transform: uppercase;
387
- font-weight: 400;
388
- }
389
- .leader-name {
390
- font-family: var(--sans);
391
- font-size: 18px;
392
- font-weight: 700;
393
- letter-spacing: -0.01em;
394
- margin-bottom: 4px;
395
- color: var(--infinite-blue);
396
- line-height: 1.2;
397
- }
398
- .leader-meta {
399
- font-size: 12.5px;
400
- color: var(--ink-3);
401
- margin-bottom: 18px;
402
- font-weight: 400;
403
- }
404
-
405
- .score-row {
406
- display: flex;
407
- align-items: baseline;
408
- gap: 12px;
409
- margin-bottom: 22px;
410
- padding: 10px 14px;
411
- background: rgba(99, 223, 78, 0.10);
412
- border-radius: 8px;
413
- border-left: 3px solid var(--wasabi-green);
414
- }
415
- .score {
416
- font-family: var(--sans);
417
- font-size: 26px;
418
- font-weight: 700;
419
- line-height: 1;
420
- letter-spacing: -0.02em;
421
- font-variant-numeric: tabular-nums;
422
- color: var(--infinite-blue);
423
- }
424
- .score .pct {
425
- font-size: 16px;
426
- color: var(--ink-3);
427
- margin-left: 2px;
428
- font-weight: 500;
429
- }
430
- .score-label {
431
- font-family: var(--mono);
432
- font-size: 10.5px;
433
- color: var(--ink-3);
434
- letter-spacing: 0.08em;
435
- font-weight: 400;
436
- text-transform: uppercase;
437
- }
438
-
439
- /* runners-up rows */
440
- .runner-row {
441
- display: grid;
442
- grid-template-columns: 18px 1fr 96px 42px;
443
- align-items: center;
444
- gap: 10px;
445
- padding: 5px 0;
446
- font-size: 13px;
447
- font-weight: 400;
448
- color: var(--ink-2);
449
- }
450
- .runner-rank { color: var(--ink-4); font-variant-numeric: tabular-nums; }
451
- .runner-bar {
452
- height: 5px;
453
- border-radius: 9999px;
454
- position: relative;
455
- overflow: hidden;
456
- }
457
- .runner-bar .fill {
458
- position: absolute;
459
- inset: 0 auto 0 0;
460
- border-radius: 9999px;
461
- }
462
- .runner-val {
463
- text-align: right;
464
- color: var(--ink-2);
465
- font-variant-numeric: tabular-nums;
466
- font-weight: 500;
467
- }
468
- .bar-bg-eog { background: var(--eog-soft); }
469
- .bar-fill-eog { background: var(--eog); }
470
- .bar-bg-eva-a { background: var(--eva-a-soft); }
471
- .bar-fill-eva-a { background: var(--eva-a); }
472
- .bar-bg-eva-x { background: var(--eva-x-soft); }
473
- .bar-fill-eva-x { background: var(--eva-x); }
474
-
475
- /* EVA card split rows */
476
- .eva-split { display: grid; grid-template-columns: 1fr; }
477
- .eva-row { padding-bottom: 8px; }
478
- .eva-row + .eva-row {
479
- padding-top: 18px;
480
- border-top: 1px dashed var(--rule-strong);
481
- }
482
- .eva-axis-header {
483
- display: flex;
484
- justify-content: space-between;
485
- align-items: baseline;
486
- margin-bottom: 10px;
487
- }
488
- .eva-axis-label {
489
- font-family: var(--mono);
490
- font-size: 10.5px;
491
- font-weight: 400;
492
- letter-spacing: 0.10em;
493
- text-transform: uppercase;
494
- }
495
- .eva-axis-label.acc { color: var(--eva-a); }
496
- .eva-axis-label.exp { color: var(--eva-x); }
497
- .eva-meta {
498
- font-family: var(--mono);
499
- font-size: 10px;
500
- color: var(--ink-3);
501
- letter-spacing: 0.06em;
502
- font-variant-numeric: tabular-nums;
503
- text-transform: uppercase;
504
- }
505
- .eva-leader-row {
506
- display: flex;
507
- align-items: baseline;
508
- justify-content: space-between;
509
- margin-bottom: 12px;
510
- gap: 12px;
511
- padding: 8px 12px;
512
- background: rgba(99, 223, 78, 0.08);
513
- border-radius: 6px;
514
- border-left: 2px solid var(--wasabi-green);
515
- }
516
- .eva-leader-name {
517
- font-family: var(--sans);
518
- font-size: 16px;
519
- font-weight: 700;
520
- letter-spacing: -0.01em;
521
- color: var(--infinite-blue);
522
- line-height: 1.2;
523
- }
524
- .eva-leader-meta {
525
- font-size: 11.5px;
526
- color: var(--ink-3);
527
- margin-top: 2px;
528
- font-weight: 400;
529
- }
530
- .eva-score {
531
- font-family: var(--sans);
532
- font-size: 22px;
533
- font-weight: 700;
534
- line-height: 1;
535
- font-variant-numeric: tabular-nums;
536
- color: var(--infinite-blue);
537
- flex-shrink: 0;
538
- letter-spacing: -0.02em;
539
- }
540
- .eva-runner {
541
- display: grid;
542
- grid-template-columns: 16px 1fr 70px 34px;
543
- align-items: center;
544
- gap: 8px;
545
- padding: 3px 0;
546
- font-size: 12.5px;
547
- color: var(--ink-2);
548
- }
549
- .eva-runner .runner-bar { height: 3.5px; }
550
-
551
- /* card footer link */
552
- .card-footer {
553
- margin-top: 18px;
554
- padding-top: 14px;
555
- border-top: 1px solid var(--rule);
556
- font-size: 13px;
557
- color: var(--infinite-blue);
558
- cursor: pointer;
559
- font-weight: 500;
560
- transition: color 0.15s ease;
561
- }
562
- .card-footer:hover { color: var(--wasabi-green); }
563
- .card-footer:hover { color: #1F7D34; }
564
-
565
- /* Footer */
566
- .page-footer {
567
- margin-top: 64px;
568
- padding: 24px 0;
569
- border-top: 1px solid var(--rule);
570
- text-align: center;
571
- font-size: 12px;
572
- color: var(--ink-4);
573
- font-weight: 300;
574
- }
575
-
576
- /* responsive */
577
- @media (max-width: 880px) {
578
- .cards { grid-template-columns: 1fr; }
579
- .nav { flex-direction: column; gap: 16px; align-items: flex-start; }
580
- .leaders-header { flex-direction: column; align-items: flex-start; gap: 16px; }
581
- .version-block { text-align: left; }
582
- h1 { font-size: 34px; }
583
- .stat-strip { gap: 36px; }
584
- }
585
- </style>
586
  </head>
587
- <body>
588
-
589
- <div class="page">
590
-
591
- <!-- Top navigation -->
592
- <nav class="nav">
593
- <div class="nav-left">
594
- <span class="sn-logo">
595
- <!-- Official ServiceNow logo (dark variant for light backgrounds) -->
596
- <svg xmlns="http://www.w3.org/2000/svg" width="132" height="20" viewBox="0 0 132 20" aria-label="ServiceNow"><path d="M32.022,6.391a5.626,5.626,0,0,0-3.61,1.3V6.523H25.119V19.35h3.425v-8.2a4.073,4.073,0,0,1,3.109-1.588,3.494,3.494,0,0,1,1.374.206V6.479a5.851,5.851,0,0,0-1.005-.088" fill="#032D42" fill-rule="evenodd"/><path d="M2.16,15.436a5.369,5.369,0,0,0,3.5,1.269c.922,0,1.633-.45,1.633-1.084,0-1.931-6.191-1.243-6.191-5.369,0-2.459,2.371-3.993,4.9-3.993a7.9,7.9,0,0,1,4.32,1.3L8.72,10.04a4.3,4.3,0,0,0-2.45-.872c-.948,0-1.739.37-1.739,1.031,0,1.666,6.192,1.005,6.192,5.448,0,2.46-2.4,3.967-5.085,3.967A8.815,8.815,0,0,1,.5,17.9Z" fill="#032D42" fill-rule="evenodd"/><path d="M23.657,12.817c0-3.57-2.5-6.558-6.034-6.558-3.794,0-6.218,3.12-6.218,6.691A6.4,6.4,0,0,0,18.1,19.614a6.919,6.919,0,0,0,5.243-2.3l-1.95-1.957a4.515,4.515,0,0,1-3.214,1.481A3.36,3.36,0,0,1,14.725,13.8h8.853A5.735,5.735,0,0,0,23.657,12.817Zm-8.774-1.533a2.775,2.775,0,0,1,2.74-2.248,2.552,2.552,0,0,1,2.53,2.248Z" fill="#032D42" fill-rule="evenodd"/><polygon points="41.19 14.351 44.694 6.523 48.252 6.523 42.376 19.35 40.005 19.35 34.129 6.523 37.686 6.523 41.19 14.351" fill="#032D42" fill-rule="evenodd"/><path d="M51.128.5A2.2,2.2,0,1,1,48.888,2.7,2.2,2.2,0,0,1,51.128.5" fill="#032D42" fill-rule="evenodd"/><rect x="49.415" y="6.523" width="3.425" height="12.827" fill="#032D42"/><path d="M67,16.731a6.766,6.766,0,0,1-5.8,2.883,6.68,6.68,0,1,1,.026-13.355,6.808,6.808,0,0,1,5.375,2.565l-2.424,2.142a3.7,3.7,0,0,0-2.951-1.534A3.433,3.433,0,0,0,57.78,12.95a3.383,3.383,0,0,0,3.531,3.49,3.741,3.741,0,0,0,3.056-1.692Z" fill="#032D42" fill-rule="evenodd"/><path d="M79.442,17.313a6.918,6.918,0,0,1-5.243,2.3,6.4,6.4,0,0,1-6.692-6.664c0-3.571,2.424-6.691,6.218-6.691,3.53,0,6.033,2.988,6.033,6.558a5.635,5.635,0,0,1-.079.979H70.826a3.36,3.36,0,0,0,3.452,3.041,4.52,4.52,0,0,0,3.215-1.481Zm-3.188-6.029a2.551,2.551,0,0,0-2.529-2.248,2.774,2.774,0,0,0-2.74,2.248Z" fill="#032D42" fill-rule="evenodd"/><path d="M81.12,19.35V6.523h3.293V7.554a5.625,5.625,0,0,1,3.609-1.295,5.747,5.747,0,0,1,4.427,2.063,6.482,6.482,0,0,1,1.317,4.5V19.35H90.341v-6.8a3.11,3.11,0,0,0-.764-2.407,2.69,2.69,0,0,0-1.923-.714,4.076,4.076,0,0,0-3.109,1.587V19.35Z" fill="#032D42" fill-rule="evenodd"/><path d="M102.586,6.259A7.5,7.5,0,0,0,97.419,19.21a1.481,1.481,0,0,0,1.926.1,5.355,5.355,0,0,1,6.394,0,1.485,1.485,0,0,0,1.937-.113,7.5,7.5,0,0,0-5.09-12.94M102.542,17.5a3.637,3.637,0,0,1-3.734-3.733,3.734,3.734,0,1,1,7.468,0,3.637,3.637,0,0,1-3.734,3.733" fill="#62d84e" fill-rule="evenodd"/><polygon points="116.788 19.35 114.237 19.35 109.15 6.523 112.57 6.523 115.359 13.853 118.094 6.523 120.952 6.523 123.662 13.853 126.475 6.523 129.896 6.523 124.809 19.35 122.258 19.35 119.523 12.046 116.788 19.35" fill="#032D42" fill-rule="evenodd"/><path d="M129.935,17.9h-.289v.543H129.4V16.957h.6a.476.476,0,0,1,.478.478.469.469,0,0,1-.295.432l.338.579h-.268Zm-.289-.219H130a.249.249,0,0,0,0-.5h-.351Z" fill="#032D42"/><path d="M129.9,16.348a1.379,1.379,0,1,1-1.378,1.379,1.381,1.381,0,0,1,1.378-1.379m0-.218a1.6,1.6,0,1,0,1.6,1.6,1.6,1.6,0,0,0-1.6-1.6Z" fill="#032D42"/></svg>
597
- </span>
598
- <span class="nav-divider"></span>
599
- <span class="nb-logo">
600
- <!-- NOWAI-Bench mark: 3x3 capability matrix, one cell green -->
601
- <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" aria-label="NOWAI-Bench">
602
- <rect x="0" y="0" width="5" height="5" rx="0.6" fill="#032D42"/>
603
- <rect x="6.5" y="0" width="5" height="5" rx="0.6" fill="#032D42"/>
604
- <rect x="13" y="0" width="5" height="5" rx="0.6" fill="#63DF4E"/>
605
- <rect x="0" y="6.5" width="5" height="5" rx="0.6" fill="#032D42"/>
606
- <rect x="6.5" y="6.5" width="5" height="5" rx="0.6" fill="#032D42"/>
607
- <rect x="13" y="6.5" width="5" height="5" rx="0.6" fill="#032D42"/>
608
- <rect x="0" y="13" width="5" height="5" rx="0.6" fill="#032D42"/>
609
- <rect x="6.5" y="13" width="5" height="5" rx="0.6" fill="#032D42"/>
610
- <rect x="13" y="13" width="5" height="5" rx="0.6" fill="#032D42"/>
611
- </svg>
612
- </span>
613
- <span class="brand-wordmark">NOWAI-Bench</span>
614
- </div>
615
- </nav>
616
-
617
- <!-- Page title -->
618
- <h1>NOWAI-Bench</h1>
619
- <p class="subtitle">An open benchmarking suite for enterprise AI agents.</p>
620
-
621
- <!-- Compact stat strip -->
622
- <div class="stat-strip">
623
- <div>
624
- <div class="stat-value">2</div>
625
- <div class="stat-label">Benchmarks</div>
626
- </div>
627
- <div>
628
- <div class="stat-value">2026<span class="qualifier">Q2</span></div>
629
- <div class="stat-label">Last updated</div>
630
- </div>
631
- </div>
632
-
633
- <!-- Overview section -->
634
- <h2 class="section-title">Overview</h2>
635
- <p class="section-tagline">An open benchmarking suite for enterprise AI agents.</p>
636
-
637
- <div class="prose">
638
- <p>
639
- NOWAI-Bench is a coordinated, multi-benchmark effort by ServiceNow to measure whether AI agents perform reliably across the workflows, modalities, and governance demands of real enterprises. Rather than a single test, it is an expanding portfolio of benchmarks—each targeting a distinct slice of what enterprise agents are asked to do.
640
- </p>
641
- <p>
642
- The current release covers two slices: <b>EnterpriseOps-Gym</b> evaluates long-horizon task agents across eight enterprise domains, and <b>EVA-Bench</b> evaluates voice agents on both task accuracy and conversational experience. Together they span text-based multi-step workflow execution and governed voice interaction—two of the most common deployment patterns for enterprise agents today.
643
- </p>
644
- <p>
645
- This document describes the currently released benchmarks and how to read their results. It is intended to stay live: as new benchmarks land, the README is updated to reflect them.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
646
  </p>
647
- </div>
648
-
649
- <!-- Capability leaders header -->
650
- <div class="leaders-header">
651
- <div class="leaders-intro">
652
- <h2 class="section-title">Benchmark cards</h2>
653
- <p>A high-level overview of each NOWAI-Bench benchmark.</p>
654
- </div>
655
- <div class="version-block">
656
- <span class="version-tag">v1.0</span>
657
- <div class="version-note">Radar view planned for v1.1 once benchmarks expose named capability sub-axes.</div>
658
- </div>
659
- </div>
660
-
661
- <!-- Benchmark cards -->
662
- <div class="cards">
663
-
664
- <!-- EnterpriseOps-Gym -->
665
- <div class="card eog">
666
- <div class="card-header">
667
- <span class="dot eog"></span>
668
- <span class="card-tag">EnterpriseOps-Gym</span>
669
- <span class="card-sub">long-horizon task agents</span>
670
- </div>
671
-
672
- <div class="leader-eyebrow">Top model</div>
673
- <div class="leader-name">Claude Opus 4.5</div>
674
- <div class="leader-meta">Anthropic · cascade</div>
675
-
676
- <div class="score-row">
677
- <span class="score">37.4<span class="pct">%</span></span>
678
- <span class="score-label">Success rate · Oracle mode</span>
679
- </div>
680
-
681
- <div class="runners">
682
- <div class="runner-row">
683
- <span class="runner-rank">2</span>
684
- <span>GPT-5.4</span>
685
- <span class="runner-bar bar-bg-eog"><span class="fill bar-fill-eog" style="width: 93%;"></span></span>
686
- <span class="runner-val">34.8</span>
687
- </div>
688
- <div class="runner-row">
689
- <span class="runner-rank">3</span>
690
- <span>Gemini 3 Pro</span>
691
- <span class="runner-bar bar-bg-eog"><span class="fill bar-fill-eog" style="width: 83%;"></span></span>
692
- <span class="runner-val">31.2</span>
693
- </div>
694
- <div class="runner-row">
695
- <span class="runner-rank">4</span>
696
- <span>Claude Sonnet 4.6</span>
697
- <span class="runner-bar bar-bg-eog"><span class="fill bar-fill-eog" style="width: 76%;"></span></span>
698
- <span class="runner-val">28.6</span>
699
- </div>
700
- <div class="runner-row">
701
- <span class="runner-rank">5</span>
702
- <span>GPT-5.4 Mini</span>
703
- <span class="runner-bar bar-bg-eog"><span class="fill bar-fill-eog" style="width: 70%;"></span></span>
704
- <span class="runner-val">26.1</span>
705
- </div>
706
- </div>
707
-
708
- <div class="card-footer">View full EOG leaderboard →</div>
709
- </div>
710
-
711
- <!-- EVA-Bench (merged) -->
712
- <div class="card eva">
713
- <div class="card-header">
714
- <span class="dot eva"></span>
715
- <span class="card-tag">EVA-Bench</span>
716
- <span class="card-sub">voice agents · accuracy and experience</span>
717
- </div>
718
-
719
- <div class="eva-split">
720
-
721
- <!-- Accuracy row -->
722
- <div class="eva-row">
723
- <div class="eva-axis-header">
724
- <span class="eva-axis-label acc">Accuracy</span>
725
- <span class="eva-meta">EVA-A · PASS@3</span>
726
- </div>
727
- <div class="eva-leader-row">
728
- <div>
729
- <div class="eva-leader-name">Nova + GPT-5.4 + Sonic</div>
730
- <div class="eva-leader-meta">cascade · mixed</div>
731
- </div>
732
- <span class="eva-score">0.41</span>
733
- </div>
734
- <div class="eva-runner">
735
- <span class="runner-rank">2</span>
736
- <span>Claude Opus 4.5</span>
737
- <span class="runner-bar bar-bg-eva-a"><span class="fill bar-fill-eva-a" style="width: 78%;"></span></span>
738
- <span class="runner-val">0.32</span>
739
- </div>
740
- <div class="eva-runner">
741
- <span class="runner-rank">3</span>
742
- <span>Scribe+Gemini-3-Flash</span>
743
- <span class="runner-bar bar-bg-eva-a"><span class="fill bar-fill-eva-a" style="width: 76%;"></span></span>
744
- <span class="runner-val">0.31</span>
745
- </div>
746
- </div>
747
-
748
- <!-- Experience row -->
749
- <div class="eva-row">
750
- <div class="eva-axis-header">
751
- <span class="eva-axis-label exp">Experience</span>
752
- <span class="eva-meta">EVA-X · PASS@3</span>
753
- </div>
754
- <div class="eva-leader-row">
755
- <div>
756
- <div class="eva-leader-name">Gemini Live</div>
757
- <div class="eva-leader-meta">Google · S2S</div>
758
- </div>
759
- <span class="eva-score">0.49</span>
760
- </div>
761
- <div class="eva-runner">
762
- <span class="runner-rank">2</span>
763
- <span>GPT-Realtime</span>
764
- <span class="runner-bar bar-bg-eva-x"><span class="fill bar-fill-eva-x" style="width: 96%;"></span></span>
765
- <span class="runner-val">0.47</span>
766
- </div>
767
- <div class="eva-runner">
768
- <span class="runner-rank">3</span>
769
- <span>Whisper+Qwen 3.5</span>
770
- <span class="runner-bar bar-bg-eva-x"><span class="fill bar-fill-eva-x" style="width: 88%;"></span></span>
771
- <span class="runner-val">0.43</span>
772
- </div>
773
- </div>
774
-
775
- </div>
776
-
777
- <div class="card-footer">View full EVA leaderboard →</div>
778
- </div>
779
-
780
- </div>
781
-
782
- <footer class="page-footer">
783
- &copy; 2026 ServiceNow, Inc. All rights reserved.
784
- </footer>
785
-
786
- </div>
787
-
788
  </body>
789
  </html>
 
1
  <!DOCTYPE html>
2
+ <html class="light" lang="en">
3
  <head>
4
+ <meta charset="utf-8"/>
5
+ <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
6
+ <title>NOWAI-Bench | Enterprise AI Benchmarking</title>
7
+ <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&amp;family=JetBrains+Mono:wght@400;500&amp;display=swap" rel="stylesheet"/>
9
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
10
+ <link rel="stylesheet" href="style.css"/>
11
+ <script id="tailwind-config">
12
+ tailwind.config = {
13
+ darkMode: "class",
14
+ theme: {
15
+ extend: {
16
+ "colors": {
17
+ "surface-muted": "#F4F7F9",
18
+ "tertiary-container": "#402302",
19
+ "error": "#ba1a1a",
20
+ "surface": "#faf9fb",
21
+ "surface-container-highest": "#e3e2e4",
22
+ "on-tertiary-fixed-variant": "#623f1b",
23
+ "error-container": "#ffdad6",
24
+ "surface-dim": "#dadadc",
25
+ "secondary": "#056e00",
26
+ "surface-container-high": "#e8e8ea",
27
+ "border-subtle": "#E1E8ED",
28
+ "secondary-container": "#80fe68",
29
+ "on-tertiary": "#ffffff",
30
+ "surface-tint": "#406279",
31
+ "on-primary-fixed-variant": "#284a61",
32
+ "inverse-primary": "#a8cbe6",
33
+ "infinite-blue": "#032D42",
34
+ "background": "#faf9fb",
35
+ "tertiary-fixed": "#ffdcbe",
36
+ "on-secondary": "#ffffff",
37
+ "tertiary-fixed-dim": "#efbd8e",
38
+ "surface-variant": "#e3e2e4",
39
+ "on-background": "#1a1c1d",
40
+ "surface-container": "#eeedef",
41
+ "primary-container": "#032d42",
42
+ "primary": "#001725",
43
+ "outline": "#72787d",
44
+ "surface-container-lowest": "#ffffff",
45
+ "surface-bright": "#faf9fb",
46
+ "tertiary": "#241100",
47
+ "secondary-fixed-dim": "#64e04f",
48
+ "wasabi-green": "#63DF4E",
49
+ "on-tertiary-fixed": "#2d1600",
50
+ "on-secondary-container": "#057500",
51
+ "outline-variant": "#c2c7cd",
52
+ "on-error": "#ffffff",
53
+ "on-error-container": "#93000a",
54
+ "on-surface": "#1a1c1d",
55
+ "data-neutral": "#64748B",
56
+ "on-primary": "#ffffff",
57
+ "on-secondary-fixed-variant": "#035300",
58
+ "on-tertiary-container": "#b5885d",
59
+ "primary-fixed-dim": "#a8cbe6",
60
+ "on-secondary-fixed": "#012200",
61
+ "on-primary-fixed": "#001e2e",
62
+ "on-primary-container": "#7395ae",
63
+ "surface-container-low": "#f4f3f5",
64
+ "secondary-fixed": "#80fe68",
65
+ "inverse-on-surface": "#f1f0f2",
66
+ "inverse-surface": "#2f3032",
67
+ "primary-fixed": "#c8e6ff",
68
+ "on-surface-variant": "#42474c",
69
+ "bright-blue": "#52B8FF",
70
+ "bright-indigo": "#7661FF"
71
+ },
72
+ "borderRadius": {
73
+ "DEFAULT": "0.125rem",
74
+ "lg": "0.25rem",
75
+ "xl": "0.5rem",
76
+ "full": "0.75rem"
77
+ }
78
+ },
79
+ fontFamily: {
80
+ 'sans': ['ServiceNow Sans', 'Hanken Grotesk', 'sans-serif'],
81
+ 'mono': ['ServiceNow Sans Mono', 'JetBrains Mono', 'monospace'],
82
+ }
83
+ },
84
+ }
85
+ </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  </head>
87
+ <body class="font-sans">
88
+ <div class="fixed top-0 right-0 -z-10 pointer-events-none opacity-[0.07] overflow-hidden w-[800px] h-[960px] watermark-container" style="transform: translate(25%, -10%) rotate(-15deg) scale(0.8);">
89
+ <svg class="w-full h-full" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
90
+ <rect class="wave-1" fill="#032D42" height="22" rx="3" width="22" x="10" y="10"></rect>
91
+ <rect class="wave-2" fill="#7661FF" height="22" rx="3" width="22" x="39" y="10"></rect>
92
+ <rect class="wave-3" fill="#63DF4E" height="22" rx="3" width="22" x="68" y="10"></rect>
93
+ <rect class="wave-2" fill="#52B8FF" height="22" rx="3" width="22" x="10" y="39"></rect>
94
+ <rect class="wave-3" fill="#032D42" fill-opacity="0.6" height="22" rx="3" width="22" x="39" y="39"></rect>
95
+ <rect class="wave-4" fill="#032D42" height="22" rx="3" width="22" x="68" y="39"></rect>
96
+ <rect class="wave-3" fill="#63DF4E" fill-opacity="0.4" height="22" rx="3" width="22" x="10" y="68"></rect>
97
+ <rect class="wave-4" fill="#7661FF" fill-opacity="0.8" height="22" rx="3" width="22" x="39" y="68"></rect>
98
+ <rect class="wave-5" fill="#032D42" height="22" rx="3" width="22" x="68" y="68"></rect>
99
+ </svg>
100
+ </div>
101
+ <div class="max-w-[1280px] mx-auto px-6 md:px-8 pb-16">
102
+ <!-- Top navigation -->
103
+ <nav class="flex items-center justify-between py-6 border-b border-border-subtle mb-10">
104
+ <div class="flex items-center gap-4">
105
+ <span class="flex items-center">
106
+ <svg aria-label="ServiceNow" height="20" viewbox="0 0 132 20" width="132" xmlns="http://www.w3.org/2000/svg"><path d="M32.022,6.391a5.626,5.626,0,0,0-3.61,1.3V6.523H25.119V19.35h3.425v-8.2a4.073,4.073,0,0,1,3.109-1.588,3.494,3.494,0,0,1,1.374.206V6.479a5.851,5.851,0,0,0-1.005-.088" fill="#032D42" fill-rule="evenodd"></path><path d="M2.16,15.436a5.369,5.369,0,0,0,3.5,1.269c.922,0,1.633-.45,1.633-1.084,0-1.931-6.191-1.243-6.191-5.369,0-2.459,2.371-3.993,4.9-3.993a7.9,7.9,0,0,1,4.32,1.3L8.72,10.04a4.3,4.3,0,0,0-2.45-.872c-.948,0-1.739.37-1.739,1.031,0,1.666,6.192,1.005,6.192,5.448,0,2.46-2.4,3.967-5.085,3.967A8.815,8.815,0,0,1,.5,17.9Z" fill="#032D42" fill-rule="evenodd"></path><path d="M23.657,12.817c0-3.57-2.5-6.558-6.034-6.558-3.794,0-6.218,3.12-6.218,6.691A6.4,6.4,0,0,0,18.1,19.614a6.919,6.919,0,0,0,5.243-2.3l-1.95-1.957a4.515,4.515,0,0,1-3.214,1.481A3.36,3.36,0,0,1,14.725,13.8h8.853A5.735,5.735,0,0,0,23.657,12.817Zm-8.774-1.533a2.775,2.775,0,0,1,2.74-2.248,2.552,2.552,0,0,1,2.53,2.248Z" fill="#032D42" fill-rule="evenodd"></path><polygon fill="#032D42" fill-rule="evenodd" points="41.19 14.351 44.694 6.523 48.252 6.523 42.376 19.35 40.005 19.35 34.129 6.523 37.686 6.523 41.19 14.351"></polygon><path d="M51.128.5A2.2,2.2,0,1,1,48.888,2.7,2.2,2.2,0,0,1,51.128.5" fill="#032D42" fill-rule="evenodd"></path><rect fill="#032D42" height="12.827" width="3.425" x="49.415" y="6.523"></rect><path d="M67,16.731a6.766,6.766,0,0,1-5.8,2.883,6.68,6.68,0,1,1,.026-13.355,6.808,6.808,0,0,1,5.375,2.565l-2.424,2.142a3.7,3.7,0,0,0-2.951-1.534A3.433,3.433,0,0,0,57.78,12.95a3.383,3.383,0,0,0,3.531,3.49,3.741,3.741,0,0,0,3.056-1.692Z" fill="#032D42" fill-rule="evenodd"></path><path d="M79.442,17.313a6.918,6.918,0,0,1-5.243,2.3,6.4,6.4,0,0,1-6.692-6.664c0-3.571,2.424-6.691,6.218-6.691,3.53,0,6.033,2.988,6.033,6.558a5.635,5.635,0,0,1-.079.979H70.826a3.36,3.36,0,0,0,3.452,3.041,4.52,4.52,0,0,0,3.215-1.481Zm-3.188-6.029a2.551,2.551,0,0,0-2.529-2.248,2.774,2.774,0,0,0-2.74,2.248Z" fill="#032D42" fill-rule="evenodd"></path><path d="M81.12,19.35V6.523h3.293V7.554a5.625,5.625,0,0,1,3.609-1.295,5.747,5.747,0,0,1,4.427,2.063,6.482,6.482,0,0,1,1.317,4.5V19.35H90.341v-6.8a3.11,3.11,0,0,0-.764-2.407,2.69,2.69,0,0,0-1.923-.714,4.076,4.076,0,0,0-3.109,1.587V19.35Z" fill="#032D42"></path><path d="M102.586,6.259A7.5,7.5,0,0,0,97.419,19.21a1.481,1.481,0,0,0,1.926.1,5.355,5.355,0,0,1,6.394,0,1.485,1.485,0,0,0,1.937-.113,7.5,7.5,0,0,0-5.09-12.94M102.542,17.5a3.637,3.637,0,0,1-3.734-3.733,3.734,3.734,0,1,1,7.468,0,3.637,3.637,0,0,1-3.734,3.733" fill="#62d84e" fill-rule="evenodd"></path><polygon fill="#032D42" fill-rule="evenodd" points="116.788 19.35 114.237 19.35 109.15 6.523 112.57 6.523 115.359 13.853 118.094 6.523 120.952 6.523 123.662 13.853 126.475 6.523 129.896 6.523 124.809 19.35 122.258 19.35 119.523 12.046 116.788 19.35"></polygon><path d="M129.935,17.9h-.289v.543H129.4V16.957h.6a.476.476,0,0,1,.478.478.469.469,0,0,1-.295.432l.338.579h-.268Zm-.289-.219H130a.249.249,0,0,0,0-.5h-.351Z" fill="#032D42"></path><path d="M129.9,16.348a1.379,1.379,0,1,1-1.378,1.379,1.381,1.381,0,0,1,1.378-1.379m0-.218a1.6,1.6,0,1,0,1.6,1.6,1.6,1.6,0,0,0-1.6-1.6Z" fill="#032D42"></path></svg>
107
+ </span>
108
+ <span class="w-[1px] h-6 bg-border-subtle"></span>
109
+ <span class="flex items-center gap-2">
110
+ <img alt="NOWAI-Bench Logo" class="w-6 h-6" src="https://lh3.googleusercontent.com/aida/ADBb0ugX8rLuebujbgFwPah4hVjMpkYXC7fxt2EG6mDh5UnhRZ3Zx4w3OdWdvwJDxH-YifBtHyrqAusEc4qEeb1ypNrUU3OJ5sEg9N6ObPaqQOkd493OPVRITyMTYDtz_5mynOn1Ddfm6rjVVdf60dBpiH9bGjja_iJkgiaqm2qNnbaBTlBy_WMT0eca1EFYkfNlcV9M24R9SucEJ3U-WurZrjXbqPmw_89q3Nr0K2YUSk7ZHoPa1NqhPyOZ7R4"/>
111
+ <span class="text-infinite-blue font-bold tracking-tight text-[15px]">NOWAI-Bench</span>
112
+ </span>
113
+ </div>
114
+ </nav>
115
+ <!-- Hero section -->
116
+ <header class="mb-12">
117
+ <h1 class="text-infinite-blue font-bold text-5xl md:text-6xl tracking-tighter mb-4 leading-none">NOWAI-Bench</h1>
118
+ <p class="text-on-surface-variant text-lg md:text-xl font-light max-w-2xl">An open benchmarking suite for enterprise AI agents.</p>
119
+ </header>
120
+ <!-- Compact stat strip -->
121
+ <div class="grid grid-cols-2 sm:flex sm:gap-16 py-8 border-y border-border-subtle mb-16">
122
+ <div>
123
+ <div class="text-infinite-blue font-bold text-4xl tabular-nums leading-none">2</div>
124
+ <div class="font-mono text-[11px] text-on-surface-variant uppercase tracking-[0.12em] mt-3">Benchmarks</div>
125
+ </div>
126
+ <div>
127
+ <div class="text-infinite-blue font-bold text-4xl tabular-nums leading-none flex items-baseline">
128
+ 2026<span class="text-on-surface-variant text-base font-medium ml-1">Q2</span>
129
+ </div>
130
+ <div class="font-mono text-[11px] text-on-surface-variant uppercase tracking-[0.12em] mt-3">Last updated</div>
131
+ </div>
132
+ </div>
133
+ <!-- Overview section -->
134
+ <section class="mb-20">
135
+ <h2 class="text-infinite-blue font-bold text-3xl tracking-tight mb-8">Overview</h2>
136
+ <div class="prose max-w-3xl">
137
+ <p class="text-infinite-blue text-[16px] leading-[1.7] mb-5">
138
+ NOWAI-Bench is a coordinated, multi-benchmark effort by ServiceNow to measure whether AI agents perform reliably across the workflows, modalities, and governance demands of real enterprises. Rather than a single test, it is an expanding portfolio of benchmarks—each targeting a distinct slice of what enterprise agents are asked to do.
139
+ </p>
140
+ <p class="text-infinite-blue text-[16px] leading-[1.7] mb-5">
141
+ The current release covers two slices: <strong class="font-bold">EnterpriseOps-Gym</strong> evaluates long-horizon task agents across eight enterprise domains, and <strong class="font-bold">EVA-Bench</strong> evaluates voice agents on both task accuracy and conversational experience. Together they span text-based multi-step workflow execution and governed voice interaction—two of the most common deployment patterns for enterprise agents today.
142
+ </p>
143
+ <p class="text-infinite-blue text-[16px] leading-[1.7]">
144
+ This document describes the currently released benchmarks and how to read their results. It is intended to stay live: as new benchmarks land, the README is updated to reflect them.
145
+ </p>
146
+ </div>
147
+ </section>
148
+ <!-- Capability leaders header -->
149
+ <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-8">
150
+ <div>
151
+ <h2 class="text-infinite-blue font-bold text-3xl tracking-tight mb-2">Benchmark cards</h2>
152
+ <p class="text-on-surface-variant font-light text-[15px]">A high-level overview of each NOWAI-Bench benchmark.</p>
153
+ </div>
154
+ <div class="md:text-right">
155
+ <span class="inline-block bg-infinite-blue text-white font-mono text-[11px] px-3 py-1.5 rounded uppercase tracking-wider mb-2">v1.0</span>
156
+ <p class="text-on-surface-variant text-xs font-light max-w-[260px] leading-relaxed">Radar view planned for v1.1 once benchmarks expose named capability sub-axes.</p>
157
+ </div>
158
+ </div>
159
+ <!-- Benchmark cards -->
160
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
161
+ <!-- EnterpriseOps-Gym -->
162
+ <div class="bg-white border border-border-subtle rounded-2xl p-8 card-shadow border-l-[4px] accent-infinite">
163
+ <div class="flex items-center gap-3 mb-8">
164
+ <span class="w-3 h-3 rounded-full fill-infinite"></span>
165
+ <h3 class="text-infinite-blue font-bold text-2xl tracking-tight">EnterpriseOps-Gym</h3>
166
+ <span class="text-on-surface-variant text-xs font-medium bg-surface-muted px-2 py-0.5 rounded">long-horizon task agents</span>
167
+ </div>
168
+ <div class="mb-6">
169
+ <div class="font-mono text-[10px] text-on-surface-variant uppercase tracking-[0.15em] mb-2">Top model</div>
170
+ <div class="text-infinite-blue font-bold text-xl leading-tight">Claude Opus 4.5</div>
171
+ <div class="text-on-surface-variant text-sm font-medium">Anthropic · cascade</div>
172
+ </div>
173
+ <div class="bg-[#f0f9f3] border-l-4 border-wasabi-green rounded-xl p-4 flex items-baseline gap-3 mb-8">
174
+ <span class="text-infinite-blue font-bold text-3xl tabular-nums leading-none">37.4<span class="text-on-surface-variant text-lg font-medium ml-0.5">%</span></span>
175
+ <span class="font-mono text-[10px] text-on-surface-variant uppercase tracking-wider font-medium">Success rate · Oracle mode</span>
176
+ </div>
177
+ <div class="space-y-4">
178
+ <!-- Runner 2 -->
179
+ <div class="grid grid-cols-[20px_1fr_100px_45px] items-center gap-3">
180
+ <span class="text-on-surface-variant text-xs tabular-nums font-medium">2</span>
181
+ <span class="text-on-surface text-sm font-medium">GPT-5.4</span>
182
+ <div class="h-1.5 w-full bg-infinite-soft rounded-full overflow-hidden">
183
+ <div class="h-full fill-infinite rounded-full" style="width: 93%;"></div>
184
+ </div>
185
+ <span class="text-infinite-blue text-sm font-bold text-right tabular-nums">34.8</span>
186
+ </div>
187
+ <!-- Runner 3 -->
188
+ <div class="grid grid-cols-[20px_1fr_100px_45px] items-center gap-3">
189
+ <span class="text-on-surface-variant text-xs tabular-nums font-medium">3</span>
190
+ <span class="text-on-surface text-sm font-medium">Gemini 3 Pro</span>
191
+ <div class="h-1.5 w-full bg-infinite-soft rounded-full overflow-hidden">
192
+ <div class="h-full fill-infinite rounded-full" style="width: 83%;"></div>
193
+ </div>
194
+ <span class="text-infinite-blue text-sm font-bold text-right tabular-nums">31.2</span>
195
+ </div>
196
+ <!-- Runner 4 -->
197
+ <div class="grid grid-cols-[20px_1fr_100px_45px] items-center gap-3">
198
+ <span class="text-on-surface-variant text-xs tabular-nums font-medium">4</span>
199
+ <span class="text-on-surface text-sm font-medium">Claude Sonnet 4.6</span>
200
+ <div class="h-1.5 w-full bg-infinite-soft rounded-full overflow-hidden">
201
+ <div class="h-full fill-infinite rounded-full" style="width: 76%;"></div>
202
+ </div>
203
+ <span class="text-infinite-blue text-sm font-bold text-right tabular-nums">28.6</span>
204
+ </div>
205
+ </div>
206
+ <div class="mt-8 pt-6 border-t border-border-subtle">
207
+ <a class="text-infinite-blue font-bold text-sm hover:text-wasabi-green transition-colors flex items-center gap-2 group" href="#">
208
+ View full EOG leaderboard
209
+ <span class="material-symbols-outlined text-sm transition-transform group-hover:translate-x-1">arrow_forward</span>
210
+ </a>
211
+ </div>
212
+ </div>
213
+ <!-- EVA-Bench -->
214
+ <div class="bg-white border border-border-subtle rounded-2xl p-8 card-shadow border-l-[4px] accent-indigo">
215
+ <div class="flex items-center gap-3 mb-8">
216
+ <span class="w-3 h-3 rounded-full fill-indigo"></span>
217
+ <h3 class="text-infinite-blue font-bold text-2xl tracking-tight">EVA-Bench</h3>
218
+ <span class="text-on-surface-variant text-xs font-medium bg-surface-muted px-2 py-0.5 rounded">voice agents · accuracy and experience</span>
219
+ </div>
220
+ <div class="space-y-10">
221
+ <!-- Accuracy Split -->
222
+ <div>
223
+ <div class="flex justify-between items-baseline mb-3">
224
+ <span class="font-mono text-[10px] text-[#5240CC] uppercase tracking-[0.15em] font-bold">Accuracy</span>
225
+ <span class="font-mono text-[10px] text-on-surface-variant uppercase tracking-wider">EVA-A · PASS@3</span>
226
+ </div>
227
+ <div class="bg-[#f2f0ff] border-l-4 border-bright-indigo rounded-lg p-3 flex justify-between items-center mb-4">
228
+ <div>
229
+ <div class="text-infinite-blue font-bold text-base leading-tight">Nova + GPT-5.4 + Sonic</div>
230
+ <div class="text-on-surface-variant text-[11px] font-medium">cascade · mixed</div>
231
+ </div>
232
+ <span class="text-infinite-blue font-bold text-2xl tabular-nums">0.41</span>
233
+ </div>
234
+ <div class="space-y-3">
235
+ <div class="grid grid-cols-[18px_1fr_80px_35px] items-center gap-2 text-xs">
236
+ <span class="text-on-surface-variant tabular-nums font-medium">2</span>
237
+ <span class="text-on-surface font-medium truncate">Claude Opus 4.5</span>
238
+ <div class="h-1 w-full bg-indigo-soft rounded-full overflow-hidden">
239
+ <div class="h-full fill-indigo rounded-full" style="width: 78%;"></div>
240
+ </div>
241
+ <span class="text-infinite-blue font-bold text-right tabular-nums">0.32</span>
242
+ </div>
243
+ <div class="grid grid-cols-[18px_1fr_80px_35px] items-center gap-2 text-xs">
244
+ <span class="text-on-surface-variant tabular-nums font-medium">3</span>
245
+ <span class="text-on-surface font-medium truncate">Scribe+Gemini-3-Flash</span>
246
+ <div class="h-1 w-full bg-indigo-soft rounded-full overflow-hidden">
247
+ <div class="h-full fill-indigo rounded-full" style="width: 76%;"></div>
248
+ </div>
249
+ <span class="text-infinite-blue font-bold text-right tabular-nums">0.31</span>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ <!-- Experience Split -->
254
+ <div class="pt-8 border-t border-dashed border-border-subtle">
255
+ <div class="flex justify-between items-baseline mb-3">
256
+ <span class="font-mono text-[10px] text-[#006DAA] uppercase tracking-[0.15em] font-bold">Experience</span>
257
+ <span class="font-mono text-[10px] text-on-surface-variant uppercase tracking-wider">EVA-X · PASS@3</span>
258
+ </div>
259
+ <div class="bg-[#f0f9ff] border-l-4 border-bright-blue rounded-lg p-3 flex justify-between items-center mb-4">
260
+ <div>
261
+ <div class="text-infinite-blue font-bold text-base leading-tight">Gemini Live</div>
262
+ <div class="text-on-surface-variant text-[11px] font-medium">Google · S2S</div>
263
+ </div>
264
+ <span class="text-infinite-blue font-bold text-2xl tabular-nums">0.49</span>
265
+ </div>
266
+ <div class="space-y-3">
267
+ <div class="grid grid-cols-[18px_1fr_80px_35px] items-center gap-2 text-xs">
268
+ <span class="text-on-surface-variant tabular-nums font-medium">2</span>
269
+ <span class="text-on-surface font-medium truncate">GPT-Realtime</span>
270
+ <div class="h-1 w-full bg-blue-soft rounded-full overflow-hidden">
271
+ <div class="h-full fill-blue rounded-full" style="width: 96%;"></div>
272
+ </div>
273
+ <span class="text-infinite-blue font-bold text-right tabular-nums">0.47</span>
274
+ </div>
275
+ <div class="grid grid-cols-[18px_1fr_80px_35px] items-center gap-2 text-xs">
276
+ <span class="text-on-surface-variant tabular-nums font-medium">3</span>
277
+ <span class="text-on-surface font-medium truncate">Whisper+Qwen 3.5</span>
278
+ <div class="h-1 w-full bg-blue-soft rounded-full overflow-hidden">
279
+ <div class="h-full fill-blue rounded-full" style="width: 88%;"></div>
280
+ </div>
281
+ <span class="text-infinite-blue font-bold text-right tabular-nums">0.43</span>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ <div class="mt-8 pt-6 border-t border-border-subtle">
287
+ <a class="text-infinite-blue font-bold text-sm hover:text-wasabi-green transition-colors flex items-center gap-2 group" href="#">
288
+ View full EVA leaderboard
289
+ <span class="material-symbols-outlined text-sm transition-transform group-hover:translate-x-1">arrow_forward</span>
290
+ </a>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ <!-- Footer -->
295
+ <footer class="mt-24 pt-8 border-t border-border-subtle text-center">
296
+ <p class="text-on-surface-variant text-[11px] font-light uppercase tracking-widest">
297
+ &copy; 2026 ServiceNow, Inc. All rights reserved.
298
  </p>
299
+ </footer>
300
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
301
  </body>
302
  </html>
mockups/v0_reskin/IGNORE--nowai_bench_refined_pulse_animation_faster/code.html ADDED
@@ -0,0 +1,377 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head>
4
+ <meta charset="utf-8"/>
5
+ <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
6
+ <title>NOWAI-Bench | Enterprise AI Benchmarking</title>
7
+ <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&amp;family=JetBrains+Mono:wght@400;500&amp;display=swap" rel="stylesheet"/>
9
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
10
+ <script id="tailwind-config">
11
+ tailwind.config = {
12
+ darkMode: "class",
13
+ theme: {
14
+ extend: {
15
+ "colors": {
16
+ "surface-muted": "#F4F7F9",
17
+ "tertiary-container": "#402302",
18
+ "error": "#ba1a1a",
19
+ "surface": "#faf9fb",
20
+ "surface-container-highest": "#e3e2e4",
21
+ "on-tertiary-fixed-variant": "#623f1b",
22
+ "error-container": "#ffdad6",
23
+ "surface-dim": "#dadadc",
24
+ "secondary": "#056e00",
25
+ "surface-container-high": "#e8e8ea",
26
+ "border-subtle": "#E1E8ED",
27
+ "secondary-container": "#80fe68",
28
+ "on-tertiary": "#ffffff",
29
+ "surface-tint": "#406279",
30
+ "on-primary-fixed-variant": "#284a61",
31
+ "inverse-primary": "#a8cbe6",
32
+ "infinite-blue": "#032D42",
33
+ "background": "#faf9fb",
34
+ "tertiary-fixed": "#ffdcbe",
35
+ "on-secondary": "#ffffff",
36
+ "tertiary-fixed-dim": "#efbd8e",
37
+ "surface-variant": "#e3e2e4",
38
+ "on-background": "#1a1c1d",
39
+ "surface-container": "#eeedef",
40
+ "primary-container": "#032d42",
41
+ "primary": "#001725",
42
+ "outline": "#72787d",
43
+ "surface-container-lowest": "#ffffff",
44
+ "surface-bright": "#faf9fb",
45
+ "tertiary": "#241100",
46
+ "secondary-fixed-dim": "#64e04f",
47
+ "wasabi-green": "#63DF4E",
48
+ "on-tertiary-fixed": "#2d1600",
49
+ "on-secondary-container": "#057500",
50
+ "outline-variant": "#c2c7cd",
51
+ "on-error": "#ffffff",
52
+ "on-error-container": "#93000a",
53
+ "on-surface": "#1a1c1d",
54
+ "data-neutral": "#64748B",
55
+ "on-primary": "#ffffff",
56
+ "on-secondary-fixed-variant": "#035300",
57
+ "on-tertiary-container": "#b5885d",
58
+ "primary-fixed-dim": "#a8cbe6",
59
+ "on-secondary-fixed": "#012200",
60
+ "on-primary-fixed": "#001e2e",
61
+ "on-primary-container": "#7395ae",
62
+ "surface-container-low": "#f4f3f5",
63
+ "secondary-fixed": "#80fe68",
64
+ "inverse-on-surface": "#f1f0f2",
65
+ "inverse-surface": "#2f3032",
66
+ "primary-fixed": "#c8e6ff",
67
+ "on-surface-variant": "#42474c",
68
+ "bright-blue": "#52B8FF",
69
+ "bright-indigo": "#7661FF"
70
+ },
71
+ "borderRadius": {
72
+ "DEFAULT": "0.125rem",
73
+ "lg": "0.25rem",
74
+ "xl": "0.5rem",
75
+ "full": "0.75rem"
76
+ }
77
+ },
78
+ fontFamily: {
79
+ 'sans': ['ServiceNow Sans', 'Hanken Grotesk', 'sans-serif'],
80
+ 'mono': ['ServiceNow Sans Mono', 'JetBrains Mono', 'monospace'],
81
+ }
82
+ },
83
+ }
84
+ </script>
85
+ <style>
86
+ @font-face {
87
+ font-family: 'ServiceNow Sans';
88
+ src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Light.woff2') format('woff2');
89
+ font-weight: 300; font-style: normal; font-display: swap;
90
+ }
91
+ @font-face {
92
+ font-family: 'ServiceNow Sans';
93
+ src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Regular.woff2') format('woff2');
94
+ font-weight: 400; font-style: normal; font-display: swap;
95
+ }
96
+ @font-face {
97
+ font-family: 'ServiceNow Sans';
98
+ src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Medium.woff2') format('woff2');
99
+ font-weight: 500; font-style: normal; font-display: swap;
100
+ }
101
+ @font-face {
102
+ font-family: 'ServiceNow Sans';
103
+ src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Bold.woff2') format('woff2');
104
+ font-weight: 700; font-style: normal; font-display: swap;
105
+ }
106
+ @font-face {
107
+ font-family: 'ServiceNow Sans Mono';
108
+ src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSansMono-Regular.woff2') format('woff2');
109
+ font-weight: 400; font-style: normal; font-display: swap;
110
+ }
111
+
112
+ body {
113
+ background-color: #faf9fb;
114
+ color: #1a1c1d;
115
+ -webkit-font-smoothing: antialiased;
116
+ }
117
+
118
+ .accent-indigo { border-left-color: #7661FF; }
119
+ .accent-blue { border-left-color: #52B8FF; }
120
+ .accent-infinite { border-left-color: #032D42; }
121
+
122
+ .bg-indigo-soft { background-color: rgba(118, 97, 255, 0.1); }
123
+ .bg-blue-soft { background-color: rgba(82, 184, 255, 0.1); }
124
+ .bg-infinite-soft { background-color: rgba(3, 45, 66, 0.05); }
125
+
126
+ .fill-indigo { background-color: #7661FF; }
127
+ .fill-blue { background-color: #52B8FF; }
128
+ .fill-infinite { background-color: #032D42; }
129
+
130
+ .card-shadow {
131
+ box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.02);
132
+ transition: box-shadow 0.25s ease, transform 0.2s ease;
133
+ }
134
+ .card-shadow:hover {
135
+ box-shadow: 0 10px 15px -3px rgba(3, 45, 66, 0.08), 0 4px 6px -2px rgba(3, 45, 66, 0.04);
136
+ }
137
+
138
+ /* Watermark pixelated wave animation */
139
+ @keyframes pixel-wave {
140
+ 0%, 100% { opacity: 0.2; }
141
+ 50% { opacity: 1; }
142
+ }
143
+ .wave-1 { animation: pixel-wave 4s infinite ease-in-out; animation-delay: 0s; }
144
+ .wave-2 { animation: pixel-wave 4s infinite ease-in-out; animation-delay: 0.4s; }
145
+ .wave-3 { animation: pixel-wave 4s infinite ease-in-out; animation-delay: 0.8s; }
146
+ .wave-4 { animation: pixel-wave 4s infinite ease-in-out; animation-delay: 1.2s; }
147
+ .wave-5 { animation: pixel-wave 4s infinite ease-in-out; animation-delay: 1.6s; }
148
+
149
+ .watermark-container {
150
+ mask-image: linear-gradient(to bottom right, black 20%, transparent 80%);
151
+ -webkit-mask-image: linear-gradient(to bottom right, black 20%, transparent 80%);
152
+ }
153
+
154
+ @media (prefers-reduced-motion: reduce) {
155
+ .wave-1, .wave-2, .wave-3, .wave-4, .wave-5 {
156
+ animation: none;
157
+ opacity: 1;
158
+ }
159
+ }
160
+ </style>
161
+ </head>
162
+ <body class="font-sans">
163
+ <div class="fixed top-0 right-0 -z-10 pointer-events-none opacity-[0.07] overflow-hidden w-[800px] h-[960px] watermark-container" style="transform: translate(25%, -10%) rotate(-15deg) scale(0.8);">
164
+ <svg class="w-full h-full" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
165
+ <rect class="wave-1" fill="#032D42" height="22" rx="3" width="22" x="10" y="10"></rect>
166
+ <rect class="wave-2" fill="#7661FF" height="22" rx="3" width="22" x="39" y="10"></rect>
167
+ <rect class="wave-3" fill="#63DF4E" height="22" rx="3" width="22" x="68" y="10"></rect>
168
+ <rect class="wave-2" fill="#52B8FF" height="22" rx="3" width="22" x="10" y="39"></rect>
169
+ <rect class="wave-3" fill="#032D42" fill-opacity="0.6" height="22" rx="3" width="22" x="39" y="39"></rect>
170
+ <rect class="wave-4" fill="#032D42" height="22" rx="3" width="22" x="68" y="39"></rect>
171
+ <rect class="wave-3" fill="#63DF4E" fill-opacity="0.4" height="22" rx="3" width="22" x="10" y="68"></rect>
172
+ <rect class="wave-4" fill="#7661FF" fill-opacity="0.8" height="22" rx="3" width="22" x="39" y="68"></rect>
173
+ <rect class="wave-5" fill="#032D42" height="22" rx="3" width="22" x="68" y="68"></rect>
174
+ </svg>
175
+ </div>
176
+ <div class="max-w-[1280px] mx-auto px-6 md:px-8 pb-16">
177
+ <!-- Top navigation -->
178
+ <nav class="flex items-center justify-between py-6 border-b border-border-subtle mb-10">
179
+ <div class="flex items-center gap-4">
180
+ <span class="flex items-center">
181
+ <svg aria-label="ServiceNow" height="20" viewbox="0 0 132 20" width="132" xmlns="http://www.w3.org/2000/svg"><path d="M32.022,6.391a5.626,5.626,0,0,0-3.61,1.3V6.523H25.119V19.35h3.425v-8.2a4.073,4.073,0,0,1,3.109-1.588,3.494,3.494,0,0,1,1.374.206V6.479a5.851,5.851,0,0,0-1.005-.088" fill="#032D42" fill-rule="evenodd"></path><path d="M2.16,15.436a5.369,5.369,0,0,0,3.5,1.269c.922,0,1.633-.45,1.633-1.084,0-1.931-6.191-1.243-6.191-5.369,0-2.459,2.371-3.993,4.9-3.993a7.9,7.9,0,0,1,4.32,1.3L8.72,10.04a4.3,4.3,0,0,0-2.45-.872c-.948,0-1.739.37-1.739,1.031,0,1.666,6.192,1.005,6.192,5.448,0,2.46-2.4,3.967-5.085,3.967A8.815,8.815,0,0,1,.5,17.9Z" fill="#032D42" fill-rule="evenodd"></path><path d="M23.657,12.817c0-3.57-2.5-6.558-6.034-6.558-3.794,0-6.218,3.12-6.218,6.691A6.4,6.4,0,0,0,18.1,19.614a6.919,6.919,0,0,0,5.243-2.3l-1.95-1.957a4.515,4.515,0,0,1-3.214,1.481A3.36,3.36,0,0,1,14.725,13.8h8.853A5.735,5.735,0,0,0,23.657,12.817Zm-8.774-1.533a2.775,2.775,0,0,1,2.74-2.248,2.552,2.552,0,0,1,2.53,2.248Z" fill="#032D42" fill-rule="evenodd"></path><polygon fill="#032D42" fill-rule="evenodd" points="41.19 14.351 44.694 6.523 48.252 6.523 42.376 19.35 40.005 19.35 34.129 6.523 37.686 6.523 41.19 14.351"></polygon><path d="M51.128.5A2.2,2.2,0,1,1,48.888,2.7,2.2,2.2,0,0,1,51.128.5" fill="#032D42" fill-rule="evenodd"></path><rect fill="#032D42" height="12.827" width="3.425" x="49.415" y="6.523"></rect><path d="M67,16.731a6.766,6.766,0,0,1-5.8,2.883,6.68,6.68,0,1,1,.026-13.355,6.808,6.808,0,0,1,5.375,2.565l-2.424,2.142a3.7,3.7,0,0,0-2.951-1.534A3.433,3.433,0,0,0,57.78,12.95a3.383,3.383,0,0,0,3.531,3.49,3.741,3.741,0,0,0,3.056-1.692Z" fill="#032D42" fill-rule="evenodd"></path><path d="M79.442,17.313a6.918,6.918,0,0,1-5.243,2.3,6.4,6.4,0,0,1-6.692-6.664c0-3.571,2.424-6.691,6.218-6.691,3.53,0,6.033,2.988,6.033,6.558a5.635,5.635,0,0,1-.079.979H70.826a3.36,3.36,0,0,0,3.452,3.041,4.52,4.52,0,0,0,3.215-1.481Zm-3.188-6.029a2.551,2.551,0,0,0-2.529-2.248,2.774,2.774,0,0,0-2.74,2.248Z" fill="#032D42" fill-rule="evenodd"></path><path d="M81.12,19.35V6.523h3.293V7.554a5.625,5.625,0,0,1,3.609-1.295,5.747,5.747,0,0,1,4.427,2.063,6.482,6.482,0,0,1,1.317,4.5V19.35H90.341v-6.8a3.11,3.11,0,0,0-.764-2.407,2.69,2.69,0,0,0-1.923-.714,4.076,4.076,0,0,0-3.109,1.587V19.35Z" fill="#032D42"></path><path d="M102.586,6.259A7.5,7.5,0,0,0,97.419,19.21a1.481,1.481,0,0,0,1.926.1,5.355,5.355,0,0,1,6.394,0,1.485,1.485,0,0,0,1.937-.113,7.5,7.5,0,0,0-5.09-12.94M102.542,17.5a3.637,3.637,0,0,1-3.734-3.733,3.734,3.734,0,1,1,7.468,0,3.637,3.637,0,0,1-3.734,3.733" fill="#62d84e" fill-rule="evenodd"></path><polygon fill="#032D42" fill-rule="evenodd" points="116.788 19.35 114.237 19.35 109.15 6.523 112.57 6.523 115.359 13.853 118.094 6.523 120.952 6.523 123.662 13.853 126.475 6.523 129.896 6.523 124.809 19.35 122.258 19.35 119.523 12.046 116.788 19.35"></polygon><path d="M129.935,17.9h-.289v.543H129.4V16.957h.6a.476.476,0,0,1,.478.478.469.469,0,0,1-.295.432l.338.579h-.268Zm-.289-.219H130a.249.249,0,0,0,0-.5h-.351Z" fill="#032D42"></path><path d="M129.9,16.348a1.379,1.379,0,1,1-1.378,1.379,1.381,1.381,0,0,1,1.378-1.379m0-.218a1.6,1.6,0,1,0,1.6,1.6,1.6,1.6,0,0,0-1.6-1.6Z" fill="#032D42"></path></svg>
182
+ </span>
183
+ <span class="w-[1px] h-6 bg-border-subtle"></span>
184
+ <span class="flex items-center gap-2">
185
+ <img alt="NOWAI-Bench Logo" class="w-6 h-6" src="https://lh3.googleusercontent.com/aida/ADBb0ugX8rLuebujbgFwPah4hVjMpkYXC7fxt2EG6mDh5UnhRZ3Zx4w3OdWdvwJDxH-YifBtHyrqAusEc4qEeb1ypNrUU3OJ5sEg9N6ObPaqQOkd493OPVRITyMTYDtz_5mynOn1Ddfm6rjVVdf60dBpiH9bGjja_iJkgiaqm2qNnbaBTlBy_WMT0eca1EFYkfNlcV9M24R9SucEJ3U-WurZrjXbqPmw_89q3Nr0K2YUSk7ZHoPa1NqhPyOZ7R4"/>
186
+ <span class="text-infinite-blue font-bold tracking-tight text-[15px]">NOWAI-Bench</span>
187
+ </span>
188
+ </div>
189
+ </nav>
190
+ <!-- Hero section -->
191
+ <header class="mb-12">
192
+ <h1 class="text-infinite-blue font-bold text-5xl md:text-6xl tracking-tighter mb-4 leading-none">NOWAI-Bench</h1>
193
+ <p class="text-on-surface-variant text-lg md:text-xl font-light max-w-2xl">An open benchmarking suite for enterprise AI agents.</p>
194
+ </header>
195
+ <!-- Compact stat strip -->
196
+ <div class="grid grid-cols-2 sm:flex sm:gap-16 py-8 border-y border-border-subtle mb-16">
197
+ <div>
198
+ <div class="text-infinite-blue font-bold text-4xl tabular-nums leading-none">2</div>
199
+ <div class="font-mono text-[11px] text-on-surface-variant uppercase tracking-[0.12em] mt-3">Benchmarks</div>
200
+ </div>
201
+ <div>
202
+ <div class="text-infinite-blue font-bold text-4xl tabular-nums leading-none flex items-baseline">
203
+ 2026<span class="text-on-surface-variant text-base font-medium ml-1">Q2</span>
204
+ </div>
205
+ <div class="font-mono text-[11px] text-on-surface-variant uppercase tracking-[0.12em] mt-3">Last updated</div>
206
+ </div>
207
+ </div>
208
+ <!-- Overview section -->
209
+ <section class="mb-20">
210
+ <h2 class="text-infinite-blue font-bold text-3xl tracking-tight mb-2">Overview</h2>
211
+ <p class="text-on-surface-variant font-light text-[15px] mb-8">An open benchmarking suite for enterprise AI agents.</p>
212
+ <div class="prose max-w-3xl">
213
+ <p class="text-infinite-blue text-[16px] leading-[1.7] mb-5">
214
+ NOWAI-Bench is a coordinated, multi-benchmark effort by ServiceNow to measure whether AI agents perform reliably across the workflows, modalities, and governance demands of real enterprises. Rather than a single test, it is an expanding portfolio of benchmarks—each targeting a distinct slice of what enterprise agents are asked to do.
215
+ </p>
216
+ <p class="text-infinite-blue text-[16px] leading-[1.7] mb-5">
217
+ The current release covers two slices: <strong class="font-bold">EnterpriseOps-Gym</strong> evaluates long-horizon task agents across eight enterprise domains, and <strong class="font-bold">EVA-Bench</strong> evaluates voice agents on both task accuracy and conversational experience. Together they span text-based multi-step workflow execution and governed voice interaction—two of the most common deployment patterns for enterprise agents today.
218
+ </p>
219
+ <p class="text-infinite-blue text-[16px] leading-[1.7]">
220
+ This document describes the currently released benchmarks and how to read their results. It is intended to stay live: as new benchmarks land, the README is updated to reflect them.
221
+ </p>
222
+ </div>
223
+ </section>
224
+ <!-- Capability leaders header -->
225
+ <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-8">
226
+ <div>
227
+ <h2 class="text-infinite-blue font-bold text-3xl tracking-tight mb-2">Benchmark cards</h2>
228
+ <p class="text-on-surface-variant font-light text-[15px]">A high-level overview of each NOWAI-Bench benchmark.</p>
229
+ </div>
230
+ <div class="md:text-right">
231
+ <span class="inline-block bg-infinite-blue text-white font-mono text-[11px] px-3 py-1.5 rounded uppercase tracking-wider mb-2">v1.0</span>
232
+ <p class="text-on-surface-variant text-xs font-light max-w-[260px] leading-relaxed">Radar view planned for v1.1 once benchmarks expose named capability sub-axes.</p>
233
+ </div>
234
+ </div>
235
+ <!-- Benchmark cards -->
236
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
237
+ <!-- EnterpriseOps-Gym -->
238
+ <div class="bg-white border border-border-subtle rounded-2xl p-8 card-shadow border-l-[4px] accent-infinite">
239
+ <div class="flex items-center gap-3 mb-8">
240
+ <span class="w-3 h-3 rounded-full fill-infinite"></span>
241
+ <h3 class="text-infinite-blue font-bold text-2xl tracking-tight">EnterpriseOps-Gym</h3>
242
+ <span class="text-on-surface-variant text-xs font-medium bg-surface-muted px-2 py-0.5 rounded">long-horizon task agents</span>
243
+ </div>
244
+ <div class="mb-6">
245
+ <div class="font-mono text-[10px] text-on-surface-variant uppercase tracking-[0.15em] mb-2">Top model</div>
246
+ <div class="text-infinite-blue font-bold text-xl leading-tight">Claude Opus 4.5</div>
247
+ <div class="text-on-surface-variant text-sm font-medium">Anthropic · cascade</div>
248
+ </div>
249
+ <div class="bg-[#f0f9f3] border-l-4 border-wasabi-green rounded-xl p-4 flex items-baseline gap-3 mb-8">
250
+ <span class="text-infinite-blue font-bold text-3xl tabular-nums leading-none">37.4<span class="text-on-surface-variant text-lg font-medium ml-0.5">%</span></span>
251
+ <span class="font-mono text-[10px] text-on-surface-variant uppercase tracking-wider font-medium">Success rate · Oracle mode</span>
252
+ </div>
253
+ <div class="space-y-4">
254
+ <!-- Runner 2 -->
255
+ <div class="grid grid-cols-[20px_1fr_100px_45px] items-center gap-3">
256
+ <span class="text-on-surface-variant text-xs tabular-nums font-medium">2</span>
257
+ <span class="text-on-surface text-sm font-medium">GPT-5.4</span>
258
+ <div class="h-1.5 w-full bg-infinite-soft rounded-full overflow-hidden">
259
+ <div class="h-full fill-infinite rounded-full" style="width: 93%;"></div>
260
+ </div>
261
+ <span class="text-infinite-blue text-sm font-bold text-right tabular-nums">34.8</span>
262
+ </div>
263
+ <!-- Runner 3 -->
264
+ <div class="grid grid-cols-[20px_1fr_100px_45px] items-center gap-3">
265
+ <span class="text-on-surface-variant text-xs tabular-nums font-medium">3</span>
266
+ <span class="text-on-surface text-sm font-medium">Gemini 3 Pro</span>
267
+ <div class="h-1.5 w-full bg-infinite-soft rounded-full overflow-hidden">
268
+ <div class="h-full fill-infinite rounded-full" style="width: 83%;"></div>
269
+ </div>
270
+ <span class="text-infinite-blue text-sm font-bold text-right tabular-nums">31.2</span>
271
+ </div>
272
+ <!-- Runner 4 -->
273
+ <div class="grid grid-cols-[20px_1fr_100px_45px] items-center gap-3">
274
+ <span class="text-on-surface-variant text-xs tabular-nums font-medium">4</span>
275
+ <span class="text-on-surface text-sm font-medium">Claude Sonnet 4.6</span>
276
+ <div class="h-1.5 w-full bg-infinite-soft rounded-full overflow-hidden">
277
+ <div class="h-full fill-infinite rounded-full" style="width: 76%;"></div>
278
+ </div>
279
+ <span class="text-infinite-blue text-sm font-bold text-right tabular-nums">28.6</span>
280
+ </div>
281
+ </div>
282
+ <div class="mt-8 pt-6 border-t border-border-subtle">
283
+ <a class="text-infinite-blue font-bold text-sm hover:text-wasabi-green transition-colors flex items-center gap-2 group" href="#">
284
+ View full EOG leaderboard
285
+ <span class="material-symbols-outlined text-sm transition-transform group-hover:translate-x-1">arrow_forward</span>
286
+ </a>
287
+ </div>
288
+ </div>
289
+ <!-- EVA-Bench -->
290
+ <div class="bg-white border border-border-subtle rounded-2xl p-8 card-shadow border-l-[4px] accent-indigo">
291
+ <div class="flex items-center gap-3 mb-8">
292
+ <span class="w-3 h-3 rounded-full fill-indigo"></span>
293
+ <h3 class="text-infinite-blue font-bold text-2xl tracking-tight">EVA-Bench</h3>
294
+ <span class="text-on-surface-variant text-xs font-medium bg-surface-muted px-2 py-0.5 rounded">voice agents · accuracy and experience</span>
295
+ </div>
296
+ <div class="space-y-10">
297
+ <!-- Accuracy Split -->
298
+ <div>
299
+ <div class="flex justify-between items-baseline mb-3">
300
+ <span class="font-mono text-[10px] text-bright-indigo uppercase tracking-[0.15em] font-bold">Accuracy</span>
301
+ <span class="font-mono text-[10px] text-on-surface-variant uppercase tracking-wider">EVA-A · PASS@3</span>
302
+ </div>
303
+ <div class="bg-[#f2f0ff] border-l-4 border-bright-indigo rounded-lg p-3 flex justify-between items-center mb-4">
304
+ <div>
305
+ <div class="text-infinite-blue font-bold text-base leading-tight">Nova + GPT-5.4 + Sonic</div>
306
+ <div class="text-on-surface-variant text-[11px] font-medium">cascade · mixed</div>
307
+ </div>
308
+ <span class="text-infinite-blue font-bold text-2xl tabular-nums">0.41</span>
309
+ </div>
310
+ <div class="space-y-3">
311
+ <div class="grid grid-cols-[18px_1fr_80px_35px] items-center gap-2 text-xs">
312
+ <span class="text-on-surface-variant tabular-nums font-medium">2</span>
313
+ <span class="text-on-surface font-medium truncate">Claude Opus 4.5</span>
314
+ <div class="h-1 w-full bg-indigo-soft rounded-full overflow-hidden">
315
+ <div class="h-full fill-indigo rounded-full" style="width: 78%;"></div>
316
+ </div>
317
+ <span class="text-infinite-blue font-bold text-right tabular-nums">0.32</span>
318
+ </div>
319
+ <div class="grid grid-cols-[18px_1fr_80px_35px] items-center gap-2 text-xs">
320
+ <span class="text-on-surface-variant tabular-nums font-medium">3</span>
321
+ <span class="text-on-surface font-medium truncate">Scribe+Gemini-3-Flash</span>
322
+ <div class="h-1 w-full bg-indigo-soft rounded-full overflow-hidden">
323
+ <div class="h-full fill-indigo rounded-full" style="width: 76%;"></div>
324
+ </div>
325
+ <span class="text-infinite-blue font-bold text-right tabular-nums">0.31</span>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ <!-- Experience Split -->
330
+ <div class="pt-8 border-t border-dashed border-border-subtle">
331
+ <div class="flex justify-between items-baseline mb-3">
332
+ <span class="font-mono text-[10px] text-bright-blue uppercase tracking-[0.15em] font-bold">Experience</span>
333
+ <span class="font-mono text-[10px] text-on-surface-variant uppercase tracking-wider">EVA-X · PASS@3</span>
334
+ </div>
335
+ <div class="bg-[#f0f9ff] border-l-4 border-bright-blue rounded-lg p-3 flex justify-between items-center mb-4">
336
+ <div>
337
+ <div class="text-infinite-blue font-bold text-base leading-tight">Gemini Live</div>
338
+ <div class="text-on-surface-variant text-[11px] font-medium">Google · S2S</div>
339
+ </div>
340
+ <span class="text-infinite-blue font-bold text-2xl tabular-nums">0.49</span>
341
+ </div>
342
+ <div class="space-y-3">
343
+ <div class="grid grid-cols-[18px_1fr_80px_35px] items-center gap-2 text-xs">
344
+ <span class="text-on-surface-variant tabular-nums font-medium">2</span>
345
+ <span class="text-on-surface font-medium truncate">GPT-Realtime</span>
346
+ <div class="h-1 w-full bg-blue-soft rounded-full overflow-hidden">
347
+ <div class="h-full fill-blue rounded-full" style="width: 96%;"></div>
348
+ </div>
349
+ <span class="text-infinite-blue font-bold text-right tabular-nums">0.47</span>
350
+ </div>
351
+ <div class="grid grid-cols-[18px_1fr_80px_35px] items-center gap-2 text-xs">
352
+ <span class="text-on-surface-variant tabular-nums font-medium">3</span>
353
+ <span class="text-on-surface font-medium truncate">Whisper+Qwen 3.5</span>
354
+ <div class="h-1 w-full bg-blue-soft rounded-full overflow-hidden">
355
+ <div class="h-full fill-blue rounded-full" style="width: 88%;"></div>
356
+ </div>
357
+ <span class="text-infinite-blue font-bold text-right tabular-nums">0.43</span>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ <div class="mt-8 pt-6 border-t border-border-subtle">
363
+ <a class="text-infinite-blue font-bold text-sm hover:text-wasabi-green transition-colors flex items-center gap-2 group" href="#">
364
+ View full EVA leaderboard
365
+ <span class="material-symbols-outlined text-sm transition-transform group-hover:translate-x-1">arrow_forward</span>
366
+ </a>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ <!-- Footer -->
371
+ <footer class="mt-24 pt-8 border-t border-border-subtle text-center">
372
+ <p class="text-on-surface-variant text-[11px] font-light uppercase tracking-widest">
373
+ © 2026 ServiceNow, Inc. All rights reserved.
374
+ </p>
375
+ </footer>
376
+ </div>
377
+ </body></html>
mockups/v0_reskin/nowai_bench_icon_svg/code.html ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" aria-label="NOWAI-Bench Icon">
2
+ <rect x="0" y="0" width="5" height="5" rx="0.6" fill="#032D42"/>
3
+ <rect x="6.5" y="0" width="5" height="5" rx="0.6" fill="#032D42"/>
4
+ <rect x="13" y="0" width="5" height="5" rx="0.6" fill="#63DF4E"/>
5
+ <rect x="0" y="6.5" width="5" height="5" rx="0.6" fill="#032D42"/>
6
+ <rect x="6.5" y="6.5" width="5" height="5" rx="0.6" fill="#032D42"/>
7
+ <rect x="13" y="6.5" width="5" height="5" rx="0.6" fill="#032D42"/>
8
+ <rect x="0" y="13" width="5" height="5" rx="0.6" fill="#032D42"/>
9
+ <rect x="6.5" y="13" width="5" height="5" rx="0.6" fill="#032D42"/>
10
+ <rect x="13" y="13" width="5" height="5" rx="0.6" fill="#032D42"/>
11
+ </svg>
mockups/v0_reskin/nowai_bench_refined_pulse_animation/code.html ADDED
@@ -0,0 +1,377 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head>
4
+ <meta charset="utf-8"/>
5
+ <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
6
+ <title>NOWAI-Bench | Enterprise AI Benchmarking</title>
7
+ <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&amp;family=JetBrains+Mono:wght@400;500&amp;display=swap" rel="stylesheet"/>
9
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
10
+ <script id="tailwind-config">
11
+ tailwind.config = {
12
+ darkMode: "class",
13
+ theme: {
14
+ extend: {
15
+ "colors": {
16
+ "surface-muted": "#F4F7F9",
17
+ "tertiary-container": "#402302",
18
+ "error": "#ba1a1a",
19
+ "surface": "#faf9fb",
20
+ "surface-container-highest": "#e3e2e4",
21
+ "on-tertiary-fixed-variant": "#623f1b",
22
+ "error-container": "#ffdad6",
23
+ "surface-dim": "#dadadc",
24
+ "secondary": "#056e00",
25
+ "surface-container-high": "#e8e8ea",
26
+ "border-subtle": "#E1E8ED",
27
+ "secondary-container": "#80fe68",
28
+ "on-tertiary": "#ffffff",
29
+ "surface-tint": "#406279",
30
+ "on-primary-fixed-variant": "#284a61",
31
+ "inverse-primary": "#a8cbe6",
32
+ "infinite-blue": "#032D42",
33
+ "background": "#faf9fb",
34
+ "tertiary-fixed": "#ffdcbe",
35
+ "on-secondary": "#ffffff",
36
+ "tertiary-fixed-dim": "#efbd8e",
37
+ "surface-variant": "#e3e2e4",
38
+ "on-background": "#1a1c1d",
39
+ "surface-container": "#eeedef",
40
+ "primary-container": "#032d42",
41
+ "primary": "#001725",
42
+ "outline": "#72787d",
43
+ "surface-container-lowest": "#ffffff",
44
+ "surface-bright": "#faf9fb",
45
+ "tertiary": "#241100",
46
+ "secondary-fixed-dim": "#64e04f",
47
+ "wasabi-green": "#63DF4E",
48
+ "on-tertiary-fixed": "#2d1600",
49
+ "on-secondary-container": "#057500",
50
+ "outline-variant": "#c2c7cd",
51
+ "on-error": "#ffffff",
52
+ "on-error-container": "#93000a",
53
+ "on-surface": "#1a1c1d",
54
+ "data-neutral": "#64748B",
55
+ "on-primary": "#ffffff",
56
+ "on-secondary-fixed-variant": "#035300",
57
+ "on-tertiary-container": "#b5885d",
58
+ "primary-fixed-dim": "#a8cbe6",
59
+ "on-secondary-fixed": "#012200",
60
+ "on-primary-fixed": "#001e2e",
61
+ "on-primary-container": "#7395ae",
62
+ "surface-container-low": "#f4f3f5",
63
+ "secondary-fixed": "#80fe68",
64
+ "inverse-on-surface": "#f1f0f2",
65
+ "inverse-surface": "#2f3032",
66
+ "primary-fixed": "#c8e6ff",
67
+ "on-surface-variant": "#42474c",
68
+ "bright-blue": "#52B8FF",
69
+ "bright-indigo": "#7661FF"
70
+ },
71
+ "borderRadius": {
72
+ "DEFAULT": "0.125rem",
73
+ "lg": "0.25rem",
74
+ "xl": "0.5rem",
75
+ "full": "0.75rem"
76
+ }
77
+ },
78
+ fontFamily: {
79
+ 'sans': ['ServiceNow Sans', 'Hanken Grotesk', 'sans-serif'],
80
+ 'mono': ['ServiceNow Sans Mono', 'JetBrains Mono', 'monospace'],
81
+ }
82
+ },
83
+ }
84
+ </script>
85
+ <style>
86
+ @font-face {
87
+ font-family: 'ServiceNow Sans';
88
+ src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Light.woff2') format('woff2');
89
+ font-weight: 300; font-style: normal; font-display: swap;
90
+ }
91
+ @font-face {
92
+ font-family: 'ServiceNow Sans';
93
+ src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Regular.woff2') format('woff2');
94
+ font-weight: 400; font-style: normal; font-display: swap;
95
+ }
96
+ @font-face {
97
+ font-family: 'ServiceNow Sans';
98
+ src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Medium.woff2') format('woff2');
99
+ font-weight: 500; font-style: normal; font-display: swap;
100
+ }
101
+ @font-face {
102
+ font-family: 'ServiceNow Sans';
103
+ src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Bold.woff2') format('woff2');
104
+ font-weight: 700; font-style: normal; font-display: swap;
105
+ }
106
+ @font-face {
107
+ font-family: 'ServiceNow Sans Mono';
108
+ src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSansMono-Regular.woff2') format('woff2');
109
+ font-weight: 400; font-style: normal; font-display: swap;
110
+ }
111
+
112
+ body {
113
+ background-color: #faf9fb;
114
+ color: #1a1c1d;
115
+ -webkit-font-smoothing: antialiased;
116
+ }
117
+
118
+ .accent-indigo { border-left-color: #7661FF; }
119
+ .accent-blue { border-left-color: #52B8FF; }
120
+ .accent-infinite { border-left-color: #032D42; }
121
+
122
+ .bg-indigo-soft { background-color: rgba(118, 97, 255, 0.1); }
123
+ .bg-blue-soft { background-color: rgba(82, 184, 255, 0.1); }
124
+ .bg-infinite-soft { background-color: rgba(3, 45, 66, 0.05); }
125
+
126
+ .fill-indigo { background-color: #7661FF; }
127
+ .fill-blue { background-color: #52B8FF; }
128
+ .fill-infinite { background-color: #032D42; }
129
+
130
+ .card-shadow {
131
+ box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.02);
132
+ transition: box-shadow 0.25s ease, transform 0.2s ease;
133
+ }
134
+ .card-shadow:hover {
135
+ box-shadow: 0 10px 15px -3px rgba(3, 45, 66, 0.08), 0 4px 6px -2px rgba(3, 45, 66, 0.04);
136
+ }
137
+
138
+ /* Watermark pixelated wave animation */
139
+ @keyframes pixel-wave {
140
+ 0%, 100% { opacity: 0.6; }
141
+ 50% { opacity: 1; }
142
+ }
143
+ .wave-1 { animation: pixel-wave 5.2s infinite ease-in-out; animation-delay: 0s; }
144
+ .wave-2 { animation: pixel-wave 5.2s infinite ease-in-out; animation-delay: 0.52s; }
145
+ .wave-3 { animation: pixel-wave 5.2s infinite ease-in-out; animation-delay: 1.04s; }
146
+ .wave-4 { animation: pixel-wave 5.2s infinite ease-in-out; animation-delay: 1.56s; }
147
+ .wave-5 { animation: pixel-wave 5.2s infinite ease-in-out; animation-delay: 2.08s; }
148
+
149
+ .watermark-container {
150
+ mask-image: linear-gradient(to bottom right, black 20%, transparent 80%);
151
+ -webkit-mask-image: linear-gradient(to bottom right, black 20%, transparent 80%);
152
+ }
153
+
154
+ @media (prefers-reduced-motion: reduce) {
155
+ .wave-1, .wave-2, .wave-3, .wave-4, .wave-5 {
156
+ animation: none;
157
+ opacity: 1;
158
+ }
159
+ }
160
+ </style>
161
+ </head>
162
+ <body class="font-sans">
163
+ <div class="fixed top-0 right-0 -z-10 pointer-events-none opacity-[0.07] overflow-hidden w-[800px] h-[960px] watermark-container" style="transform: translate(25%, -10%) rotate(-15deg) scale(0.8);">
164
+ <svg class="w-full h-full" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
165
+ <rect class="wave-1" fill="#032D42" height="22" rx="3" width="22" x="10" y="10"></rect>
166
+ <rect class="wave-2" fill="#7661FF" height="22" rx="3" width="22" x="39" y="10"></rect>
167
+ <rect class="wave-3" fill="#63DF4E" height="22" rx="3" width="22" x="68" y="10"></rect>
168
+ <rect class="wave-2" fill="#52B8FF" height="22" rx="3" width="22" x="10" y="39"></rect>
169
+ <rect class="wave-3" fill="#032D42" fill-opacity="0.6" height="22" rx="3" width="22" x="39" y="39"></rect>
170
+ <rect class="wave-4" fill="#032D42" height="22" rx="3" width="22" x="68" y="39"></rect>
171
+ <rect class="wave-3" fill="#63DF4E" fill-opacity="0.4" height="22" rx="3" width="22" x="10" y="68"></rect>
172
+ <rect class="wave-4" fill="#7661FF" fill-opacity="0.8" height="22" rx="3" width="22" x="39" y="68"></rect>
173
+ <rect class="wave-5" fill="#032D42" height="22" rx="3" width="22" x="68" y="68"></rect>
174
+ </svg>
175
+ </div>
176
+ <div class="max-w-[1280px] mx-auto px-6 md:px-8 pb-16">
177
+ <!-- Top navigation -->
178
+ <nav class="flex items-center justify-between py-6 border-b border-border-subtle mb-10">
179
+ <div class="flex items-center gap-4">
180
+ <span class="flex items-center">
181
+ <svg aria-label="ServiceNow" height="20" viewbox="0 0 132 20" width="132" xmlns="http://www.w3.org/2000/svg"><path d="M32.022,6.391a5.626,5.626,0,0,0-3.61,1.3V6.523H25.119V19.35h3.425v-8.2a4.073,4.073,0,0,1,3.109-1.588,3.494,3.494,0,0,1,1.374.206V6.479a5.851,5.851,0,0,0-1.005-.088" fill="#032D42" fill-rule="evenodd"></path><path d="M2.16,15.436a5.369,5.369,0,0,0,3.5,1.269c.922,0,1.633-.45,1.633-1.084,0-1.931-6.191-1.243-6.191-5.369,0-2.459,2.371-3.993,4.9-3.993a7.9,7.9,0,0,1,4.32,1.3L8.72,10.04a4.3,4.3,0,0,0-2.45-.872c-.948,0-1.739.37-1.739,1.031,0,1.666,6.192,1.005,6.192,5.448,0,2.46-2.4,3.967-5.085,3.967A8.815,8.815,0,0,1,.5,17.9Z" fill="#032D42" fill-rule="evenodd"></path><path d="M23.657,12.817c0-3.57-2.5-6.558-6.034-6.558-3.794,0-6.218,3.12-6.218,6.691A6.4,6.4,0,0,0,18.1,19.614a6.919,6.919,0,0,0,5.243-2.3l-1.95-1.957a4.515,4.515,0,0,1-3.214,1.481A3.36,3.36,0,0,1,14.725,13.8h8.853A5.735,5.735,0,0,0,23.657,12.817Zm-8.774-1.533a2.775,2.775,0,0,1,2.74-2.248,2.552,2.552,0,0,1,2.53,2.248Z" fill="#032D42" fill-rule="evenodd"></path><polygon fill="#032D42" fill-rule="evenodd" points="41.19 14.351 44.694 6.523 48.252 6.523 42.376 19.35 40.005 19.35 34.129 6.523 37.686 6.523 41.19 14.351"></polygon><path d="M51.128.5A2.2,2.2,0,1,1,48.888,2.7,2.2,2.2,0,0,1,51.128.5" fill="#032D42" fill-rule="evenodd"></path><rect fill="#032D42" height="12.827" width="3.425" x="49.415" y="6.523"></rect><path d="M67,16.731a6.766,6.766,0,0,1-5.8,2.883,6.68,6.68,0,1,1,.026-13.355,6.808,6.808,0,0,1,5.375,2.565l-2.424,2.142a3.7,3.7,0,0,0-2.951-1.534A3.433,3.433,0,0,0,57.78,12.95a3.383,3.383,0,0,0,3.531,3.49,3.741,3.741,0,0,0,3.056-1.692Z" fill="#032D42" fill-rule="evenodd"></path><path d="M79.442,17.313a6.918,6.918,0,0,1-5.243,2.3,6.4,6.4,0,0,1-6.692-6.664c0-3.571,2.424-6.691,6.218-6.691,3.53,0,6.033,2.988,6.033,6.558a5.635,5.635,0,0,1-.079.979H70.826a3.36,3.36,0,0,0,3.452,3.041,4.52,4.52,0,0,0,3.215-1.481Zm-3.188-6.029a2.551,2.551,0,0,0-2.529-2.248,2.774,2.774,0,0,0-2.74,2.248Z" fill="#032D42" fill-rule="evenodd"></path><path d="M81.12,19.35V6.523h3.293V7.554a5.625,5.625,0,0,1,3.609-1.295,5.747,5.747,0,0,1,4.427,2.063,6.482,6.482,0,0,1,1.317,4.5V19.35H90.341v-6.8a3.11,3.11,0,0,0-.764-2.407,2.69,2.69,0,0,0-1.923-.714,4.076,4.076,0,0,0-3.109,1.587V19.35Z" fill="#032D42"></path><path d="M102.586,6.259A7.5,7.5,0,0,0,97.419,19.21a1.481,1.481,0,0,0,1.926.1,5.355,5.355,0,0,1,6.394,0,1.485,1.485,0,0,0,1.937-.113,7.5,7.5,0,0,0-5.09-12.94M102.542,17.5a3.637,3.637,0,0,1-3.734-3.733,3.734,3.734,0,1,1,7.468,0,3.637,3.637,0,0,1-3.734,3.733" fill="#62d84e" fill-rule="evenodd"></path><polygon fill="#032D42" fill-rule="evenodd" points="116.788 19.35 114.237 19.35 109.15 6.523 112.57 6.523 115.359 13.853 118.094 6.523 120.952 6.523 123.662 13.853 126.475 6.523 129.896 6.523 124.809 19.35 122.258 19.35 119.523 12.046 116.788 19.35"></polygon><path d="M129.935,17.9h-.289v.543H129.4V16.957h.6a.476.476,0,0,1,.478.478.469.469,0,0,1-.295.432l.338.579h-.268Zm-.289-.219H130a.249.249,0,0,0,0-.5h-.351Z" fill="#032D42"></path><path d="M129.9,16.348a1.379,1.379,0,1,1-1.378,1.379,1.381,1.381,0,0,1,1.378-1.379m0-.218a1.6,1.6,0,1,0,1.6,1.6,1.6,1.6,0,0,0-1.6-1.6Z" fill="#032D42"></path></svg>
182
+ </span>
183
+ <span class="w-[1px] h-6 bg-border-subtle"></span>
184
+ <span class="flex items-center gap-2">
185
+ <img alt="NOWAI-Bench Logo" class="w-6 h-6" src="https://lh3.googleusercontent.com/aida/ADBb0ugX8rLuebujbgFwPah4hVjMpkYXC7fxt2EG6mDh5UnhRZ3Zx4w3OdWdvwJDxH-YifBtHyrqAusEc4qEeb1ypNrUU3OJ5sEg9N6ObPaqQOkd493OPVRITyMTYDtz_5mynOn1Ddfm6rjVVdf60dBpiH9bGjja_iJkgiaqm2qNnbaBTlBy_WMT0eca1EFYkfNlcV9M24R9SucEJ3U-WurZrjXbqPmw_89q3Nr0K2YUSk7ZHoPa1NqhPyOZ7R4"/>
186
+ <span class="text-infinite-blue font-bold tracking-tight text-[15px]">NOWAI-Bench</span>
187
+ </span>
188
+ </div>
189
+ </nav>
190
+ <!-- Hero section -->
191
+ <header class="mb-12">
192
+ <h1 class="text-infinite-blue font-bold text-5xl md:text-6xl tracking-tighter mb-4 leading-none">NOWAI-Bench</h1>
193
+ <p class="text-on-surface-variant text-lg md:text-xl font-light max-w-2xl">An open benchmarking suite for enterprise AI agents.</p>
194
+ </header>
195
+ <!-- Compact stat strip -->
196
+ <div class="grid grid-cols-2 sm:flex sm:gap-16 py-8 border-y border-border-subtle mb-16">
197
+ <div>
198
+ <div class="text-infinite-blue font-bold text-4xl tabular-nums leading-none">2</div>
199
+ <div class="font-mono text-[11px] text-on-surface-variant uppercase tracking-[0.12em] mt-3">Benchmarks</div>
200
+ </div>
201
+ <div>
202
+ <div class="text-infinite-blue font-bold text-4xl tabular-nums leading-none flex items-baseline">
203
+ 2026<span class="text-on-surface-variant text-base font-medium ml-1">Q2</span>
204
+ </div>
205
+ <div class="font-mono text-[11px] text-on-surface-variant uppercase tracking-[0.12em] mt-3">Last updated</div>
206
+ </div>
207
+ </div>
208
+ <!-- Overview section -->
209
+ <section class="mb-20">
210
+ <h2 class="text-infinite-blue font-bold text-3xl tracking-tight mb-2">Overview</h2>
211
+ <p class="text-on-surface-variant font-light text-[15px] mb-8">An open benchmarking suite for enterprise AI agents.</p>
212
+ <div class="prose max-w-3xl">
213
+ <p class="text-infinite-blue text-[16px] leading-[1.7] mb-5">
214
+ NOWAI-Bench is a coordinated, multi-benchmark effort by ServiceNow to measure whether AI agents perform reliably across the workflows, modalities, and governance demands of real enterprises. Rather than a single test, it is an expanding portfolio of benchmarks—each targeting a distinct slice of what enterprise agents are asked to do.
215
+ </p>
216
+ <p class="text-infinite-blue text-[16px] leading-[1.7] mb-5">
217
+ The current release covers two slices: <strong class="font-bold">EnterpriseOps-Gym</strong> evaluates long-horizon task agents across eight enterprise domains, and <strong class="font-bold">EVA-Bench</strong> evaluates voice agents on both task accuracy and conversational experience. Together they span text-based multi-step workflow execution and governed voice interaction—two of the most common deployment patterns for enterprise agents today.
218
+ </p>
219
+ <p class="text-infinite-blue text-[16px] leading-[1.7]">
220
+ This document describes the currently released benchmarks and how to read their results. It is intended to stay live: as new benchmarks land, the README is updated to reflect them.
221
+ </p>
222
+ </div>
223
+ </section>
224
+ <!-- Capability leaders header -->
225
+ <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-8">
226
+ <div>
227
+ <h2 class="text-infinite-blue font-bold text-3xl tracking-tight mb-2">Benchmark cards</h2>
228
+ <p class="text-on-surface-variant font-light text-[15px]">A high-level overview of each NOWAI-Bench benchmark.</p>
229
+ </div>
230
+ <div class="md:text-right">
231
+ <span class="inline-block bg-infinite-blue text-white font-mono text-[11px] px-3 py-1.5 rounded uppercase tracking-wider mb-2">v1.0</span>
232
+ <p class="text-on-surface-variant text-xs font-light max-w-[260px] leading-relaxed">Radar view planned for v1.1 once benchmarks expose named capability sub-axes.</p>
233
+ </div>
234
+ </div>
235
+ <!-- Benchmark cards -->
236
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
237
+ <!-- EnterpriseOps-Gym -->
238
+ <div class="bg-white border border-border-subtle rounded-2xl p-8 card-shadow border-l-[4px] accent-infinite">
239
+ <div class="flex items-center gap-3 mb-8">
240
+ <span class="w-3 h-3 rounded-full fill-infinite"></span>
241
+ <h3 class="text-infinite-blue font-bold text-2xl tracking-tight">EnterpriseOps-Gym</h3>
242
+ <span class="text-on-surface-variant text-xs font-medium bg-surface-muted px-2 py-0.5 rounded">long-horizon task agents</span>
243
+ </div>
244
+ <div class="mb-6">
245
+ <div class="font-mono text-[10px] text-on-surface-variant uppercase tracking-[0.15em] mb-2">Top model</div>
246
+ <div class="text-infinite-blue font-bold text-xl leading-tight">Claude Opus 4.5</div>
247
+ <div class="text-on-surface-variant text-sm font-medium">Anthropic · cascade</div>
248
+ </div>
249
+ <div class="bg-[#f0f9f3] border-l-4 border-wasabi-green rounded-xl p-4 flex items-baseline gap-3 mb-8">
250
+ <span class="text-infinite-blue font-bold text-3xl tabular-nums leading-none">37.4<span class="text-on-surface-variant text-lg font-medium ml-0.5">%</span></span>
251
+ <span class="font-mono text-[10px] text-on-surface-variant uppercase tracking-wider font-medium">Success rate · Oracle mode</span>
252
+ </div>
253
+ <div class="space-y-4">
254
+ <!-- Runner 2 -->
255
+ <div class="grid grid-cols-[20px_1fr_100px_45px] items-center gap-3">
256
+ <span class="text-on-surface-variant text-xs tabular-nums font-medium">2</span>
257
+ <span class="text-on-surface text-sm font-medium">GPT-5.4</span>
258
+ <div class="h-1.5 w-full bg-infinite-soft rounded-full overflow-hidden">
259
+ <div class="h-full fill-infinite rounded-full" style="width: 93%;"></div>
260
+ </div>
261
+ <span class="text-infinite-blue text-sm font-bold text-right tabular-nums">34.8</span>
262
+ </div>
263
+ <!-- Runner 3 -->
264
+ <div class="grid grid-cols-[20px_1fr_100px_45px] items-center gap-3">
265
+ <span class="text-on-surface-variant text-xs tabular-nums font-medium">3</span>
266
+ <span class="text-on-surface text-sm font-medium">Gemini 3 Pro</span>
267
+ <div class="h-1.5 w-full bg-infinite-soft rounded-full overflow-hidden">
268
+ <div class="h-full fill-infinite rounded-full" style="width: 83%;"></div>
269
+ </div>
270
+ <span class="text-infinite-blue text-sm font-bold text-right tabular-nums">31.2</span>
271
+ </div>
272
+ <!-- Runner 4 -->
273
+ <div class="grid grid-cols-[20px_1fr_100px_45px] items-center gap-3">
274
+ <span class="text-on-surface-variant text-xs tabular-nums font-medium">4</span>
275
+ <span class="text-on-surface text-sm font-medium">Claude Sonnet 4.6</span>
276
+ <div class="h-1.5 w-full bg-infinite-soft rounded-full overflow-hidden">
277
+ <div class="h-full fill-infinite rounded-full" style="width: 76%;"></div>
278
+ </div>
279
+ <span class="text-infinite-blue text-sm font-bold text-right tabular-nums">28.6</span>
280
+ </div>
281
+ </div>
282
+ <div class="mt-8 pt-6 border-t border-border-subtle">
283
+ <a class="text-infinite-blue font-bold text-sm hover:text-wasabi-green transition-colors flex items-center gap-2 group" href="#">
284
+ View full EOG leaderboard
285
+ <span class="material-symbols-outlined text-sm transition-transform group-hover:translate-x-1">arrow_forward</span>
286
+ </a>
287
+ </div>
288
+ </div>
289
+ <!-- EVA-Bench -->
290
+ <div class="bg-white border border-border-subtle rounded-2xl p-8 card-shadow border-l-[4px] accent-indigo">
291
+ <div class="flex items-center gap-3 mb-8">
292
+ <span class="w-3 h-3 rounded-full fill-indigo"></span>
293
+ <h3 class="text-infinite-blue font-bold text-2xl tracking-tight">EVA-Bench</h3>
294
+ <span class="text-on-surface-variant text-xs font-medium bg-surface-muted px-2 py-0.5 rounded">voice agents · accuracy and experience</span>
295
+ </div>
296
+ <div class="space-y-10">
297
+ <!-- Accuracy Split -->
298
+ <div>
299
+ <div class="flex justify-between items-baseline mb-3">
300
+ <span class="font-mono text-[10px] text-bright-indigo uppercase tracking-[0.15em] font-bold">Accuracy</span>
301
+ <span class="font-mono text-[10px] text-on-surface-variant uppercase tracking-wider">EVA-A · PASS@3</span>
302
+ </div>
303
+ <div class="bg-[#f2f0ff] border-l-4 border-bright-indigo rounded-lg p-3 flex justify-between items-center mb-4">
304
+ <div>
305
+ <div class="text-infinite-blue font-bold text-base leading-tight">Nova + GPT-5.4 + Sonic</div>
306
+ <div class="text-on-surface-variant text-[11px] font-medium">cascade · mixed</div>
307
+ </div>
308
+ <span class="text-infinite-blue font-bold text-2xl tabular-nums">0.41</span>
309
+ </div>
310
+ <div class="space-y-3">
311
+ <div class="grid grid-cols-[18px_1fr_80px_35px] items-center gap-2 text-xs">
312
+ <span class="text-on-surface-variant tabular-nums font-medium">2</span>
313
+ <span class="text-on-surface font-medium truncate">Claude Opus 4.5</span>
314
+ <div class="h-1 w-full bg-indigo-soft rounded-full overflow-hidden">
315
+ <div class="h-full fill-indigo rounded-full" style="width: 78%;"></div>
316
+ </div>
317
+ <span class="text-infinite-blue font-bold text-right tabular-nums">0.32</span>
318
+ </div>
319
+ <div class="grid grid-cols-[18px_1fr_80px_35px] items-center gap-2 text-xs">
320
+ <span class="text-on-surface-variant tabular-nums font-medium">3</span>
321
+ <span class="text-on-surface font-medium truncate">Scribe+Gemini-3-Flash</span>
322
+ <div class="h-1 w-full bg-indigo-soft rounded-full overflow-hidden">
323
+ <div class="h-full fill-indigo rounded-full" style="width: 76%;"></div>
324
+ </div>
325
+ <span class="text-infinite-blue font-bold text-right tabular-nums">0.31</span>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ <!-- Experience Split -->
330
+ <div class="pt-8 border-t border-dashed border-border-subtle">
331
+ <div class="flex justify-between items-baseline mb-3">
332
+ <span class="font-mono text-[10px] text-bright-blue uppercase tracking-[0.15em] font-bold">Experience</span>
333
+ <span class="font-mono text-[10px] text-on-surface-variant uppercase tracking-wider">EVA-X · PASS@3</span>
334
+ </div>
335
+ <div class="bg-[#f0f9ff] border-l-4 border-bright-blue rounded-lg p-3 flex justify-between items-center mb-4">
336
+ <div>
337
+ <div class="text-infinite-blue font-bold text-base leading-tight">Gemini Live</div>
338
+ <div class="text-on-surface-variant text-[11px] font-medium">Google · S2S</div>
339
+ </div>
340
+ <span class="text-infinite-blue font-bold text-2xl tabular-nums">0.49</span>
341
+ </div>
342
+ <div class="space-y-3">
343
+ <div class="grid grid-cols-[18px_1fr_80px_35px] items-center gap-2 text-xs">
344
+ <span class="text-on-surface-variant tabular-nums font-medium">2</span>
345
+ <span class="text-on-surface font-medium truncate">GPT-Realtime</span>
346
+ <div class="h-1 w-full bg-blue-soft rounded-full overflow-hidden">
347
+ <div class="h-full fill-blue rounded-full" style="width: 96%;"></div>
348
+ </div>
349
+ <span class="text-infinite-blue font-bold text-right tabular-nums">0.47</span>
350
+ </div>
351
+ <div class="grid grid-cols-[18px_1fr_80px_35px] items-center gap-2 text-xs">
352
+ <span class="text-on-surface-variant tabular-nums font-medium">3</span>
353
+ <span class="text-on-surface font-medium truncate">Whisper+Qwen 3.5</span>
354
+ <div class="h-1 w-full bg-blue-soft rounded-full overflow-hidden">
355
+ <div class="h-full fill-blue rounded-full" style="width: 88%;"></div>
356
+ </div>
357
+ <span class="text-infinite-blue font-bold text-right tabular-nums">0.43</span>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ <div class="mt-8 pt-6 border-t border-border-subtle">
363
+ <a class="text-infinite-blue font-bold text-sm hover:text-wasabi-green transition-colors flex items-center gap-2 group" href="#">
364
+ View full EVA leaderboard
365
+ <span class="material-symbols-outlined text-sm transition-transform group-hover:translate-x-1">arrow_forward</span>
366
+ </a>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ <!-- Footer -->
371
+ <footer class="mt-24 pt-8 border-t border-border-subtle text-center">
372
+ <p class="text-on-surface-variant text-[11px] font-light uppercase tracking-widest">
373
+ © 2026 ServiceNow, Inc. All rights reserved.
374
+ </p>
375
+ </footer>
376
+ </div>
377
+ </body></html>
mockups/v0_reskin/nowai_bench_style_guide.md ADDED
@@ -0,0 +1,31 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # NOWAI-Bench Style Guide
2
+
3
+ ## Brand Vision
4
+ A precision-engineered, data-centric aesthetic designed for enterprise AI benchmarking. The visual language balances ServiceNow's corporate authority with a "tech-forward" data scientist appeal.
5
+
6
+ ## Color Palette
7
+
8
+ ### Primary Brand
9
+ - **Infinite Blue**: `#032D42` (Primary Text, Brand Marks)
10
+ - **Wasabi Green**: `#63DF4E` (Success Metrics, Accent Callouts)
11
+
12
+ ### Data Visualization Accents
13
+ - **Bright Indigo**: `#7661FF` (EVA Accuracy Axis)
14
+ - **Bright Blue**: `#52B8FF` (EVA Experience Axis)
15
+
16
+ ### Surfaces & Rules
17
+ - **Background**: `#F9FAFB`
18
+ - **Surface**: `#FFFFFF`
19
+ - **Rule/Border**: `#E5E7EB`
20
+ - **Subtle Rule**: `#D1D5DB`
21
+
22
+ ## Typography
23
+ - **Primary Typeface**: Hanken Grotesk / ServiceNow Sans
24
+ - **Headings**: Bold, tight letter-spacing (-0.02em)
25
+ - **Body**: Regular weight, 14px-15px, generous line height (1.6)
26
+ - **Mono**: ServiceNow Sans Mono (Labels, Stats, Versioning)
27
+
28
+ ## Iconography & Watermarks
29
+ - **The Matrix**: A 3x3 grid system.
30
+ - **Watermark Animation**: Staggered diagonal pulse (30% reduced speed, 50% tighter opacity range) starting from top-left.
31
+ - **Corner Radii**: 16px for cards, 8px for smaller interactive elements.
mockups/v0_reskin/precision_enterprise/DESIGN.md ADDED
@@ -0,0 +1,176 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ name: Precision Enterprise
3
+ colors:
4
+ surface: '#faf9fb'
5
+ surface-dim: '#dadadc'
6
+ surface-bright: '#faf9fb'
7
+ surface-container-lowest: '#ffffff'
8
+ surface-container-low: '#f4f3f5'
9
+ surface-container: '#eeedef'
10
+ surface-container-high: '#e8e8ea'
11
+ surface-container-highest: '#e3e2e4'
12
+ on-surface: '#1a1c1d'
13
+ on-surface-variant: '#42474c'
14
+ inverse-surface: '#2f3032'
15
+ inverse-on-surface: '#f1f0f2'
16
+ outline: '#72787d'
17
+ outline-variant: '#c2c7cd'
18
+ surface-tint: '#406279'
19
+ primary: '#001725'
20
+ on-primary: '#ffffff'
21
+ primary-container: '#032d42'
22
+ on-primary-container: '#7395ae'
23
+ inverse-primary: '#a8cbe6'
24
+ secondary: '#056e00'
25
+ on-secondary: '#ffffff'
26
+ secondary-container: '#80fe68'
27
+ on-secondary-container: '#057500'
28
+ tertiary: '#241100'
29
+ on-tertiary: '#ffffff'
30
+ tertiary-container: '#402302'
31
+ on-tertiary-container: '#b5885d'
32
+ error: '#ba1a1a'
33
+ on-error: '#ffffff'
34
+ error-container: '#ffdad6'
35
+ on-error-container: '#93000a'
36
+ primary-fixed: '#c8e6ff'
37
+ primary-fixed-dim: '#a8cbe6'
38
+ on-primary-fixed: '#001e2e'
39
+ on-primary-fixed-variant: '#284a61'
40
+ secondary-fixed: '#80fe68'
41
+ secondary-fixed-dim: '#64e04f'
42
+ on-secondary-fixed: '#012200'
43
+ on-secondary-fixed-variant: '#035300'
44
+ tertiary-fixed: '#ffdcbe'
45
+ tertiary-fixed-dim: '#efbd8e'
46
+ on-tertiary-fixed: '#2d1600'
47
+ on-tertiary-fixed-variant: '#623f1b'
48
+ background: '#faf9fb'
49
+ on-background: '#1a1c1d'
50
+ surface-variant: '#e3e2e4'
51
+ infinite-blue: '#032D42'
52
+ wasabi-green: '#63DF4E'
53
+ surface-muted: '#F4F7F9'
54
+ border-subtle: '#E1E8ED'
55
+ data-neutral: '#64748B'
56
+ typography:
57
+ headline-lg:
58
+ fontFamily: Hanken Grotesk
59
+ fontSize: 32px
60
+ fontWeight: '700'
61
+ lineHeight: 40px
62
+ letterSpacing: -0.02em
63
+ headline-md:
64
+ fontFamily: Hanken Grotesk
65
+ fontSize: 24px
66
+ fontWeight: '600'
67
+ lineHeight: 32px
68
+ letterSpacing: -0.01em
69
+ headline-sm:
70
+ fontFamily: Hanken Grotesk
71
+ fontSize: 18px
72
+ fontWeight: '600'
73
+ lineHeight: 24px
74
+ body-lg:
75
+ fontFamily: Hanken Grotesk
76
+ fontSize: 16px
77
+ fontWeight: '400'
78
+ lineHeight: 24px
79
+ body-md:
80
+ fontFamily: Hanken Grotesk
81
+ fontSize: 14px
82
+ fontWeight: '400'
83
+ lineHeight: 20px
84
+ body-sm:
85
+ fontFamily: Hanken Grotesk
86
+ fontSize: 12px
87
+ fontWeight: '400'
88
+ lineHeight: 16px
89
+ label-caps:
90
+ fontFamily: Hanken Grotesk
91
+ fontSize: 11px
92
+ fontWeight: '700'
93
+ lineHeight: 16px
94
+ letterSpacing: 0.05em
95
+ data-mono:
96
+ fontFamily: JetBrains Mono
97
+ fontSize: 13px
98
+ fontWeight: '400'
99
+ lineHeight: 18px
100
+ rounded:
101
+ sm: 0.125rem
102
+ DEFAULT: 0.25rem
103
+ md: 0.375rem
104
+ lg: 0.5rem
105
+ xl: 0.75rem
106
+ full: 9999px
107
+ spacing:
108
+ base: 4px
109
+ xs: 4px
110
+ sm: 8px
111
+ md: 16px
112
+ lg: 24px
113
+ xl: 40px
114
+ gutter: 16px
115
+ margin-mobile: 16px
116
+ margin-desktop: 32px
117
+ ---
118
+
119
+ ## Brand & Style
120
+
121
+ The design system is engineered for high-performance enterprise environments, specifically tailored for data scientists and technical stakeholders who require clarity within complexity. The aesthetic is a sophisticated fusion of **Corporate Modernism** and **Technical Minimalism**.
122
+
123
+ The brand personality is authoritative yet accessible, characterized by "Infinite Blue" for deep structural hierarchy and "Wasabi Green" to highlight critical insights and calls to action. We prioritize **high-fidelity data density**—ensuring that information is never sacrificed for whitespace, but rather organized through it. The "eyecandy" is found in the details: precise 1px borders, subtle linear gradients that suggest depth without bulk, and a strict adherence to a technical grid that mirrors the logic of the data it houses.
124
+
125
+ ## Colors
126
+
127
+ The color strategy uses **Infinite Blue** as the foundational anchor for text, navigation, and structural elements, providing a much higher level of contrast and "seriousness" than standard blacks. **Wasabi Green** is used sparingly as a high-visibility accent for progress indicators, primary actions, and status-success states.
128
+
129
+ To support high-density data visualization, the system employs a range of neutral greys and cool blues for background layering. This creates a "tiered" interface where data containers sit subtly above the application surface. Gradients should be used only on primary interactive elements or header backgrounds, moving from a slightly desaturated version of the primary color to its pure hex value.
130
+
131
+ ## Typography
132
+
133
+ This design system utilizes **Hanken Grotesk** to emulate the crisp, geometric precision of a modern enterprise sans-serif. It provides exceptional legibility at small sizes, which is critical for dense data tables and complex dashboards.
134
+
135
+ For technical values, code snippets, and telemetry data, the system switches to **JetBrains Mono**. This monospaced choice signals a "developer-friendly" environment and ensures that numerical data aligns perfectly for easy scanning. Headlines utilize tighter letter-spacing and heavier weights to maintain a strong visual hierarchy against busy content areas.
136
+
137
+ ## Layout & Spacing
138
+
139
+ The layout is built on a **4px baseline grid** to facilitate high-density interfaces. A 12-column fluid grid is used for primary page structures, while internal component spacing relies on a strict 8px incremental system.
140
+
141
+ To appeal to data scientists, we favor a **"Compact" density model**. Margins between data cells are minimized to 8px, while global page margins remain generous at 32px to provide breathing room and prevent visual fatigue. On mobile devices, the layout reflows to a single column with a 16px safety margin, but complex data tables should prioritize horizontal scrolling over stacking to preserve the integrity of the data relationships.
142
+
143
+ ## Elevation & Depth
144
+
145
+ Hierarchy is conveyed through **Low-contrast outlines** and **Tonal layering** rather than heavy shadows. We use 1px borders in `border-subtle` to define most containers.
146
+
147
+ To create "eyecandy" and depth:
148
+ 1. **Level 0 (Base):** The main application canvas uses a clean white or the `surface-muted` tint.
149
+ 2. **Level 1 (Cards/Modules):** White backgrounds with a subtle 1px border. No shadow.
150
+ 3. **Level 2 (Interactive/Focus):** Elements like active input fields or hovered cards receive a very soft, tinted shadow (4px blur, 10% opacity of Infinite Blue) to indicate lift.
151
+ 4. **Level 3 (Modals/Overlays):** These use a backdrop blur (8px) combined with a crisp 1px border to separate the focus area from the underlying data.
152
+
153
+ ## Shapes
154
+
155
+ The design system uses a **Soft (0.25rem / 4px)** roundedness level. This small radius maintains the professional, "engineered" look of the interface while removing the aggressive sharpness of a 0px radius.
156
+
157
+ - **Standard Elements:** 4px radius (Buttons, Input fields, Chips).
158
+ - **Large Containers:** 8px radius (Cards, Modals).
159
+ - **Interactive Pills:** Fully rounded (only used for status badges or tags to differentiate them from functional buttons).
160
+
161
+ ## Components
162
+
163
+ ### Buttons
164
+ Primary buttons utilize an **Infinite Blue to Deep Navy gradient** with white text. Secondary buttons use a transparent background with an Infinite Blue border. The "Wasabi" accent is reserved for "Action Success" or specific "New Project" buttons to draw immediate attention.
165
+
166
+ ### Input Fields
167
+ Fields feature a 1px border and a subtle light-grey fill. Upon focus, the border transitions to Infinite Blue with a 2px "glow" (soft shadow) in Wasabi Green to indicate high-precision focus.
168
+
169
+ ### Data Tables
170
+ Tables are the heart of this system. Use alternating row stripes (Zebra striping) in `surface-muted`. Header cells should use the `label-caps` typography style for maximum distinction from the data rows.
171
+
172
+ ### Chips & Badges
173
+ Small, 4px rounded rectangles. Statuses use Wasabi Green for "Healthy/Active," but always paired with an icon to ensure accessibility for color-blind users.
174
+
175
+ ### Cards
176
+ Cards are flat with a 1px border. The header of the card can optionally include a 2px Wasabi Green top-border to indicate an "active" or "monitored" state.
style.css CHANGED
@@ -1,28 +1,75 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
 
 
 
 
 
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
28
  }
 
1
+ /* ServiceNow Sans — Text weights */
2
+ @font-face {
3
+ font-family: 'ServiceNow Sans';
4
+ src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Light.woff2') format('woff2');
5
+ font-weight: 300; font-style: normal; font-display: swap;
6
+ }
7
+ @font-face {
8
+ font-family: 'ServiceNow Sans';
9
+ src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Regular.woff2') format('woff2');
10
+ font-weight: 400; font-style: normal; font-display: swap;
11
+ }
12
+ @font-face {
13
+ font-family: 'ServiceNow Sans';
14
+ src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Medium.woff2') format('woff2');
15
+ font-weight: 500; font-style: normal; font-display: swap;
16
+ }
17
+ @font-face {
18
+ font-family: 'ServiceNow Sans';
19
+ src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSans-Bold.woff2') format('woff2');
20
+ font-weight: 700; font-style: normal; font-display: swap;
21
+ }
22
+ @font-face {
23
+ font-family: 'ServiceNow Sans Mono';
24
+ src: url('https://www.servicenow.com/etc.clientlibs/ds/clientlibs/clientlib-arc-commons/resources/fonts/ServiceNowSansMono-Regular.woff2') format('woff2');
25
+ font-weight: 400; font-style: normal; font-display: swap;
26
+ }
27
+
28
  body {
29
+ background-color: #faf9fb;
30
+ color: #1a1c1d;
31
+ -webkit-font-smoothing: antialiased;
32
  }
33
 
34
+ .accent-indigo { border-left-color: #7661FF; }
35
+ .accent-blue { border-left-color: #52B8FF; }
36
+ .accent-infinite { border-left-color: #032D42; }
37
+
38
+ .bg-indigo-soft { background-color: rgba(118, 97, 255, 0.1); }
39
+ .bg-blue-soft { background-color: rgba(82, 184, 255, 0.1); }
40
+ .bg-infinite-soft { background-color: rgba(3, 45, 66, 0.05); }
41
+
42
+ .fill-indigo { background-color: #7661FF; }
43
+ .fill-blue { background-color: #52B8FF; }
44
+ .fill-infinite { background-color: #032D42; }
45
+
46
+ .card-shadow {
47
+ box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.02);
48
+ transition: box-shadow 0.25s ease, transform 0.2s ease;
49
+ }
50
+ .card-shadow:hover {
51
+ box-shadow: 0 10px 15px -3px rgba(3, 45, 66, 0.08), 0 4px 6px -2px rgba(3, 45, 66, 0.04);
52
  }
53
 
54
+ /* Watermark pixelated wave animation */
55
+ @keyframes pixel-wave {
56
+ 0%, 100% { opacity: 0.6; }
57
+ 50% { opacity: 1; }
 
58
  }
59
+ .wave-1 { animation: pixel-wave 5.2s infinite ease-in-out; animation-delay: 0s; }
60
+ .wave-2 { animation: pixel-wave 5.2s infinite ease-in-out; animation-delay: 0.52s; }
61
+ .wave-3 { animation: pixel-wave 5.2s infinite ease-in-out; animation-delay: 1.04s; }
62
+ .wave-4 { animation: pixel-wave 5.2s infinite ease-in-out; animation-delay: 1.56s; }
63
+ .wave-5 { animation: pixel-wave 5.2s infinite ease-in-out; animation-delay: 2.08s; }
64
 
65
+ .watermark-container {
66
+ mask-image: linear-gradient(to bottom right, black 20%, transparent 80%);
67
+ -webkit-mask-image: linear-gradient(to bottom right, black 20%, transparent 80%);
 
 
 
68
  }
69
 
70
+ @media (prefers-reduced-motion: reduce) {
71
+ .wave-1, .wave-2, .wave-3, .wave-4, .wave-5 {
72
+ animation: none;
73
+ opacity: 1;
74
+ }
75
  }