From 67f007441d9532118d9a33855cb5e8324d601456 Mon Sep 17 00:00:00 2001 From: Igor Osipov Date: Mon, 12 Oct 2026 18:21:43 +0200 Subject: [PATCH] Update developer docs styles for World ID App --- agents/agent-kit/ecosystem.mdx | 4 +- docs.json | 8 +- icons/ui/antenna-signal.svg | 8 + icons/ui/arrow-right.svg | 3 + icons/ui/book.svg | 8 + icons/ui/building.svg | 9 + icons/ui/check-circle.svg | 4 + icons/ui/check.svg | 3 + icons/ui/clock.svg | 3 + icons/ui/cloud.svg | 4 + icons/ui/code.svg | 5 + icons/ui/community.svg | 8 + icons/ui/copy.svg | 4 + icons/ui/cube.svg | 6 + icons/ui/eye.svg | 3 + icons/ui/flask.svg | 8 + icons/ui/hashtag.svg | 6 + icons/ui/info-circle.svg | 5 + icons/ui/key.svg | 4 + icons/ui/lock.svg | 3 + icons/ui/nav-arrow-right.svg | 3 + icons/ui/refresh-double.svg | 7 + icons/ui/rocket.svg | 8 + icons/ui/search.svg | 3 + icons/ui/shield-check.svg | 5 + icons/ui/shield.svg | 3 + icons/ui/stats-report.svg | 8 + icons/ui/stats.svg | 6 + icons/ui/user.svg | 4 + .../docs/id/design-guidelines/human-badge.svg | 11 + .../docs/id/design-guidelines/partner-app.svg | 14 + .../partnership-world-id.svg | 11 + .../docs/id/design-guidelines/qr-artwork.svg | 231 +++++++ .../id/design-guidelines/world-id-badge.svg | 12 + index.mdx | 44 +- mini-apps/ecosystem/ecosystem.mdx | 6 +- mini-apps/index.mdx | 4 +- mini-apps/more/community-tools-perks.mdx | 12 +- model-context-protocol/index.mdx | 4 +- snippets/credential-hero.jsx | 87 ++- snippets/developer-stories.jsx | 16 +- snippets/feature-blocks.jsx | 53 +- snippets/idkit-preview.jsx | 90 +++ snippets/quickstart.jsx | 97 ++- tailwind.css | 574 ++++++++++++------ world-id/idkit/design-guidelines.mdx | 144 +---- world-id/overview.mdx | 30 +- 47 files changed, 1089 insertions(+), 504 deletions(-) create mode 100644 icons/ui/antenna-signal.svg create mode 100644 icons/ui/arrow-right.svg create mode 100644 icons/ui/book.svg create mode 100644 icons/ui/building.svg create mode 100644 icons/ui/check-circle.svg create mode 100644 icons/ui/check.svg create mode 100644 icons/ui/clock.svg create mode 100644 icons/ui/cloud.svg create mode 100644 icons/ui/code.svg create mode 100644 icons/ui/community.svg create mode 100644 icons/ui/copy.svg create mode 100644 icons/ui/cube.svg create mode 100644 icons/ui/eye.svg create mode 100644 icons/ui/flask.svg create mode 100644 icons/ui/hashtag.svg create mode 100644 icons/ui/info-circle.svg create mode 100644 icons/ui/key.svg create mode 100644 icons/ui/lock.svg create mode 100644 icons/ui/nav-arrow-right.svg create mode 100644 icons/ui/refresh-double.svg create mode 100644 icons/ui/rocket.svg create mode 100644 icons/ui/search.svg create mode 100644 icons/ui/shield-check.svg create mode 100644 icons/ui/shield.svg create mode 100644 icons/ui/stats-report.svg create mode 100644 icons/ui/stats.svg create mode 100644 icons/ui/user.svg create mode 100644 images/docs/id/design-guidelines/human-badge.svg create mode 100644 images/docs/id/design-guidelines/partner-app.svg create mode 100644 images/docs/id/design-guidelines/partnership-world-id.svg create mode 100644 images/docs/id/design-guidelines/qr-artwork.svg create mode 100644 images/docs/id/design-guidelines/world-id-badge.svg create mode 100644 snippets/idkit-preview.jsx diff --git a/agents/agent-kit/ecosystem.mdx b/agents/agent-kit/ecosystem.mdx index f607b8d..d62fff5 100644 --- a/agents/agent-kit/ecosystem.mdx +++ b/agents/agent-kit/ecosystem.mdx @@ -17,14 +17,14 @@ npx skills add worldcoin/agentkit agentkit-x402 Register your agent with World ID to enable human-backed agent benefits. Use `agentkit.fetch` before payment fallback. diff --git a/docs.json b/docs.json index e81233a..438444a 100644 --- a/docs.json +++ b/docs.json @@ -12,21 +12,21 @@ }, "colors": { "primary": "#007CFB", - "light": "#4B5563", - "dark": "#000000" + "light": "#007CFB", + "dark": "#007CFB" }, "fonts": { "heading": { "family": "World Pro MVP", "source": "/fonts/WorldProMVPVF-v2.woff2", "format": "woff2", - "weight": 600 + "weight": 400 }, "body": { "family": "World Pro MVP", "source": "/fonts/WorldProMVPVF-v2.woff2", "format": "woff2", - "weight": 300 + "weight": 350 } }, "favicon": "/favicon.ico", diff --git a/icons/ui/antenna-signal.svg b/icons/ui/antenna-signal.svg new file mode 100644 index 0000000..357a0ed --- /dev/null +++ b/icons/ui/antenna-signal.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/icons/ui/arrow-right.svg b/icons/ui/arrow-right.svg new file mode 100644 index 0000000..380ae86 --- /dev/null +++ b/icons/ui/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/ui/book.svg b/icons/ui/book.svg new file mode 100644 index 0000000..59f201e --- /dev/null +++ b/icons/ui/book.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/icons/ui/building.svg b/icons/ui/building.svg new file mode 100644 index 0000000..3eaacb0 --- /dev/null +++ b/icons/ui/building.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/icons/ui/check-circle.svg b/icons/ui/check-circle.svg new file mode 100644 index 0000000..437a2dd --- /dev/null +++ b/icons/ui/check-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/icons/ui/check.svg b/icons/ui/check.svg new file mode 100644 index 0000000..7145e93 --- /dev/null +++ b/icons/ui/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/ui/clock.svg b/icons/ui/clock.svg new file mode 100644 index 0000000..1e8ef95 --- /dev/null +++ b/icons/ui/clock.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/ui/cloud.svg b/icons/ui/cloud.svg new file mode 100644 index 0000000..48ae32b --- /dev/null +++ b/icons/ui/cloud.svg @@ -0,0 +1,4 @@ + + + + diff --git a/icons/ui/code.svg b/icons/ui/code.svg new file mode 100644 index 0000000..4e866ec --- /dev/null +++ b/icons/ui/code.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/icons/ui/community.svg b/icons/ui/community.svg new file mode 100644 index 0000000..54ce963 --- /dev/null +++ b/icons/ui/community.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/icons/ui/copy.svg b/icons/ui/copy.svg new file mode 100644 index 0000000..b4f242c --- /dev/null +++ b/icons/ui/copy.svg @@ -0,0 +1,4 @@ + + + + diff --git a/icons/ui/cube.svg b/icons/ui/cube.svg new file mode 100644 index 0000000..b34d298 --- /dev/null +++ b/icons/ui/cube.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/icons/ui/eye.svg b/icons/ui/eye.svg new file mode 100644 index 0000000..87d6a1f --- /dev/null +++ b/icons/ui/eye.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/ui/flask.svg b/icons/ui/flask.svg new file mode 100644 index 0000000..00e122b --- /dev/null +++ b/icons/ui/flask.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/icons/ui/hashtag.svg b/icons/ui/hashtag.svg new file mode 100644 index 0000000..55dc0ef --- /dev/null +++ b/icons/ui/hashtag.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/icons/ui/info-circle.svg b/icons/ui/info-circle.svg new file mode 100644 index 0000000..6b6f6c7 --- /dev/null +++ b/icons/ui/info-circle.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/icons/ui/key.svg b/icons/ui/key.svg new file mode 100644 index 0000000..ae10e89 --- /dev/null +++ b/icons/ui/key.svg @@ -0,0 +1,4 @@ + + + + diff --git a/icons/ui/lock.svg b/icons/ui/lock.svg new file mode 100644 index 0000000..060eea6 --- /dev/null +++ b/icons/ui/lock.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/ui/nav-arrow-right.svg b/icons/ui/nav-arrow-right.svg new file mode 100644 index 0000000..b4f3c46 --- /dev/null +++ b/icons/ui/nav-arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/ui/refresh-double.svg b/icons/ui/refresh-double.svg new file mode 100644 index 0000000..c0f0906 --- /dev/null +++ b/icons/ui/refresh-double.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/icons/ui/rocket.svg b/icons/ui/rocket.svg new file mode 100644 index 0000000..414477e --- /dev/null +++ b/icons/ui/rocket.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/icons/ui/search.svg b/icons/ui/search.svg new file mode 100644 index 0000000..83f0504 --- /dev/null +++ b/icons/ui/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/ui/shield-check.svg b/icons/ui/shield-check.svg new file mode 100644 index 0000000..2fe8a9e --- /dev/null +++ b/icons/ui/shield-check.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/icons/ui/shield.svg b/icons/ui/shield.svg new file mode 100644 index 0000000..0daadb0 --- /dev/null +++ b/icons/ui/shield.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/ui/stats-report.svg b/icons/ui/stats-report.svg new file mode 100644 index 0000000..18dbd11 --- /dev/null +++ b/icons/ui/stats-report.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/icons/ui/stats.svg b/icons/ui/stats.svg new file mode 100644 index 0000000..a9b4779 --- /dev/null +++ b/icons/ui/stats.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/icons/ui/user.svg b/icons/ui/user.svg new file mode 100644 index 0000000..8f2b2ba --- /dev/null +++ b/icons/ui/user.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/docs/id/design-guidelines/human-badge.svg b/images/docs/id/design-guidelines/human-badge.svg new file mode 100644 index 0000000..250f90b --- /dev/null +++ b/images/docs/id/design-guidelines/human-badge.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/docs/id/design-guidelines/partner-app.svg b/images/docs/id/design-guidelines/partner-app.svg new file mode 100644 index 0000000..43cf9ed --- /dev/null +++ b/images/docs/id/design-guidelines/partner-app.svg @@ -0,0 +1,14 @@ + + + + + + + + diff --git a/images/docs/id/design-guidelines/partnership-world-id.svg b/images/docs/id/design-guidelines/partnership-world-id.svg new file mode 100644 index 0000000..bf6dd36 --- /dev/null +++ b/images/docs/id/design-guidelines/partnership-world-id.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/docs/id/design-guidelines/qr-artwork.svg b/images/docs/id/design-guidelines/qr-artwork.svg new file mode 100644 index 0000000..c850763 --- /dev/null +++ b/images/docs/id/design-guidelines/qr-artwork.svg @@ -0,0 +1,231 @@ +World developer documentationhttps://docs.world.org/ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/docs/id/design-guidelines/world-id-badge.svg b/images/docs/id/design-guidelines/world-id-badge.svg new file mode 100644 index 0000000..4d34ab6 --- /dev/null +++ b/images/docs/id/design-guidelines/world-id-badge.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/index.mdx b/index.mdx index 7d2a0f0..fd76408 100644 --- a/index.mdx +++ b/index.mdx @@ -26,58 +26,58 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
-
-

World Developer Docs

-
+
+

World Developer Docs

+
Integrate World ID and deploy on World Chain with official developer documentation.
-
+ -
+
-
-
World Tech Updates
+ @@ -165,9 +165,9 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx"; */} {/* Footer links — single row per Docs 3.0: trademark left, links right */} -
+
™ 2026 World -
+
About World Developers Whitepaper diff --git a/mini-apps/ecosystem/ecosystem.mdx b/mini-apps/ecosystem/ecosystem.mdx index e84eeae..1377e7b 100644 --- a/mini-apps/ecosystem/ecosystem.mdx +++ b/mini-apps/ecosystem/ecosystem.mdx @@ -9,7 +9,7 @@ Ecosystem tools and integrations for builders on World Chain and Mini Apps. {/* // Integrate token functionality into your dApps: token lists and balances, @@ -18,7 +18,7 @@ Ecosystem tools and integrations for builders on World Chain and Mini Apps. */} Early builders get ~10,000 real users sent to your Mini App. Free analytics @@ -26,7 +26,7 @@ Ecosystem tools and integrations for builders on World Chain and Mini Apps. Generate Uniswap API keys to add swap and LP functionality directly to your diff --git a/mini-apps/index.mdx b/mini-apps/index.mdx index 30d8261..355e77c 100644 --- a/mini-apps/index.mdx +++ b/mini-apps/index.mdx @@ -20,14 +20,14 @@ native-like and interact with the World ecosystem. Statistics about the Mini Apps ecosystem. Check the current status of World App. diff --git a/mini-apps/more/community-tools-perks.mdx b/mini-apps/more/community-tools-perks.mdx index d83ec6e..4bbfe6a 100644 --- a/mini-apps/more/community-tools-perks.mdx +++ b/mini-apps/more/community-tools-perks.mdx @@ -9,19 +9,19 @@ Special perks and integrations from trusted providers supporting the World Mini Pilot program rewarding qualifying Mini App developers based on verified human usage. $300K USD equivalent in WLD over three months. - + Foundation Grants supporting the World Network and novel mini apps (50M WLD dedicated). [Learn more](https://world.org/grants) 4 months free for Enterprise, 3 months free for PAYG, $500–$2000 in bonus @@ -29,17 +29,17 @@ Special perks and integrations from trusted providers supporting the World Mini Apply for Cloudflare for Startups program. Use 'World Mini App' as your partner when applying. - + 15% discount on any Lazo product, plus 6 months free of Lazo One (Data Room + AI for fundraising). - + 30 day free trial for all builders on World Chain. Use code: TW-WORLDCHAIN diff --git a/model-context-protocol/index.mdx b/model-context-protocol/index.mdx index 887360e..97da651 100644 --- a/model-context-protocol/index.mdx +++ b/model-context-protocol/index.mdx @@ -13,14 +13,14 @@ World provides two MCP servers: Search World documentation from Claude, Codex, Cursor, VS Code, and other MCP clients. No API key required. Create apps, configure World ID, upload app store assets, and submit apps for review with a developer portal API key. diff --git a/snippets/credential-hero.jsx b/snippets/credential-hero.jsx index 31943a6..59c71e7 100644 --- a/snippets/credential-hero.jsx +++ b/snippets/credential-hero.jsx @@ -35,19 +35,18 @@ export const CredentialHero = ({ sourceCodeHref, }) => { return ( -
+
{/* Banner */}
-
-

+
+

{title}

{description && ( -

+

{description}

)} @@ -66,18 +65,18 @@ export const CredentialHero = ({ {/* Metadata table */}
{issuerName && ( -
- - +
+ + - + Issued by {issuerVerified && ( - + )} @@ -86,12 +85,12 @@ export const CredentialHero = ({ href={issuerHref} target="_blank" rel="noopener noreferrer" - className="font-medium text-zinc-900 underline decoration-zinc-300 underline-offset-2 hover:decoration-zinc-500 dark:text-zinc-100 dark:decoration-zinc-600 dark:hover:decoration-zinc-400" + className="font-medium text-[#1f1f1f] dark:text-white underline decoration-zinc-300 underline-offset-2 hover:decoration-zinc-500 dark:decoration-zinc-600 dark:hover:decoration-zinc-400" > {issuerName} ) : ( - + {issuerName} )} @@ -99,11 +98,11 @@ export const CredentialHero = ({
)} {status && ( -
- - +
+ + - + Status {status === "active" && ( @@ -112,7 +111,7 @@ export const CredentialHero = ({ )} {status === "beta" && ( - + Beta )} @@ -124,24 +123,24 @@ export const CredentialHero = ({
)} {id != null && ( -
- - +
+ + - + ID - + {id}
)} {sybilResistance != null && ( -
- - +
+ + - + Sybil resistance {sybilResistance === "some" ? ( @@ -151,8 +150,8 @@ export const CredentialHero = ({ {sybilResistanceDescription && ( - - + + )} @@ -164,8 +163,8 @@ export const CredentialHero = ({ {sybilResistanceDescription && ( - - + + )} @@ -178,36 +177,36 @@ export const CredentialHero = ({
)} {validityPeriod && ( -
- - +
+ + - + Validity period - - + + - + {validityPeriod}
)} {sourceCodeHref && ( -
- - +
+ + - + SDK Reference {sourceCodeHref === "coming-soon" ? ( - - + + Coming soon ) : ( @@ -215,7 +214,7 @@ export const CredentialHero = ({ href={sourceCodeHref} target="_blank" rel="noopener noreferrer" - className="font-medium text-zinc-900 underline decoration-zinc-300 underline-offset-2 hover:decoration-zinc-500 dark:text-zinc-100 dark:decoration-zinc-600 dark:hover:decoration-zinc-400" + className="font-medium text-[#1f1f1f] dark:text-white underline decoration-zinc-300 underline-offset-2 hover:decoration-zinc-500 dark:decoration-zinc-600 dark:hover:decoration-zinc-400" > {sourceCodeHref.split("/").pop()} diff --git a/snippets/developer-stories.jsx b/snippets/developer-stories.jsx index 2270458..96d5d21 100644 --- a/snippets/developer-stories.jsx +++ b/snippets/developer-stories.jsx @@ -23,24 +23,22 @@ export const DeveloperStories = ({ title, subtitle, items = [] }) => { }; const arrow = (direction) => ( - + ); return (
-
{title}
- {subtitle ?
{subtitle}
: null} +
{title}
+ {subtitle ?
{subtitle}
: null}
@@ -48,7 +46,7 @@ export const DeveloperStories = ({ title, subtitle, items = [] }) => { type="button" aria-label="Next story" onClick={scrollByCard(1)} - className="landing-carousel-arrow flex h-10 w-10 cursor-pointer items-center justify-center rounded-full" + className="flex h-11 w-11 cursor-pointer items-center justify-center rounded-full bg-[#f7f7f7] transition-colors hover:bg-[#f1f1f1] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#007cfb] dark:bg-[#2b2b2b] dark:hover:bg-[#333333]" > {arrow(1)} @@ -59,7 +57,7 @@ export const DeveloperStories = ({ title, subtitle, items = [] }) => { {items.map((story, index) => (
{playing === index ? (